Designing your own blog with wordpress.org & CSS, part 3

Alright, time to start the fun part of actually stylizing!  Below is a screen shot of my test blog I’m using, your own blog should currently look similar.  Now let’s get started, starting from the header and working our way down.

Your blog should currently look something like this.

1. To start off we are going to make a simply stylized header. Replace all the #site-title CSS code with the following code:

#site-title {
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    font-family: Courier New, Courier New, monospace;
    margin: 0px;
    padding: 15px;
    background-color: #FFCF48;
    height: 150px;
}

Your header should now look like this:

2. Let’s break down exactly what that code does and how it works, starting with the top four commands, which all have to do with the font:

font-size: 60px; This code controls how big the site title font is.  Originally the code used ems (which is another unit of measure in coding) but I changed it to px (pixles) because I work better with px and I think it’s easier for most people to understand.  You can change the number to make the font bigger or smaller.

font-weight: bold; This is easy to understand – it simply bolds the font.  You can also set it as Normal to set the font to a normal weight.

text-align: center;This tells the font where to appear in the element. I have the font centered but you can also set it to left or right.

font-family: Courier New, Courier New, monospace; This sets the font style.  Notice that there are three fonts being called; this is to ensure that if the first font (my first pick) isn’t installed on the viewer’s computer, then one of the other two can be used instead.  You have to be careful with fonts when making blogs or websites, because while it’s tempting to use a specially downloaded, fancy font, chances are that most of your readers won’t have it.  And then they won’t be able to see your text!  Check out this page with descriptions of the most common font families and try to stick with those. 

3. Now let’s talk about the last four commands:

margin: 0px; This sets the margin as 0, therefor centering the #site-title element directly in the middle of the #page element. If you set the margin as say, 10px you’ll see that the header is pushed out of place.

padding: 15px; This sets the padding.  Padding is NOT the same as margin: the margin sets the space OUTSIDE of the element, while the padding sets the space INSIDE the element.  If the padding is set to 0, the font will be pushed up aginst the side of the header.  Not what we want.

background-color: #FFCF48; This sets the background color of the #site-title element.  Right now I have it using a lovely yellow.  Check out color-hex.com or colourlovers.com  (my favorite page there!) for more color hexes and samples. 

height: 150px; This sets the overall height of the #site-title.  Feel free to play around with it to get the header height you want.

4. Alright, it’s looking good but notice how the font is that typical link color? Let’s change that so it will be more stylized to our blog. Add the following code after the end bracket of #site-title:

#site-title a:link {
    color: #7442C8;
    text-decoration: none;
}

#site-title a:hover {
    color: #1DACD6;
    text-decoration: underline;
}

#site-title a:visited {
    color: #1CAC78;
}

5: Check out your blog, see the changes? Now let’s look at the code we just used:

a:link controls what a link looks like by default and before it’s been visited. The classic style for links in this state is blue with an underline. 

a:hover controls what a link looks like when the cursor is hovered over the link. Typically this is a dark purple.

a:visited controls what a link looks like after it’s been visited.  This is usually purple as well.

Not that you have to write these elements in THIS order, first a:link,. then a:hover and then a:visited.  Otherwise it will not call properly.

6. Now that we know what each element is, let’s look at the commands we’re using with them:

color changes what color the link is by default (in this case to a nice purple). 

text-decoration changes the decoration of the text.  Other options for the text-decoration command include blink, line-through, overline, none and normal.

font-weight can also be added to make the text (in any or all states) bold.

Feel free to mix and match these styles to get your header link looking how you want.  For right now we’re only stylizing the link in the header, later on we’ll stylize the links used on the rest of the blog as well.

7. Our header is looking good! But that plainly colored background isn’t as eye catching as it could be.  So let’s make a header background using a picture to replace it.  This is going to require a few things – a properly-sized header, a new folder in the blog directory to upload images to and a little bit of code. We’ll start with the header.  The image you use will need to be 900px by 180px.  I’m using this image I found on photobucket, which I’ve edited in gimp.

8. Once you have your image, open up the your blog’s root file in your domain server. Create a new directory called images, and then upload the header image to the new directory.  Or you could create a file called images on your computer, put the header image inside and then upload the entire thing to your root.  Either way should work.

9. Now it’s time to add the code that will call the image.  Add the following code to #site-title:

background-image: url(../../../images/your-header-image.jpg);

(Replace ‘your-header-image.jpg’ with the name of your image!)

Update your blog.  You should now see the image were there was once only a flat color.  If not, then you might have made your image directory in a different place than where mine is, and the code isn’t calling it.  Make sure you’re in the root folder of the blog and the code I’ve given you should work.  If, however, you want to have the image file somewhere else, you can still call it, just keep in mind some things – the code works by going OUT from where ever the CSS file is to where the image file is.  Each time the path moves OUT of a folder, you use the two periods and a slash.  Every time you move INTO a folder, you use the folder’s name. Keep that in mind and you should be able to direct your code to find the image properly.

What my blog header currently looks like:

10. Congrats! You’ve officially made a nice header.  But what if you want to get rid of the default text and add your own to the image? You can do that on your dashboard by going to settings > general and clearing the site title text field.  No name will appear in your #site-title once the text boxes are cleared, giving you the ability to add the blog’s name directly to the header image.  You may choose to do this if you want a more decorative font or placement that isn’t available with the default settings.

Now that our header is done, next time we’ll be working on stylizing the background, tagline and access element.

Advertisements

Posted on March 5, 2012, in Coding and tagged , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: