Setting the Properties of a Container

>> Browse templatesMoney tips9 comments

Blogger Template Design: Tutorial 4

In this tutorial, you'll know the basics of what code sets the properties of a container. To make things simple, we'll look at 2 container blocks only - Main and Post. Once you know these, the basic ideas for all the other containers are pretty much the same.

Here is a sample code for the 2 containers:
#main {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 400px;
max-width: 400px;
background: $mainbgColor;
color: #111111;
font: $textFont;
}

.post {
margin: 0px 20px 10px 0px;
padding: 10px 20px 10px 2px;
line-height: 1.5em;
text-align: left;
background: $postbgColor;
}

The #main and .post are the titles of each containers. Each container codes must be contained within {...}. For the explanation below, we'll focus on the codes inside the post block, especially for the explanation on the margin and padding (the codes colored in red).
  • Margin - sets the distance between the border of the container to the border of a parent (larger) container outside it. There are 4 numbers defining the Margin property. The 1st number sets the top margin, the 2nd sets the right margin, the 3rd number sets the bottom margin, and the 4th number sets the left margin. It basically sets the whole margin in a clock-wise fashion starting from the top. In the case above, the parent container for the post container is the main container. See how the dashed border for the blue (post) container is placed inside the green (main) container following the post block's margin command (the codes in red). If the post's margins are all set to zero, then the post container would be exactly the same size as the main container. Think of the Margin as a command that moves its border away from a parent border. Another thing, Margin can have a negative value, which means that it moves toward the parent border and may overlap it (not away from it).
  • Padding - sets the distance between the border of the container to the border of a child (smaller) container inside it. In the case of the post container, the child container is the post-body. The 4 numbers defining the padding sets the padding in a clock-wise fashion also, just like the Margin property. See how the post's padding puts the post-body inside the post container, away from the dashed border. Unlike the Margin, think of the Padding as a command that moves a child border away from its border. Padding values cannot be negative.
  • Min-width and Max-width - sets the width of the container. Usually, it's enough to write it as width = 400px (for example), but it's becoming more of my habit to set the width as strict as possible, because I sometimes saw that if it's not written strictly, the container width might shrink and expand freely on some situations and in some different browsers. So by setting the width strictly, I made sure that it looks exactly like I want at all times in all browsers (basically getting rid of alignment bugs). If you look at my newer templates, I even set the width redundantly, say in Main-wrapper and then in Main containers eventhough they are pretty much the same. Doing it this way solves some alignment bugs that I saw (eventhough I don't really understand why it solves it by writing it redundantly).
  • Background - sets the background color of the container. It uses the hexadecimal code for colors. See here for all the color values. You can also set a background image that repeats itself to cover the whole container block. The way to do this is by pointing to the URL of an image. For details on how to do this, see W3Schools tutorials. You can also set the value to be $samplevariable, where the variable is the one that you define in Subsection 1 in CSS Styling Structure.
  • Color - sets the color of your text using the hexadecimal color code, or the variable defined earlier in Subsection 1.
  • Font - sets the font of your text. You can use the variables set in Subsection 1 also. See W3Schools tutorials for more details on setting the font properties.
  • Text-align - sets the alignment of your text. The 3 options are either left, center, or right.
  • Line-height - sets the distance, or height, between two text lines.
My tutorial just gives the basic idea on some of the codes in the Blogger templates. I'd say the most important ones for a basic understanding are the margin and padding commands. If you want a more detailed explanation on CSS styling language, I recommend w3Schools CSS Tutorial as a quick and easy resource center.

***************************************
Next Tutorial:
The next tutorial is on the quick overview of all the common containers and elements in a Blogger template.

9 comments:

Daniel Cruz January 22, 2008 8:44 pm  

I like this blog is fantastic, is really good written. Congratulation. Do you want to see something more? Read it...:Great investment opportunity in Costa Rica: beach real estate, condo, condos for sale. Visit us for more info at: http://www.jaco-bay.com

SostyPasha February 01, 2009 2:33 am  

Thanx so much :)
may God bless you mate

jaffa April 20, 2012 12:06 am  

In CSS, presentation is separated from structure. In print, CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics. It can do so independently for on-screen and printed views. CSS also defines non visual styles such as the speed and emphasis with which text is read out by aural text readers. Thanks.
Regards,
mississauga real estate agent

santa May 08, 2012 2:42 am  

Designing often necessitates considering the aesthetic, functional, economic and sociopolitical dimensions of both the design object and design process. Thanks.
Regards,
health insurance quotes california

steve7876 August 10, 2015 8:24 am  

The learning lab is providing the best Maths and English tutor in Sydney and if you are looking for maths tutor for your child contact us now!

shahbaz July 23, 2016 5:11 am  

Deem as magnanimous beside difference in fiat to blunder for this saintly sale inventory group unusual piddling encompass introduce.honeymoon packages in Brazil

shahbaz July 25, 2016 6:43 am  

Pepperfry coupon codes are retailed on Couponmama- a competent dealer of coupon codes and discount coupons. If we talk about tables then, variety of tables are ready to serve you.bestvitaminsforall.com

shahbaz September 03, 2016 4:06 am  

Thanks a ton for sharing your knowledge! It is great to see that some people still put in an effort into managing their websites. I’ll be sure to check back again real soon.flat icon

shahbaz September 21, 2016 12:36 am  

You may contact my previous clients who will tell you about work quality and make you choose my services wholesalebodyoils