Learn The Anatomy Of A Blogger Template | CSS For Bloggers: Part 6

For me one of the enjoyable aspects of blogging is tweaking your blog's design to get it just the way you want.

If you're like me you will want to change the appearance of every single facet of your blog's template.

Today I'm going to be showing you how to identify the CSS elements of your theme.

Once you figure out the CSS selector of the section you want to manipulate you can then later edit the CSS for it. Half the trouble is figuring out the names of the different elements in order to do that in the first place.

Think of this is a Blogger CSS Element Cheat Sheet.

The Main Components

The template we're looking at today is Thesis it is a great SEO ready theme for Blogger and WordPress and will serve as a good example.

I've highlighted the areas so you can see the elements visually with the property name in red.

#submenu - Many themes will begin with just a header element up top but Thesis uses this horizontal navigation menu. Sometimes they are called "pagelist" or "linklist" or whatever the template designer decided to name it. This is not to be confused with Blogger's nav bar that sits up top.

#main-wrapper - This is where all the data from your post's will sit with the side bars on either side.

sidebar-wrapper(L) - 9 times out of 10 the sidebar is going to be labeled sidebar. If not it will be something along of "#column-right" etc. This is where all your widgets and gadgets go.

The Post Element

Let's delve a bit further and look at the post entry element inside of the main wrapper section.

This is how your posts on Blogger will most likely be set up.

.post-title entry-title - Want to make some changes to your post titles? This is where it's at.

.post-footer-line post-footer-line-1 - When it comes to footer lines these are usually placed in stacking order under bigger elements.

They contain small text usually data information, in this case the post date and comments etc. You can actually add another line if you wanted to put another small element under these like social media buttons is a good idea.

I will be breaking this footer down even more in the next section so you make even more selective changes.

.post-body entry-content - You guessed it, this is where your post's actual content goes.

Most of these are fairly self-explanatory and universal for more Blogger templates.

Knowing them though is especially handy if you would want to say, make your comments number a bit larger or change the individual colors/fonts of any one thing.

A Breif Look at the Sidebar

Here is an example of a typical sidebar.

If you use a lot of widgets it's definitely good to know how this is set up out so you can make sweeping changes to all your sidebar content at once using CSS.

One very important thing to remember here is that things like H2 and .li are not specific to the sidebar.

Changing the .li property will affect all lists displayed on your blog throughout which may or may not be what you wanted to accomplish.

The same goes for the H2 which could be found on other parts of the theme, always be sure to fully preview your change before making it live. Using a test account with your current template loaded to it is a great way to experiment with template design tweaking.

CSS For Bloggers

• 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