I'm trying to figure out how to make svgs without giving every element a style attribute.
Two problems:
When referencing an external css file, the style appears correctly in a browser, but not in an image viewer. Is this normal/avoidable?
Most of my elements have class and id attributes, and the following css doesnt provide the desired effect, i.e., county 21015 doesnt have its fill overridden
.county
{
font-size:12px;
fill:#d0d0d0;
fill-rule:nonzero;
stroke:#000000;
stroke-opacity:1;
stroke-width:0.1;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-linecap:butt;
marker-start:none;
stroke-linejoin:bevel;
}
path#21015
{
fill:red;
}
If the fill isn't the one you want then there probably is something with higher specificity overriding the stylerule you want, such as an inline style attribute on that element, or some other rule affecting that element. You can also admit defeat by writing "fill: red !important" - that will work in the majority of cases.
Anyway, this is more of a css question than an svg question.
This is an alternative syntax...
Within the definition tags..
.fil0 {fill:#96989A}
Within the path tag(s) class="fil0"
Direct class references from the path to the definitions will override all others in my experience.
Related
I have 2 icons - a filled thumbs-down (reject) and an unfilled thumbs-up (approve). I need to have both a thumbs up and down image which fills in on hover.
I am trying to use FontAwesome's flip CSS to achieve this. The icons themselves are from an iconfont generated using ico-moon and relate to classes .icon-approve and .icon-reject.
.icon-approve-hover-fill {
#extend .icon-approve;
}
.icon-approve-hover-fill:hover {
#extend .icon-reject;
#extend .fa-flip-vertical;
}
.icon-reject-hover-fill {
#extend .icon-approve;
#extend .fa-flip-vertical;
}
.icon-reject-hover-fill:hover {
#extend .icon-reject;
}
My issue is that for the reject-hover-fill case that the .icon-reject-hover-fill:hover is still flipping due to the .fa-flip-vertical; in the .icon-reject-hover-fill base class.
I need .icon-reject-hover-fill:hover to effectively be it's own class and not inherit the useless extra flip from .icon-reject-hover-fill. I assume there's a way to achieve this without me needing to re-create my font with flipped icons? I need it to work down to IE 8 and can be either basic CSS or SASS (though it needs to work with Sencha's flavour of SASS in ExtJS 6).
The .icon-reject-hover-fill:hover selector is stronger than .icon-reject-hover-fill. If .icon-reject-hover-fill has CSS properties you don't want when the element is hovered, just specify the desired value inside .icon-reject-hover-fill:hover{}, in your custom CSS.
However, instead of adding a class that has properties you want to unset, just create another class, of your own, that contains only the stuff you want from the class you are importing. Trying to unset properties that have been set is the fastest path to CSS mess-up, quickly escalating into code that is almost impossible to maintain.
The usual way to reset an already set property in CSS is {property-name: initial;}. Please note that not all CSS properties can take initial as value.
Is there a way or operator in CSS to assign a new style to specific element? I don't want to change original style because it belongs to a plugin and changing it will change it on all my pages. However I want to change the position of the element on a specific web page.
I also can't call those styles in my html because that CSS file is used solely in jquery plugin, you only put class="slideshow" in html div and thats that. I can change that CSS file to suit my preferences, however I don't know how to change it for specific instances?
In order to make a specific styling on a specific instance of your plugin, you should assign a specific class or id to a parent container of that plugin for the instance you need customization.
Example : you can give the id="special" to a parent of the plugin in the page you want customization.
Then you can use that selector to style it independently from other instances of that same plugin.
example CSS:
#special .slideshow /*other selectors */ {
/*your specific style */
}
In your scenario CSS specificity Rule will be helpful for you.
For example in your plugin you are using RED Font Color in class slideshow. Then in your another CSS file you can create a more specific Rule.
Check the Demo what I've posted above on comments section. Here is the direct link.
div.slider .slideshow {color:green;}
You can refer to the element by name:
#htmlitemname{
color: green;
}
CSS is cascading, i.e. it will apply it top down - general, class and then the id.
You can add !important to your css if you wish it to override any inline styles. So long as you make a style sheet specifically for that page, this should work for what you need. Hope this helps :)
I have a css sheet for a big project that I can't change, "cantChange.css"
I also have a css sheet for a small portion of the project that I am able to change "canChange.css"
Both css sheets describe the style for a certain class -- and cantChange.css is overriding canChange.css.
Is there any way to give priority to a certain style sheet for a URL? Is there another way to do this with css specificity rules?
The loading order of course is important. You should load "canChange.css" after you loaded the other one. On top of that CSS offers !important . Which allows for something like:
background-color: blue !important;
If that still doesn't do anything add an id to the element in question and style that one. IDs are always higher prioritized then classes or common selectors.
You've got a few options to address this:
Make your selector more specific (e.g. #body #small-project .cool-class)
Apply the styles inline (e.g. style="color: #000")
If you can change the order in which the stylesheets are loaded, load canChange.css file after cantChange.css
Give priority using !important (What does this mean?)
You can make your own declaration MORE SPECIFIC to override the others.
For example:
body.someclass .anotherclass { ... }
<body class="someclass">
will always override .anotherclass { ... }
I'm new to the web side of things, and am confused how to deal with CSS. (Thankfully), there is little direct manipulation of HTML/CSS when using ExtJS4 so far... so now that I'm in need to change the CSS, I'm having problems.
Specifically, I'm trying to dynamically change the color of accordion header backgrounds.
Javascript:
afterrender: function(subForm) {
subForm.getHeader().getEl().addCls('custom-accordion-hd-valid');
// this works - so I know it's the right element.
subForm.getHeader().getEl().setStyle('background', 'hsl(100, 60%, 60%)');
}
CSS:
// attempt 1
.custom-accordion-hd-valid {
background: green;
}
// attempt 2
.custom-accordion-hd-valid .x-accordion-hd {
background: green;
}
So:
setting style via setStyle does work, but it doesn't easily allow me to remove a style
setting via addCls with CSS attempt 1 loads the CSS, but it gets overridden by .x-accordion-item
setting via addCls with CSS attempt 2 fails to load the CSS
Help?
if you for instance wanted to remove the background style you set here:
subForm.getHeader().getEl().setStyle('background', 'hsl(100, 60%, 60%)');
css will allow you to simply override it by setting it again eg:
subForm.getHeader().getEl().setStyle('background', 'none');
or
subForm.getHeader().getEl().setStyle('background', 'blue');
css has a particular priority on how it judges which styles are most "important" when multiple styles are provided - take a look here at this great article on css specificity
and realize by using that setStyle() method you are applying "inline" styles to these elements, where as other css definitions either in a file or in a style html tag have a lower priority
Is it possible to use CSS to change the color of a SVG path which is within a pseudo element data-URI?
External Site
CSS:
a[href^="http://"]:after { content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSItMyAyMSAxNSAxMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMyAyMSAxNSAxMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzk5OTk5QSIgZD0iTTEyIDIxSDB2M2gtM3YxMEg5di0zaDNWMjF6IE04IDMzSC0ydi04aDJ2Nmg4VjMzeiBNOSAyN0g3djJINXYtMkgzdi0yaDJ2LTJoMnYyaDJWMjd6Ii8+PC9zdmc+); }
a[href^="http://"]:hover:after path { fill: #000; }
Not like that, since the svg contents is in another document. Styles don't apply across documents.
And since the svg will be treated as a dumb image when referenced like this via CSS, putting the path hover style inside the svg won't help either.
I'd recommend putting the svg inline in the document if you want to style some shapes inside of it.
That said, another possibility for changing the color of an image is using filters, since they can be applied from outside. If your image is simple that might work.