In Part 6, Learn the Anatomy of a Blogger Template I discussed a little about the basics of a standard Blogger template's CSS setup.
It was meant as a visual representation of how a CSS layout looks for beginners and a bit of a quick Thesis cheatsheet.
But what if your Blogger template is radically different or you're on WordPress or any other blog platform?
Today I'm going to show you how to identify the CSS elements on any template using a very handy browser add-on called CSS Viewer
A Simple CSS Property Viewer
I was debating putting this post as a Chrome Extension Must Have but it was originally a FireFox addon. Not only that, it ties in to my last CSS For Blogger's post as well.
CSS Viewer is a simple to use CSS property viewer that allows you to quickly find the name of the element you want to tweak.
If you didn't design the template then this can sometimes be a daunting task of viewing the source code and getting creative.
I can give one little tip to do this manually, if you're trying to find the name of the element on the page find some text by it or a image file name. From there when you're viewing the source code just search for that text and it will fall into that box or class.
But with CSS Viewer all you have to do is hover your mouse over the template itself to attain the property names of what you're looking for in no time.From there it will show you all of it's parameters, it's also good for "stealing" the CSS Style if you wish.
So if you see a font you particularly like while on a website just use the add-on and hover over to see what font it is, it's just that easy.
1. When hovering try going to the top left corner of the element you're trying to identify for best results.
2. You may have to hover over the area in different spots to find the right element.
3. Sometimes it will show results for various tags like <A> and <TD> these are the HTML keep hovering until you get the <DIV> or <SPAN> you're looking for.
4. For example, install the add-on, hover over this grey box, it should say its a <DIV> #lightbox! But if you hover over the bold text it will say <B>
5. If none of these tags or terms make sense go back and read CSS For Bloggers and brush up on your HTML @ HTML Goodies
CSSViewer :: Add-ons for Firefox
CSSViewer - Google Chrome extension gallery
- How CSS Can Help Improve Your Blog and Tag Selectors
- Learn About Class and ID Selectors
- How to Create Simple Box Content Using CSS
- How to Align Images in Blog Posts Using Float
- Create Attractive CSS Text Effects
- Learn The Anatomy Of A Blogger Template
- How To Identify CSS Elements On Any Template Easily
| Get Full Updates Subscribe to our RSS Feed with full posts via Feedburner |
1 comments:
If people want a more complicated CSS viewer, then Firebug is probably a better add-on, as it allows you to also edit the CSS and see how it looks without changing your code permanently.
Post a Comment