Monday, June 23, 2008

New Blog Template

I was bored and started futzing around with the Blogger templates and created one based on one of my favorite artists, Piet Mondrian. I use this style on my personal webpage as well and I have grown to like it very much.

It is easier to make a Mondrian-esque webpage with tables than the way Blogger does its layout with DIVs, but it did not turn out too bad once I got used to what-does-what in the Blogger XML template.

Anyhow, enjoy!

2 comments:

Orchid64 said...

I wish I could make big changes to blog templates. I just don't know how. In fact, I've been trying to figure out how to change the mouse over link color on my blog so it's not hot pink. :-p

I'm not utterly clueless, but I'm easily overwheled.

badmoodguy (Бадмўдгуи) said...

Don't feel bad. The template can be confusing. All I really wanted to do was change the width of the post column. I decided to play with it more since there seemed to be so many options.

If you want to change the color of your links, that is actually relatively easy.

Go to your blog customize page, and select "Fonts and Colors" tab. Here you can change the link colors.

Which is all well and good, except there is (at least in the template that I was using) no setting for hover color which is lame since I don't care what links I have visited, I just want to know when I'm over a link.

To remedy this, click the "Edit HTML" tab. Scroll down in the list and look at the "Variables". These control the colors, fonts and sizes for the template, and are editable from the "Fonts and Colors" tab. On my template, I changed "visitedLinkColor" to "hoverLinkColor" and set the color that I wanted under "value". The color is in RGB format, 00 to FF (0 to 255), i.e., my regular link is medium blue (#0000CC) and changes to medium red (#CC0000) on hovering.

To make hovering work in my template, I had to go in and change the code under the links section.

I changed the code to look like this...

----------------------------------
/* links */

a:link {
color: $linkcolor;
text-decoration: bold;
}

a:visited {
color: $linkcolor;
text-decoration: bold;
}

a:hover {
color: $hoverlinkcolor;
text-decoration: bold;
}

a:active {
color: $linkcolor;
text-decoration: bold;
}
----------------------------------

The "a:hover" section was not there, so no a's (anchors) would color on hovering. I added that with the color selection pointing to the variable set up earlier, $hoverlinkcolor, and set the other a's to use the standard link color, $linkcolor, at all times.

Since your template has hovering already, there is probably already a hover item built in to the template that you can change from "Fonts and Colors".