Customizing Blogger templates: Part 2

 Looking at our blog we have no idea what the divisions(div’s) are called.
With Firefox loaded and the Web Developer add-on installed, we can see the Web Developer tool bar.
It looks like this.


If it is not visible go to the Tools menu at the top of the browser window and you should be able to access it from there.
Click Information on the Web Developer tool bar then Display Element Information.
You will then have a crosshair cursor and as you hover over the different page elements it will place red border around the element.
When you click the element, information about the element will be displayed in the orange box.

Here you can see I have clicked on the blog heading and the box has displayed the information about it. 

Now I click the white section on the right hand side of the page.

 

The information that is displayed has what I need to find that section in the CSS code.

The first line is what we are interested in here.

div #sidebar .sidebar section

When writing HTML code div’s usually have either an id or a class. Any particular div id can only be used once per page. A class can be used more than once; this would be used say for several paragraphs on a page where you would like to give them a different formatting to other paragraphs.
Div is written as div id=”whatever” in HTML and in CSS this is written as #whatever.
A class is written as class=”something” in HTML and in CSS .something. The name with a period or dot before it.

Customizing Blogger templates: Part 1

Before we jump into editing the html for our blog let’s get some great tools.
Personally I use Firefox as it is the preferred browser of many web designers. Internet Explorer is a designer’s nightmare.
Type ‘internet explorer quirks’ into your search engine, I got 1,010,000 results.

Once you have Firefox installed, get the Web Developer add-on and install it also.

So what does it do? It makes editing your template via the html easier.
WebPages and your blog are made up basically of Hypertext Markup Language(HTML) and  Cascade Style Sheets(CSS) code.

This is the html code that makes up a div, a div could be likened to a box.
<div id="main-wrapper" >
Text and Images can be added inside the box.
</div >

And this is the CSS code, this tells your browser how big the box should be and what to do with the elements inside it.

#main-wrapper {
  width:64%;
  float:$endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

Sometimes identifying the divs and page elements can be difficult this is where the Web Developer tool comes in handy.
This will be explained in Part 2