Know Thy Template

This test, er I mean homework assignment, is primarily aimed at those who use blogger to create their blog, as we will be using blogger's playground for our exercizes. However, everyone interested in gaining control over how their blog looks can benefit from this playtime. I'm going to be talking bare basics. I'm not a professional, (but my sweetie is) so I'll be using everyday language to describe what we are doing. I figure its easier to start out basic- everyone can always take off from there with their own play ideas.

I understand that we may be a bit shy about our blog's playground behaviors (untamed things that they are). To give ourselves a private playground- simply go create a new blog. This will allow us to play around without messing things up.

Set Up

So, go to blogger and create a new blog using the same default template that you use with your food blog. Though my blog was created outside of blogger, I'll be playing with the first choice-Minima if anyone wants to play along. It may be helpful to name your test blog after your food blog. For example a title of "My Recipes Test". The beauty of this is that if you ever committ the ultimate fear of really messing things up- you can always delete your test blog and create a new one, say "My Recipes Test2".

The crux of the issue is understanding what is going on in your template. If only it were as easy as simply reading the darn thing! Unfortunately we have to get down with the lingo just to figure out what the parts of your blog are. As Sam has mentioned, this deceptively simple process can eat away days of your time.

Getting Into Your Template- CSS

Lets first make sure everyone can find their banner. This exercize will also show you the exact space on your blog that your template designer decided to call the banner.
Clicking on your Template Tab at the top of your basic options blogger page brings you to a page in which your template code sits in a text file. Scrolling down the Minima info, I come to:


/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */

This is the beginning of my style sheet information for the template. It is below this space that we will be playing around. Your Cascading Style Sheet, or CSS, is different from your html code. Your css tells your page a general set of aesthetics for your blog... what your link colors will be, what your background color will be, and even how wide your content space is.

Scrolling down my css I quickly find a title that looks like this:

/* Header
----------------------------------------------- */

The information that is indented under this title all descripes how information within your Header will look. Lets first get in and change some colors to find out our defined space. This is just like using a highlighter pen. The first block of my header css, I'm going to change the numbers for my background color from white (#fff) to red(#cc3333).

Default:
#header {
width:660px;
background:#fff;
margin:0 auto 10px;
border:1px solid #ccc;
}

Change:
#header {
width:660px;
background:#cc3333;
margin:0 auto 10px;
border:1px solid #ccc;
}
Hit your preview button- and this now shows the exact box on your blog that your CSS defines as your Header. Excellent! Play with changing the width line, from 660px to 50px. Note how your text in your banner behaves. Breaking your blog in this manner tells you alot about how your blog is trying to think. For example, my text still shows up- even though I definied the space it goes in as being too small for it. Also, my text still starts out at the center of this tiny box.

You can also see that your banner can have a border around it. The default defines it as a solid color (#ccc, which is a grey). The default also says that this banner is going to be skinny, only one pixel (or px) wide and a solid line of color. Borders can be fat or non existant (try 0px). Borders also don't have to be a solid line. They can be dotted, dashes, a double line, even grooved. Replace the word solid with either: dotted, dashed, double, ridge, inset, or outset. Do you see a change?

Check out W3 School's website for examples of ways to define your border. Also, look at their css tutorials. You can skip ahead and see how to play around with your text, and heck everything else!

Colors

The color language we grew up with (red, yellow, etc) is defined a little bit differently on your blog. Note how we refered to colors as numbers and letters, white is fff(shorthand) or ffffff. Play around with which colors you like by plugging in numbers from these color testing websites...

• This Color Lab shows you colors and the corresponding codes for them.
• This ColorTester lets you plug in the hexadecimal (it takes 6 places to define a color) code and see what comes out

Notes to Yourself and Others

As you figure out what your css is really saying, go ahead and make a note in language you can understand. Including your notes in your code is called commenting. To tell your blog that it shouldn't try to read these like they are code, we bracket all comments like so:

/* seems to be white*/

Check out Sam's comments in the Food Blog S'cool code for examples of working comments (in your browser go up to edit, select View, select Page Source). These comments are where you can talk about what a color really is... or an easier way to remember where a particular part of your blog is. Just remember to always bracket them with /* and */.

Next Time

These same ideas apply to all the spaces in your blog as defined by your css. Play with your background colors in other parts of your blog. Play with the border around your entire blog (my favorite way to add a nice splash of color. Look at other blog's Page Source (though not all blogs will have their style sheet visable).

Next time we'll play with templates that use images in the banner area.