BLC103 - changing colors, widths and other topics

Since everyone did their homework and knows all about how to play with links now we can move on into the more dastardly depths of HTML. Now it it time to bring some color to your bland looking blog. First things first though. Before I forget, here's an easy way to keep an article at the top of your page. This one doesn't involve any coding but it's important anyway.

There's a couple of ways you can do it. The first is to copy the text directly into your template in the proper place so that no matter what you do it will stay put. The only way to get rid of it it to go back into your code and delete it manually.

The second way to do it is to bump up the date on the article. Say, for example, you were nominated for a blog award and you wanted to keep a little redirector post to your more interesting articles at the top until the 12th. Simply change the date to midnight on the 12th and your redirecting article will stay at the top of your blog. On the 13th, when you post, it will push the article down just like any other. Yes, I mentioned this one because that's what I did. It was amazingly simple.

Anyway, back to the code party! Before I start this, you may want to go get Instahack, Daily Kossack, Little Bland Footballs, The Color Conspiracy and a host of other bland blogs. I'll wait, go get them. They need this just as much as you do. (Taps foot impatiently. tap, tap, tap, tap, tap.) What they're too busy being arrogant rank snobs to take a peek? It figures. I guess we'll have to begin without them then.

Before I get into the code of it, be forewarned that the first colors you choose will more than likely stink. Anybody remember that pink and lavender and grey phase I went through? It scared me too. One thing I've found that has really helped out is the site found here. This is the only chart that I've seen that doesn't use a host of completely freakish colors. They've narrowed your selection down to colors that work.

Okay, to understand where to put all of this stuff I'm going to copy the important parts of my template so you can follow along line by line:

1. [html][head][title][$BlogPageTitle$][/title]
2. [style]
3. body{margin:0px 0px 0px 0px; font-family:arial, helvetica; background-color:forestgreen}
4. #main{margin:20px; border:1px solid #000; background-color:navajowhite; padding:0px 0px 15px 15px}
5. #Title{font-size:43px; padding-left:0px; padding-top:10px; text-transform:none}
6. #Title a {text-decoration:inherit; color:inherit;}
7. #Description{padding:0px; padding-top:10px; font-size:12px; font-weight:normal}
8. .DateHeader{border-bottom:solid 1px #C3CFE5; font-size:18px; text-align:left;margin-top:30px; width:300px; margin-bottom:0px; color:gray; font-weight:bold}
9. .PostTitle{font-size:16px; font-weight:bold; font-family:arial, helvetica;}
10. .Post{margin-bottom:20px; font-size:15px; padding-right:15px; line-height:22px; font-family:arial, helvetica; color:black;}
11. .PostFooter{margin-bottom:10px; margin-left:0px; color:gray; font-size:10px}
12. #menu{border-left:1px solid #000; border-bottom:1px solid #000;float:right; padding:10px; width:250px; margin:0px 0px 10px 10px; background-color:indianred}

Wait! Stop! Come back! It's not as scary as it looks!

Each one of these lines effects something on your page. There are more lines like these in your template but these are the more important ones. First though, I promised you colors and here's the delivery:

I used three colors for my template; Forestgreen, navajowhite and indianred. Look through the template to see where I put these three words. Does that make things a bit easier? Do you think you could make your website pretty colors now?

There's a couple of things about colors to pay attention to. You can use the color number or you can use the title that coinsides with it. For example:

color:navajowhite

color:#ffdead

(ffdead are actually numbers...in hexidecimal. Hex is rather easy though. like binary of base 2 {0,1} and decimal of base 10 {0,1,2,3,4,5,6,7,8,9} Hexidecimal is base 16 {0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f} It gives you the ability to adjust your colors to a more clarified level.

There is a third option as well that would be similar to this:

color:# 255,222,173

I'm not sure I got the formatting on this one 100% or not, (If someone else knows please let me know so I can update) but this can be invaluable if you've made a picture in MS Paint and want to match your custom colors exactly. You can type in the numbers in either paint or your template and it will match your colors. Remember, the best source I know for approved colors is here at Hype's.

One more color not not to forget.If you change the way you do color from the word to the number or vice versa remember to change the # or your template will just ignore that color completely.

Now that you've seen the important part of the code I'll get into some other things besides the colors. Lets start with line 12. This is the one that controls your sidebar. Notice that my:

width:250px;

My width for my sidebar is 250 pixels. This is very adjustable and starts out at around 160. In order to accomodate some of the larger things on my sidebar, I made it wider. You could make it wider, or narrower as well.

Something else in that line is:

border-left:1px solid #000

So the left side of the border is a solid, one pixel wide, black (#000 is black) line. You can change the thickness by pixels, the color or say dashed for a dashed line instead of a solid one. There are other things you can do besides solid and dashed but I'm not sure what they are. Maybe dotted is a choice?

Anyway, the point is that all you need to do to change something is to figure out which line it is on and then adjust it accordingly. If you want to add a color to something that doesn't show it, put the color code in the same format as the rest of the line. All HTML does is break things into smaller peices. These pieces are usually a semicolon ; . With that, you should know just about as much as I do about playing with the header.

ADDITIONAL TOPICS:

**To change the color of words you can use the folowing script code:

[span ]American Warmonger Rocks![/span]

Treat the SPAN as tags. Check out The Volokh Conspiracy's links for a good example of this.

**I suggest six external sources to your blog. They are:

1. Sitemeter - This will tell you how many people are coming to your site and where they are coming from, as well as several other things.
2. TTLB - This show you how many people are providing inbound links to your blog on a daily basis. It also provides rankings for total links and total hits through sitemeter.
3. Technorati - This also provides information through inbound links. This one seems to be working wrong for me because it's been pegged at 106 links for months. There hasn't even been a change up or down.
4. Photobucket - This is a free picture host that has worked very well for me and some others. If you've already got a picture host or would prefer to use a different one, be my guest.
5. Blogexplosion! - This is a really neat site that lets you build up credits by checking out other people's sites. You can exchange these credits and have other people check out your site, or use your credits to put up a banner ad on a supporting blog page.
6. Bloglines - With this website, you can set up updating features with nearly all of your favorite blogs. If they have a feed (all blogspot/blogger users have a built in ATOM feed) you will be able to put them in Bloglines. As soon as they update their site, you will be notified through bloglines that they have updated their site and you can even read an excerpt from their articles. You can do it with news sites as well. Once you've got everything set up good in bloglines you can then get their HTML code and put it in your site so your bloglines updates instantly becomes your blogroll.

I hope you have enjoyed learnign about this as much as I have enjoyed teaching it....okay, MORE than I have enjoyed teaching it. I am always open to suggestions to these three courses and will be putting them into my sidebar as a permanent addition. I hope it will become a valuable tool to those that are afraid of blogging. Now you have no excuse, except being lazy. If I can get past the lazy part so can you, Ask anybody that knows me, the lazy part is a killer!