Some of the blogger templates uses two types of inline tags; inline CSS and another isinline div. Usually div inline tags are used to override the CSS codes in the template. But there are times where we have to do it other way around.
Easy Way to Search for Inline Styles in a Website
Refer to latest post on search for inline styles in a website.
Override Inline Div Styles with CSS
In CSS-tricks,Chris Coyier suggest a method to override div tags inside the blogger template with CSS inline style.
He suggest that if a div tag such as:<div style=”background: red;”> </div> exist in an external stylesheet and the background color need to be changed to yellow. So a simple CSS important tag
can be used to override it. The important CSS tag to override the div tag will look like the one below;
div[style] { background: yellow !important; }
You are free to try this in your blog template. It will usually WONT WORK.
This is due to use of [style] attribute in the code.The [style] attribute selector is not needed to override the style and using [style] attribute selector makes it no work in IE 6,Firefox (3.0.10).
The solution
The solution is to use inline tag without [style] attribute.
div{ background: yellow !important; }
This code will work in all the browsers.
 |
| Example div code override with CSS inline style |
As you can see in the image, the div tag had inline for text-align to left. So the element style code appeared as text align:left; I override it with a CSS important tag.
How to find classes in external style sheets
You can use Chrome to find the inline style tags by going to the webpage
Go to the place where you want to find the class in the webpage.
Right click.
Select Inspect
Scroll to top or bottom to find the inline tag class name.
How to Save Important Tags in Blogger Template
Find the classes [div] and attributes [font, color, etc.]
Then add that class name and put attributes. Then mention that important tag.
You can try previewing the changes in HTML editor and previewer.
Go to blogger
Go to theme
Edit HTML
Add CSS code before]]></b:skin> tag.
Save the blogger template
Refer toOverride Div Inline Styles with CSS With Important In Blogspot for more basic details about inline codes and important tags.
Subscribe to know more about CSS and HTML error fixes.
Kindly Share AheadShip Me This
