Sunday, June 26, 2005

Know Thy Template

first homework

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.


18 comments:

Anonymous said...

There's another nice color chart here: HTML True Color Chart. And they have a printable version available (button in upper right hand corner).

Sam said...

McCauliflower, pupil of the week, you are a true treasure. Thank you so much for all the time and effort and knowledge you are sharing with us all.

Jocelyn:McAuliflower said...

Ahhh that's a great color chart!
I personally use photoshop, so its great getting out the word on sources that everyone has access to.

I'm having fun with these little guides Sam. I'm a passionate good-design disciple, so its fun turning that attention to blogs. Food Blog S'cool can be a great pulpit as we all chime in with help.

Anonymous said...

To take color one more step - check out some of these tools to design and test color schemes that will creat your intended look/mood (color theory gets emotional):

Color Scheme Generator - not only generates and shows you several different types of schemes, but lets you see how color vision impaired people will see it,
Web page colour composer -lets you see what an entire page looks like with color you choose,
moreCrayons Palettes - several types of palettes,
I Like Your Colors - if you like someone elses scheme, type in the URL, and it will tell you what colors the page uses.

There's a couple of PMS/RGB/HEX converters too :
Pantone Colour look-up
Extensive PMS color to rgb/hex charts.

Some of these tools and charts require further explanation, but there's plenty of information out there when you search for color theory, schemes and complements.

Unknown said...

Thank you so much for sharing all this information! So very helpful....

Anonymous said...

Oh great, Paul! Just what I needed - more web toys to mess around with! :-)

Those first two sites are especially cool!

Thanks!

~ B

Anonymous said...

oh what a resource the web is! here is another helpful color tool that lets you pick a color, and it suggests a six color palette to work with...

http://colormatch.dk/

just a funny side story - my sister and i used this to pick a color palette for her wedding, based on the color of her bridesmaids' dresses - LOL!

Banlieue Blog said...

I can't thank you enough! Ready and eager to break out, step by step!

Cate said...

McAuliflower -- you are the best! Played with my template a little bit tonight. Not all of my template words match yours, but I could figure out enough to change a few colors here and there.

Quick questions: How can I change the font style of my header (where the blog name is) and subheading? Also the background color used there -- where can I change that?

Cerebrum said...

Thank you Thank you Thank you! I've done a little color-changing before, but you've encouraged me to actually play around with my template - and I'm loving what I can make it do! McAuliflower you're the best!

Cate said...

OK, just killed the last 2-1/2 hours playing with my template. I can't seem to get my blog title centered top to bottom. Can anyone help?

Jocelyn:McAuliflower said...

I'm so glad you're getting a chance to dive in to your template.

Sweetnicks- just wanted to give you a reassurance that I'll try to get to your questions in the next two nights.

Cate said...

Thanks, McAuliflower. I ended up figuring out how to change the background color, so you can cross that off your "answer" list. ;)

Other problem I have, and one I notice some other bloggers experiencing sometimes too ... the links list on the right sometimes drops waaaaay down on the page, all by itself. Any idea what causes this?

sylvie1950 said...

Thanks for encouraging me to play with my template. I made changes to my banner but still have a long way to go. I also noted that many other blog sites have changed their banners recently. It is sites like this that push us to the next higher level.

Jocelyn:McAuliflower said...

Sweetnicks- give me a url for a site that shows this link location problem and we'll try to dissect it to see what's going on.

Farmgirl Susan said...

Sweetnicks,
I am a total blogging beginner, but this is one of the very few things I know about! (only because it happened to me and I found the answer somewhere buried in the blogger.com help questions).

If your sidebar drops to the bottom of the blog, it is because there is something (like a line of type) that is too long for the sidebar. Mine was several words separated by / (e.g. small/round/fat/yummy). It wouldn't split or hyphenate this "word," so it caused the whole sidebar to drop down to the bottom of the blog where it would fit.

I hope this makes sense and helps!

ChiefFamilyOfficer said...

McCauliflower, this is great! Thanks for sharing. I can't wait for your next lesson as I think it's exactly what I haven't been able to figure out - how to change the banner so that it's my logo. I wish I was better at this ...

Ana said...

Well McAuliflower, I've been working on my new template using as a base the template I got from Blogger.

I have almost completed the redesign but there are some glitches that I have been trying to clean up. For instance, the BlogTitle needs to have a value (the notes on Blogger say you don't need, but when I tried to comment it out the template would not compile); since the blog name is part of the graphic, I found that the name of the blog would rewrite over the graphic. So I made it 0em and discovered that the placement of the header changed...now who would think that a font-size would interfere with the placement of the header graphic? There was a header graphic in the original template too. Go figure!

Yesterday I bought myself a little "CSS resource booklet" that hopefully will help me with the coding.