Tutorial 1.3 The Structure of CSS Styling Section

CSS Style Section controls

The Style of a HTML document


I've cut down the CSS Styling Section into 9 smaller subsections :




Subsection 1 - Variable
Controls the font and color variables that appear in the Fonts and Colors tab in the Layout page.

Subsection 2 - Global
Controls the general appearance and layout:
  • Size, width
  • Layout, background color, image
  • the Outer-wrapper and the Content-wrapper - so this subsection is where you want to look for if you want to tweak those containers.


Subsection 3 - Header
Controls the properties of everything inside Header-wrapper container:
  • The Blog Title
  • The Blog Description
  • an extra object in the Header-wrapper - the Linkbar (or the horizontal menubar).
    Typically, you can't add extra object in the Header because you can't use the Add Page Element tab. To add the Linkbar, change the 3rd Section of the template code structure (which is the Data section).
  • The Google Search Bar.
    Ideally, you can add just about anything you want there, if you know how to deal with the 3rd Section.





Subsection 4 - Main
Controls Size, Layout, and Appearance of everything that the Main-wrapper block contains :
  • The Date Header
  • The Post
  • The Comment
  • The Feed Link
  • Any widgets that drag into the Main section using the Add Page Element tab.


Subsection 5 - Sidebar:
Controls the properties of everything inside your Sidebar-wrapper :
  • The Labels
  • Blog Archive
  • Adsense units
  • Link Lists, etc.

It doesn't set how many sidebars you have or their locations on the blog (example Sidebar-Main-Sidebar or Main-Sidebar-Sidebar). That part is done in the Section 3 of the Blogger Template Code Structure - the Data Section.


Subsection 6 - Miscellaneous:
This part controls the properties of additional elements in your blog that's not controlled by all the above subsections :
  • The Profile (or the About Me block)
  • The Blogquote
  • The Code
    It means if you want to, say, change the color of the quoted text or the font of your nickname in the About Me block, this is where you want to look for to tweak it.





Subsection 7 - Post-Footer:
This part controls the properties of 3 things:
  • The Post-Footer - the texts below your post body.
    This is the part that contains information about your post, or the texts that say "Posted by YourNickname, Labels: ....., 5 Comments, etc.
  • The Blog-Pager - the links at the bottom of your blog posts that say "Newer Posts, Home, or Older Posts".
  • The Feed-Link - the link that says "Subscribe to: Posts (Atom)".


Subsection 8 - Comment:
This part controls the properties of the Comments section in your blog.

Subsection 9 - Footer:
This part controls all the properties in the Footer section:
  • The Footer section contains some text explaining the ownership or copyright of a blog
  • Extra stuff in the Footer section, like the Recent Posts or Popular Posts in 2 or more columns.

Basically, you can just put about anything in the Footer as in the Sidebar. But if you want to add more than 1 column to your Footer, you have to tweak the 3rd section of your Blogger Template Code Structure.

***************************************
Next Tutorial:
The codes to Set the Properties of a Container

Labels: