My goal: To style a link, that comes from a sanitized text, with a css variable. Im using a vue framework and want to use a computed style(or similar) to style it. The color of the link comes from an api.
My issue: Since the text is sanitized, no inline style will come through. I can still access the link like this:
.sub-link-style >>> a {
color: var(--color);
}
But I can't use the variable because I cannot add inline stlye.
My question: Is there a way to add a custom value(for example from vue) to a css variable without inline style?
The solution to this issue became using the sanitizers custom handler to create an exception for the attribute i needed specifically.
However, it only left me with a new problem. When the text gets into the code the computed variables are already resolved. Given up on it for now. Perhaps I'll look more at it later.
Related
I'm trying to change my link_to text color. I've seen numerous questions and articles where people can change the link_to text color without the !important property. But my links' colors won't change without it. Was this because of a recent change, or am I doing something wrong?
I did notice that when I refresh the page, for a split second, the links are changed to the colors I've assigned to them, but then immediately changes back to the default gray color.
Recreating the issue
Run rails new app.
Run cd app
Run rails g scaffold Car model:string.
Add the following code to the app/assets/stylesheets/applications.css file.
.test {
color: red;
padding: 50px;
}
Add a link to the app/views/layouts/applications.html.erb file (within the body tag).
<%= link_to 'Testing', nil, class: "test" %>
Result
Testing is the link's color I'm trying to change. As mentioned, the text color of the link doesn't change, however, the padding is successfully applied.
While inspecting, I also noticed that the color property is lined out.
When using scaffold, it's important to be aware of what scaffold creates. For me personally, scaffold is nice for quick basic crud stuff. However it comes with a lot.
As for your issue scaffold creates a scaffold.scss which overwrites your styling. Try commenting it out and then it should work(It did for me!).
Fastest way to find out where this one is coming from is to click on the funnel icon, next to red;. It will filter you every place that color is applied to the element. There should probably be some !important declared below your CSS but it's still takes the upper hand.
When it's stroked, it's saying that it's overwritten elsewhere, it's a wrong CSS property or alike.
This issue has nothing to do with Rails or link_to. You are simply trying to style your a.test element.
You definitely do not need to use important ESPECIALLY for a new app. The CSS cascade can get complex, but this shouldn't be a complex situation.
CSS is based on both a cascade and specificity. You probably have other CSS (above the part you pasted in the inspector) that is overwriting the .test class, or something in the CSS is being more specific (since you're only styling .test.
Since this is a link (a) you should try to do a.test in your CSS, and you may also need to also style :hover and :visited pseudo classes.
I am trying to find what is overriding my CSS element using chromes element selector but am unable too.
This answer seems outdated I can't find how to access "computed styles":
Chrome Developer Tools: How to find out what is overriding a CSS rule?
I don't know why this color is overridden with gray:
chrome
How can I find whats doing it with google chrome?
If you look at the image, it will tell you that the property is changed in the element.style.
In other words, the change is not applied using a selector such as class or id, but rather to the element itself.
This can be done in two ways, as far as I am aware.
1) In HTML, writing the properties directly within the element:
<div style="color:gray;"></div>
2) In Jquery, referencing the specific object (for example, using the id property) and then using the css property:
$('#divname').css({
color:gray;
});
With regard to finding what is causing the issue:
1) Finding out if the change has been made in HTML should be fairly straightforward, as you would just need to have a look at the HTML file.
2) If the change has been made through Jquery, things get a little more complicated: a ghetto method would be to search your script files for the "gray" string. Don't forget that scripts can also be embedded into HTML, however, looking for the property the HTML file would be a good way to proceed :)
In light of GMail's questionable support for CSS, I'd like to apply style elements to everything in the HTML email I'm assembling.
I'm currently using MVC3's Razor to construct the email, then sending off the generated HTML. Is there any way for me to write the template with a style sheet, then transform it such that each element gets a style attribute with the appropriate styles?
For instance, in a normal web page, I would have something like
<style>
a { color:#1c5567; }
</style>
Click here!
If a GMail user looks at this, they won't see it in that shade of teal. However, if I do
Click here!
they will. But that is a huge maintainability headache. Thus I want a process that can take HTML with the former style and output it in the latter.
. For this, I want to take that existing CSS style and transform it such that style="color:#1c5567;" gets added to every <a> on the page.
It might be the lamest way to do this but you could use a simple CSS parser like this one CSS Parser and add style attribute as required.
Since you're overriding the style in gmail from an external stylesheet, you need to use !important to override the style.
a {
color:#1c5567 !important;
}
I want to style/mark a MenuItem in GWT MenuBar. So i have some logic that adds a style name to a menu item (the logic is working properly).
mItem.setStyleName("menuItemMarked", true);
with this set getStyleName yields "gwt-MenuItem menuItemMarked" as expected.
But how to use/apply this style in css (at the moment i put css in uibinder.xml)? (as you may see i am not a css expert)
update: what i tried is that.
.menuItemMarked{background-color: yellow}
this is not working. if i call "inspect element"(chrome) i can see "class="gwt-MenuItem menuItemMarked" but i can not find the style "menuItemMarked" in the list of applied styles?!
Where are you specifying your CSS?
If your code is located within your code packages, it is likely being obfuscated by the GWT compiler. This applies to <ui:style> blocks in .ui.xml files, and .css files included in ClientBundles.
In this case, you will want to check out Programmatic Access to Inline Styles from the GWT docs. This will allow you to change your code to:
mItem.setStyleName(style.menuItemMarked(), true);
Alternatively, you can tell GWT to not obfuscate certain CSS classes. Here is a detailed answer to a similar question
Finally, if GWT does not touch your CSS file (it is being served from your server like other files), then you will need to make sure that your file is being included in your page properly. Your browser's dev tools should be able to help with that.
Make sure you specify correct selector name in your css. In this case you need to have following:
.gwt-MenuItem.menuItemMarked {
background-color: yellow;
}
Since gwt-MenuItem remains the first class name in the list it takes precedence over any styles (incl. background-color) defined in the subsequent classes. The only way to overrule this is to define styles with more specific selector like above. Check this link out for more detailed explanation.
I have made some templates on wikia.com, which contain only CSS code (key:value;).
My problem is having another template use these style templates in a style attribute tag.
style="{{MyTemplateStyle}}"
This code does not evaluate as expected. The CSS code is outputted before the element and the style attribute is not included inside the element.
Am I trying something not possible for a wiki ?
I merely want to be able to change styling on certain templates in one place, like regular HTML & CSS pages.
CSS styling specified from the style="" attribute always takes priority over any other css, even if you use !important in a CSS specification.
Therefore any edits you make to your CSS on Wikia will not ever override the CSS specified inside an attribute.
Kim, you were right to switch to classes instead of embedding in-line styles via templates.
The very idea of using templates suggest that this was going to be re-used in more than one place, applying styles to a group or, in fact, a class of elements.
This approach is much simpler to read and maintain (as you only have one, central place to edit), and also, if done right, will enable you to seamlessly change the colour scheme via Special:ThemeDesigner.