Next Post
Wednesday, November 18, 2009 | Author:
saaZ
\You'll see in the above that all the codes are first wrapped in the body tag, followed by the outer-wrapper tag, then the wrap2 tag. These wrappers are used to group the containers together so that they can be easily editted together. Using wrappers also make placing the containers much easier especially if you want to use additional sidebars or extra containers (such as a banner or linkbar containers as in most of my templates). In the explanation below, I'll only refer to the outer-wrapper as the larger wrapper without referring at all to the wrap2 wrapper. They're just the same (I'm not even sure why the wrap2 is there in the first place).
Inside this large container, you'll see 3 wrappers - header-wrapper, content-wrapper, and footer-wrapper. They are positioned vertically with the header-wrapper being at top and the footer-wrapper being at the bottom. It's simply because in the code, the header-wrapper is called first, followed by the content-wrapper, and finally the footer-wrapper. At this point, you don't even have to know what's inside the content-wrapper - this makes it much cleaner and easier as oppose to not having the content-wrapper and having to deal with the main-wrapper and sidebar-wrapper together all at once. It'll be a big mess then.
Because the outer-wrapper is the largest wrapper, you have to make sure that the widths of all the other wrappers inside it is less or at least equal to the outer-wrapper's width. But, if you add borders, that'll add extra pixels to whichever wrapper that you're adding the borders too. So be careful when adding borders!
Adding a new wrapper (container) in between any of these wrappers is easy. Just paste in a wrapper code (see below for example) and rename it with a new name, say a banner-wrapper. The preferred='yes' command will make an 'Add Page Element' button that'll allow you to create new widgets.
Adding a wrapper only creates a new container, or block, in your blog. In doesn't set how it's going to look or where it's going to be located. To customize how it looks and where it's located in the blog, you NEED to tweak the CSS codes.
Inside the content-wrapper, you have the main-wrapper and sidebar-wrapper. To have these two wrappers side-by-side as commonly seen in blogs, you have to set the widths of these 2 wrappers such that it's equal or less than the width of the content-wrapper. Plus, you have to add certain commands in the CSS Styling code so that they'll sit next to each other. Otherwise, they'll just fall vertically on top of one another. Typically, you need to use the 'float:left' command for this. See some template examples to check more on this. If you want to add more sidebars, say a 3-column template, you simply need to add more sidebar-wrapper code (in blue). Read more in Tutorial 10 to know how to add or change sidebars.
Once you've understood the basic idea behind the Body code, it's easy to see now why the common structure of the Blogger template code looks the way it is (see below for a 3-column example). If you want to rearrange or add new containers or wrappers, what you simply need to do is to modify the Body of the code. It's that easy! But then, you have to tweak the CSS code to set how it's gonna look in the blog.
Inside this large container, you'll see 3 wrappers - header-wrapper, content-wrapper, and footer-wrapper. They are positioned vertically with the header-wrapper being at top and the footer-wrapper being at the bottom. It's simply because in the code, the header-wrapper is called first, followed by the content-wrapper, and finally the footer-wrapper. At this point, you don't even have to know what's inside the content-wrapper - this makes it much cleaner and easier as oppose to not having the content-wrapper and having to deal with the main-wrapper and sidebar-wrapper together all at once. It'll be a big mess then.
Because the outer-wrapper is the largest wrapper, you have to make sure that the widths of all the other wrappers inside it is less or at least equal to the outer-wrapper's width. But, if you add borders, that'll add extra pixels to whichever wrapper that you're adding the borders too. So be careful when adding borders!
Adding a new wrapper (container) in between any of these wrappers is easy. Just paste in a wrapper code (see below for example) and rename it with a new name, say a banner-wrapper. The preferred='yes' command will make an 'Add Page Element' button that'll allow you to create new widgets.
Adding a wrapper only creates a new container, or block, in your blog. In doesn't set how it's going to look or where it's going to be located. To customize how it looks and where it's located in the blog, you NEED to tweak the CSS codes.
Inside the content-wrapper, you have the main-wrapper and sidebar-wrapper. To have these two wrappers side-by-side as commonly seen in blogs, you have to set the widths of these 2 wrappers such that it's equal or less than the width of the content-wrapper. Plus, you have to add certain commands in the CSS Styling code so that they'll sit next to each other. Otherwise, they'll just fall vertically on top of one another. Typically, you need to use the 'float:left' command for this. See some template examples to check more on this. If you want to add more sidebars, say a 3-column template, you simply need to add more sidebar-wrapper code (in blue). Read more in Tutorial 10 to know how to add or change sidebars.
Once you've understood the basic idea behind the Body code, it's easy to see now why the common structure of the Blogger template code looks the way it is (see below for a 3-column example). If you want to rearrange or add new containers or wrappers, what you simply need to do is to modify the Body of the code. It's that easy! But then, you have to tweak the CSS code to set how it's gonna look in the blog.
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment