Thoughts On Template #2

Previously on TOT: Knowing your Blog Plan

Playing with the <div>

Last time in TOT we saw the basic structure of the Blogger blog. We discussed how the CSS and HTML parts work in union to build up the various blocks in the web page. This time we'll see how to create some cool effects by ourselves. These can be used to make your posts more readable and interesting!

So, the <div> tag is used to PLACE any predefined CSS class in the web page. But we really don't have to define the CSS class every time. We may utilize inline CSS(ie, CSS properties specified within the div tags) then. We will go through some examples which will give you some idea on how to work this out.

At times, we use statements in our posts which may fall under a certain category. Making it more clear.. our posts may contain quotes, certain codes, or we would just like to highlight some part of the post in a special manner. Instead of leaving them in the normal style or doing some simple formatting, we can use a CSS class which defines all formatting properties we need. This can include borders, background colours, and even background images.
See the following example:

Suppose I am including the following quote in my post:
"Think beyond imagination!"

Using CSS, I can make every quote appear like this:
Think beyond imagination
For doing this, first we have to define a CSS class with the required properties. The above example uses the following CSS code:

#quote
{
border:1px solid #D8D8D8;
margin:20px 20px 20px 20px;
padding:10px 10px 10px 40px;
background:#D0A9F5 url("link to image") left top no-repeat;
font-style:italic;
color:#FFFFFF;
}


Use Layout-->Edit HTML from the Blogger dashboard. To make sure you place the above CSS code in the CSS section itself, make it a habit to place them in a common position. You can paste it before the part which says #header-wrapper, or in between any two CSS blocks in the template code.



You can read in detail about the various CSS properties by Googling. It's not necessary that you know everything. You just have to refer whenever you need to know more about using any property.

Anyways some explanations are given below:

The colours:
Colours are specified as their hexadecimal values. #000000 means black and #FFFFFF means white. Everything else comes between these two extremes. You can get an online reference of HTML colour codes here.

Margin and padding:
Both of these sounds somewhat similar, but they are different, anyhow!. When CSS defines a block, margin specifies the distance between the block and it's neibouring ones. Padding specifies the distance from the border of the block and the contents of the block. See the following picture:


Background:
In the above CSS code, you'll see that a background colour and a url of the background image is specified. When no-repeat is not specified, the image repeats itself over the whole block. Somewhat like this:
Think beyond imagination
That's quite a mess. But it looks perfect when you choose the right image!
You can use repeat-x or repeat-y instead of no-repeat(without the left top specification) for repeating the image only horizontally or only vertically:

repeat-x
Think beyond imagination

repeat-y
Think beyond imagination
Hmm.. you can use these in a more creative way as the need comes!

Now, things aren't done yet! We need to apply the CSS properties we defined to the required text, don't we?
First type in whatever you need as usual.
Think Beyond Imagination

Then, switch to the Edit HTML mode in the post creator page:



Here, just add the div tags around the text.

<div id="quote">Think Beyond Imagination</div>

Publish the post, and we're done!!

We can go on define simialr CSS definitions for codes and other highlights. As you can see the code parts above are inside special yellowish boxes. That's nothing but the very same method :).

In case of minor or temporary highlights, you don't have to go for defining a whole CSS code. Here we use inline CSS. See how I used inline css below:

<div style="border:1px dotted black; background:#F2F5A9; padding:20px;">The Eternal Thinker</div>


The result is as follows:
The Eternal Thinker

Further research...
So now you can understand the CSS classes and the way the div tags are used. In addition to making your own code, you can also edit the existing code segments by changing the various CSS properties. Take your time and understand the code, and then start editing! But be cautious.. be on the safe side as mentioned in TOT#1.

So that's all clear I guess!
Enough for now? Yeah.. more than enough :D

Bye for now, stay tuned with TOT!

6 comments:

  1. This was very very helpful et!

    Ty:)

    ReplyDelete
  2. This is what I had been looking for while I was on blogger.Love the details!

    ReplyDelete
  3. @ Smi
    nah! just sharing the little things i came to know :)

    @ airborne
    Hmm good to know that this has been helpful. Keep visiting!!

    ReplyDelete
  4. What you Ma'ming me for??? :@

    ReplyDelete