Blogger Template Design: Tutorial 5

• Tutorial 4: Setting the Properties of a Container
• Tutorial 6: Using the Generic Blogger Template

Here's a list of all the common containers and elements in a Blogger template and their funtions (elements are basically any object that make a blog funtions and containers are large elements that contains smaller elements or some other contents).

These common elements that I'll show are not necessarily the elements that exist or must exist in all Blogger templates, but are just some common elements that controls a large part of your template style. Knowing these elements will make it a lot easier for you to know where to look for in the template code and how to deal with other new elements that you may find in other templates.

I'm not going to list all the elements, but only enough elements so that you get the ideas and can understand all the other elements on your own. I will refer to the images from the below to CSS Styling Section make things easier to follow.


The symbols # and . show the attributes of the element (sort of a classification of the element type). But you don't have to worry much about this for now. If you want to know more about this, I suggest the W3Schools tutorials.

Global:

• body {.....} - general properties for the whole template.
  
• #outer-wrapper {.....} - the starting and largest container for all your template contents. Inside this is the header-wrapper, content-wrapper, and footer-wrapper.
  
• #content-wrapper {.....} - the wrapper that contains sidebars and main containers.
  
• a {.....} - this sets the overall properties of your link text.
  
• a:visited {.....} - this sets the overall properties of your visited link text.
  
• a:hover {.....} - this sets the overall properties of your link text when the mouse hovers over it.
  

Because all element codes must be contained within the {.....}, I'll just write the element titles after this.

Header:

• #header-wrapper - the container that wraps your Blog Title and Blog Description.
  
• #header - the container just inside the header-wrapper.
  
• #header h1 - the command inside this containers controls the appearance and layout of your Blog Title.
  
• #header h1 a - controls the properties of the Blog Title as a link text.
  
• #header .description - the properties of your Blog Description.
  
• #header a img - controls the properties of an image inside your header container.
  

Main:

• #main-wrapper - the container that wraps your Date Header, Blog Posts, Comments, Feed Link, and any widgets that you drag above or below the Blog Posts.
  
• #main - the container just inside the main-wrapper.
  
• #main .widget - controls the properties of all widgets inside the main container.
  
• h2.date-header - sets the properties of your Date Header (just above your Post Title).
  
• .post - sets the properties of your Blog Posts container.
  
• .post h3 - sets the properties of your Post Title.
  
• .post-body p - sets the properties of the body or content of your post.
  
• .post ul - sets the properties of an unordered list (a list that is not numbered).
  
• .post ol - controls the properties of an ordered list (a numbered list).
  
• .post li - controls the properties of the individual list inside an unordered list or an ordered list.
  
• a img - controls the general properties of an image (the a refers to a link; and an image is by itself a link).
  

Sidebar:

• .sidebar-wrapper - the container that wraps all elements and contents in a sidebar.
  
• .sidebar - the container just inside the sidebar-wrapper.
  
• #sidebar1 - sets the properties inside sidebar1.
  
• #sidebar2 - sets the properties inside sidebar2. If you want the properties inside sidebar1 and sidebar2 to be the same, than you can just the properties inside .sidebar and don't have to even write down the #sidebar1 and #sidebar2 in your CSS code.
  
• .sidebar .widget - controls the properties of all the widgets (the Added Page Element) in your sidebar.
  
• #sidebar1 .widget - only sets the widgets in sidebar1.
  
• .sidebar .BlogArchive - sets the Blog Archive properties. Technically, this is a sidebar widget too, but I'm not sure why setting the properties for sidebar widgets doesn't change any properties for the Blog Archive. That's why I have to write down the .BlogArchive command to set its properties.
  
• .sidebar h2 - sets the title/header properties of a sidebar widget.
  
• .sidebar #BlogArchive1 h2 -sets the properties of the Blog Archive's title.
  

Miscellaneous:

Technically, the Profile (About Me) container is placed inside a sidebar, but I'm putting it in the Miscellaneous section because there are many smaller elements that belong together with the Profile container and putting it in the Miscellaneous reduces the mess.

• #Profile1 - sets the properties for the About Me block.
  
• #Profile1 h2 - sets the title/header for the About Me block.
• .profile-img a img - sets the image in the About Me block.
• .profile-textblock - sets the author description About Me block.
• .profile-data - sets the author's data in the About Me block.
• .profile-datablock - sets the overall blocks of data in the About Me block.
• blockquote - sets the quoted text in your posts.
• code - sets the text contained within the code tags in your posts.

Post-Footer:

• .post-footer - sets the overall properties of the post-footer container.
  
• .post-footer-line - sets the properties for each new lines in the post-footer.
  
• .post-footer a - sets the link text properties inside the post-footer.
  
• .post-footer .post-comment-link a - sets the "comment" link inside the post-footer.
  
• #blog-pager - controls the properties of the "newer posts", "home", and "older posts" links.
  
• #blog-pager-newer-link - controls the properties of the "newer posts" link.
• #blog-pager-older-link - controls the properties of the "older posts" link.
• .feed-links - controls the "Subscribe to: Posts (Atom)" link.

Comment:

• #comments - sets the overall comment container's properties.
  
• #comments a - sets the link text properties inside a comment container.
  
• #comments h4 - sets the header of the comment container.
  
• .deleted-comment - sets the properties of the deleted comment.
  
• .comment-author - sets the properties of the comment author.
  
• .comment-body p - sets the comment body properties.
  
• #comments ul - controls the unordered list inside a comment container.
  
• #comments li - controls the individual list inside a comment container.
  

Footer:

• #footer-wrapper - the container that wraps all elements and contents inside a footer section.
• #footer - the container just inside the footer-wrapper.
  
• #footer h2 - sets the properties of the footer title/header.
  
• #footer .widget - controls the footer widget properties.
  
• .footer a - controls any footer link texts.

Now that you know these containers and elements, you'll know where to look for in the template code whenever you want to change something about your template (fonts, text colors, background colors, padding, etc). What you do then is simply modify the codes inside the {.....} for that container or element only.

Labels: Make Template, Tutorial

---