We’ve had several new blogs started since I posted the last list, but only one of them has two or more posts, so that’s the only one I’ll list.

Brian Wendler’s Blog: Technical information about the Banner system

OK, I’ve been meaning to post about this for a few days now. The trouble is, changing colors and other style attributes requires more than basic HTML knowledge; you have to get into what’s known as “Cascading Style Sheets” or CSS, which take a bit of explanation. If you are careful, though, it’s not terribly hard, especially if you keep a backup of your blog’s stylesheet so you can recover from any experiments that go awry. I’ll start with a general overview of stylesheets and then get down to the nitty-gritty about how you use them to change the look of your blog. Part one will end with a concrete example of how to change the colors of links in your blog; later, part two will show you how to apply that technique to other aspects of your blog.

Stylesheets have a lot of options and technicalities, but basically they boil down to a list of rules for how different HTML elements should be displayed. For instance, if you want all bold text to look red, you can set up a rule that the B tag has the color red. You can actually change much, much more than colors; stylesheets let you control all sorts of things like font, text size, margins and borders for just about everything, and even the position of items on the page.

I suggest taking a look at your blog’s stylesheet at this point. Open up a separate browser window and log in to the blog admin page. Go to your blog’s control panel and click the “Templates” button in the sidebar. Look for the Stylesheet entry in the index Templates list, and double-click it. Before doing anything else, back this template up; copy everything in the large text box and paste it into notepad or some other text editor (Word is OK as long as you save as text and not .doc format.)

If you decided to skip that step, I seriously suggest going back and doing it right now. If you don’t, you may regret it as soon as you start making changes.

Once you have backed up the stylesheet template, take a closer look at it. The top section should look much like this:

body	{
margin: 0px 0px 20px 0px;
background-color: #8FABBE;
text-align: center;
}
a	{
text-decoration: underline;
}
a:link {
color: #8FABBE;
}
a:visited {
color: #8FABBE;
}
a:active {
color: #8FABBE;
}
a:hover {
color: #006699;
}

These are the first six rules in the stylesheet. (Each rule starts with a name, and inclides one or more attributes inside a set of curly braces.) The name of the rule defines what HTML elements it applies to; the first one is the BODY tag, and the rest are for the A tag. Those of you at least somewhat familiar with HTML will know that the A tag defines a link; all the different A rules here control the appearance of various states of a link, i.e. before it is visited (the a:link rule), after it has been visited(the a:visited rule), as it is being clicked on (a:active) and as the mouse is hovering over is but not clicking (a:hover).

We’ll use these as examples to work with. You probably want to change more than the colors of links in your blog, but that will be covered later after we have a basic understanding of how colors work in stylesheets.

Take a look at the “color: #8FABBE” line in the a:link rule. That 8FABBE encodes a color, expressed as a combination of red, green, and blue. Now, I could spend paragraphs explaining hexadecimal encoding of RGB colors, but there’s an easier way to get the encoding for a particular color. webreference.com has created a tool called the colorizer that makes this process fairly painless. Go there and play around with the settings until you have a color you like (it’s probably easiest to click on the “Red” selection, move the red scrollbar up or down until you see a color you like somewhere on the color grid, then move the pointer on the color grid to that color.)

Once you have picked a color, copy the Hex value from the top of the three boxes to the lower right of the colorizer. Paste that in place of the “#8FABBE” in the a:link rule; be sure you include the pound sign. Now hit the Save button below the template text box; after a moment the page will refresh and a “Rebuild” button will appear in a yellow area near the top of the screen. Click that button to complete the process.

Now view your blog. If you’ve done this correctly, any unvisited links in your blog will be the new color, instead of the default grayish-blue. If it didn’t work, go back and check that you followed the directions exactly; there should be only one “color” line within the curly braces that follow the “a:link” name. The word “color” should be followed by a colon, a space, a pound sign, the six hexadecimal digits you copied in, and a semicolon. Every time you make a change, remember to save and rebuild.

If you can’t get it to work, or if it does anything weird that you weren’t expecting, just copy the “color” line from one of the other rules in place of the one you changed, so you get back to “color: #8FABBE;”.

Try this with some of the other A rules. Play around with the colorizer some more until you get the hang of it. That’s all for today; tomorrow I’ll talk about how to change the colors of other page elements, like the banner, the background, and so on. If you have any questions, post them as comments here and I’ll answer them for you.

Hope this helps, and happy blogging!

I’m going to start linking to new blogs as they are started up on the WOU server. I’ll wait to mention a blog until it has at least two entries, though.

Here are the new ones so far, in alphabetical order:

• Bill’s Blog
• Joe’s Blog
• The Reluctant Republican
• Tricia Flaherty’s Blog

Tricia raised some good issues in this post in her blog. Personally, I think the content of any blog should be up to its author. If you want to talk about personal stuff, that’s fine. Political opinion is likewise fine. Work-related stuff is also fine. The only things that are not fine are listed in the Acceptable Use of Computing Resources Policy; basically, this means no commercial or criminal activity.

Bill posted a draft version of some guidelines that I think make a lot of sense. Of course, these guidelines aren’t mandatory, nor should every blog here at WOU be considered a “work blog”.

Also, when you have a blog, you should not feel like you have to conform to a certain schedule, unless you purposely set one for yourself. Many blogs are daily, but that doesn’t mean they all have to be. There’s nothing wrong with having a weekly schedule, or just writing an entry whenever you have something to say, without worrying about a schedule.

Just so you know, this blog is mostly going to cover work-related stuff, though I’m not going to limit myself to that. I’ll try to post an entry every day I’m here (which, in case you didn’t know, is generally Monday through Thursday,) but I may skip days occasionally, or post when I’m not here.

You may notice that I’ve put some links on the sidebar of my blog; it takes a bit of HTML knowledge, but not too much. Read the full entry for instructions.

Here’s how to add links or any other text to your sidebar:
First, go to your blog admin page; the easiest way to do that is to log in at https://wou.edu/blogadmin and click on the name of your blog.
Next, look in the middle of the left column of buttons; click the “TEMPLATES” button. This will take you to a list of templates. Click “Main Index” to go to the edit screen for that template.
Don’t make any changes to the top parts of the form unless you are sure you know what you are doing. The important stuff is in the big text box. Before making any changes, I recommend backing it up! Select the entire contents of this box, copy it to the clipboard, and paste it into an empty text document. Save the document some place where you will remember it later. If you ever get this template messed up, you can go back to the file, copy the stuff back out, and replace everything in this text box with the file contents. (If you don’t understand this part of the instructions, you probably shouldn’t be trying to add links to your blog.)
Once you’ve got it backed up, look for the following text, about halfway down:

Below that, paste in the following HTML code:

Of course, you can change the word “Links” to whatever you want, and change the link addresses and text as well! Bill and Joe probably wouldn’t mind if everybody linked to their blogs, but I’m sure you have your own ideas for places to link to. :-}
Make sure to put a blank line below the inserted text, for readability. If you want more than one list of links, just paste in that block of code multiple times. Note that the links may look a bit more spread out in your blog than in mine; that’s because I also messed with my blog’s stylesheet to tighten things up a bit. I’ll talk about some stylesheet tweaks later.
That’s all there is to it! I know some people have requested a way to set up links that does not involve HTML editing; I will see if I can come up with something over the summer.