Blog Archives

Designing your own blog with & 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 or  (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.

Tools all website designers need – for free!

If you’re interested in website design, you’re in luck.  Nowadays coding and website building is so common you can find resources all over the place, and hundreds of useful and free software to make your HTML building a breeze.  I’ve put together a list of tools, software and resources all website designers should know and have.  And they’re all free!  I’ve ordered the list with essentials at the top and items for more advance users at the bottom, so if you’re a beginner start at the top and work your way down the list.  I’ve also included some alternative (not free) resources if you have some cash to burn.

1. one of the ultimate free learning resources of the coding world, W3Schools has tutorials on HTML, CSS, JavaScript, PHP, SQL and more.  Basically anything you want to know about coding, you can learn it here!  They also give you the code for each lesson and let you edit yourself right on the website so you can get a feel for what it does.  If you’re a beginner looking to learn HTML and the basics of coding, start here.

Alternative: if books are more your style, check out “Build Your Own Website The Right Way Using HTML & CSS ” by Ian Lloyd.  This is the book I first used when learning to code and I have nothing but praises for it, he sets everything out very simply and clearly – you can literally learn in just days. For under $20 that ain’t bad!

2. Notepad++: a nifty little free program for code editing, Notepad++ has a wide variety of features that will help your coding.  The most useful feature is the code highlighting – to activate it, open up Notepad++ once you’ve installed it and select language > H > HTML.  You’ll find your text is color coded and that makes it way easier to work with.  Unfortunately Notepad++ only works on Windows, if you have a Mac try out TextWrangler, which is supposed to work similarly (I haven’t tried it myself as I don’t have a Mac).

Alternative: if you’ve got a few extra hundred dollars lying around, think about getting Dreamweaver.  It’s my default coding program and has some really nice features, is available for both windows and mac, and if you’re a student or teacher you can get a nice discount for the program.  Everyone else, however, has to pay a bundle for it :( I personally don’t think you need to get the latest version for it to work well; my own copy is from back when walkmen were still cool, lol (okay so it’s from 2005, I still had a walkman back then!). So if you can find an older, working copy on eBay for cheap buy it!  And save that $400 for more important things.  Like food. 

3. Gimp: I’m sure you probably already know about this free little gem but I’m adding it anyway.  Gimp can do pretty much everything that other art programs can do without the huge price tag.  Unless you want your website to be dull text and borders, you need a good art and image editing program, and Gimp fits the bill.  I use it to create everything from header images to backgrounds to touching up photos, as well as a bunch of other art projects.  The web is also abound with  free tutorials to do everything with Gimp from touching up photos to making GIFs and siggies.

Alternative: you can also check out Macromedia Fireworks, and depending on the version you get you’ll pay anywhere from $50 to $300.  I do have a copy of Fireworks (like my Dreamweaver it is oooold) and I use it for about a third of my web graphic needs, simply because I sometimes find the interface easier to use than Gimp.  However I don’t think it’s really necessary for making a good website.  Fireworks can also do a bunch of really fancy web graphic stuff like roll-over menus or something (just what I’ve heard, I only use the basic functions of mine) but you can do cool menus using CSS as well. 

4. Once you have an art program you’ll need something to use with it.  Photobucket is an online picture/art/image sharing site and where I go for all my images.  All pictures can be used royalty free for whatever you may want, so it’s a great place to find graphics and pictures to brighten up your site!

5. while we’re still on the subject of graphics, let’s talk about font.  Nothing says “Newbie!” on a website like a nicely done header in an overly done, default font.  It just looks amateurish.  AbstractFonts has hundreds of cool fonts and they’re free! You need to pay attention to the copyright license for each font though – some fonts are free to use even for commercial uses, but others can only be used for personal, non-commercial use.  And remember that unless someone has the font installed already on their computer that they won’t be able to see it, so don’t go making your entire website out of a font you downloaded – use these fonts only for graphics and images.

6. XAMPP:  praise the coding gods for this one, as it will make your life so much easier.  Once you’ve mastered HTML and CSS and want to move on to using something more advanced like PHP (a must for larger, more complex sites) you’ll need to have a personal testing host installed on your computer, and that’s where XAMPP comes in.  XAMPP is actually a bundle of programs including the Apache webserver (it’s how you use your own computer as a host to test out your files on) and MySQL, PHP and Perl.  They’re all bundled and configured together and will save you HOURS of time and plenty of tears.

7. Filezilla:  my default file-transfer program, Filezilla is clean-cut and easy to use. This is what you need this to upload your finished website files to your online host.  You’ll want to download the client version (you won’t need the server just for uploading your files to your host). you probably know this one already, but this is the place to go if you want to add a blog to your site.  Just download the blog files, upload to your domain and you’re good to go!  It’s just like having a blog on your own site, but with WAY more options.

There you go! With these tools and resources you can make a fantastic website without spending a dime ;)

Designing your own blog with & CSS, part 2

Now that you’re all set up, it’s time to get down to the actual editing!

1: open up the CSS Style sheet of Toolbox by going to appearances > editor.  The file in the editing window should automatically be the stylesheet; if it isn’t just select stylesheet (style.css) from the list to the right.

2: Take a moment to look over the code.  It’s okay if you don’t know what everything is, we’ll do a nifty little trick to help figure out what everything is.  We’re going to add a black border around all the block elements to help figure out where they are.

3: Copy the following code:

 border: 1px solid black;

Now add the code to the following elements: #page, #content, #main-widget-area, #colophon, #site-title, #site-description and #access.

Make sure you add the new code under the CSS already excisting for each element but INSIDE the curly brackets for that element, so it looks like:

#page {
    display: block;
    margin: 1em;
    border: 1px solid black;

(our new code is in bold for you to see what to add)

If you accidentally put the code outside a curly bracket or delete a curly bracket by mistake, it will cause all sorts of problems, so keep an eye on them!

4: Click ‘update’ and then check out your blog.  You’ll see that all the elements now have black borders around them – handy, isn’t it? You can now tell where everything is!  Now we’ll add a little code to center the content into the middle of the browser window.

5: Edit the #page element and add the following code:

#page {
     display: block;
     border: 1px solid black;
     width: 900px;
     margin: 0px auto;

Note that the previous margin declaration has been removed for the new one. Select ‘update’ to save the changes then check your blog to see the new positioning.

6: It’s looking good but notice how the font is all pressed against the sides of the boxes? We need to add some padding to the elements.  For that, we’ll be using this code:

padding: 15px;

Add the above code to #content, #main-widget-area, #colophon, #site-title, #site-description and #access.

Update the page and see how the blog looks now.

7: You’ll notice that the font looks much better, but now the main widget area is now floating underneath the content – whoops, we don’t want that.  So what happened? The padding added more pixels to each element, therefore making them larger than the 900px page width, and to compensate the widget area was pushed down.  Let’s fix that by shrinking the main widget area’s padding from 15px to 8px:

#main .widget-area {
     float: right;
     overflow: hidden;
     width: 220px;
     border: 1px solid black;
     padding: 8px;

Check your blog again and you’ll see the widget area is back where it’s supposed to be.

8: Notice that the assess element (it’s the bar above the content and main widget area that has the ‘home’ and ‘page’ links currently) is too wide for the rest of the page box.  Once again, our extra padding is the culprit.  Change the code to the following:

#access {
     background: #eee;
     display: block;
     float: left;
     margin: 0 auto 1em;
     width: 870px;
     border: 1px solid black;
     padding: 15px;

9: Now that we have our elements nicely spaced and arranged, let’s work on editing the body of the page.  The body is the area behind our page, the space that takes up either side of the elements.  However, there is no code in the CSS file to manipulate the body so we’ll have to add it ourselves.  Go to the top of the file (right above the code for the #page element) and add the following code:

body {      background-color: #999999; }

10: Check your blog and you’ll see that everything is gray now – whoops, we want our elements to have a white background, at least for now.  Take the following code and add it to #page:

background-color: #FFFFFF;

The background of your blog should now be white.

In the next part we’ll talk about more design, add a header and begin to stylize our blog!

Designing your own blog with & CSS, part 1

I decided I really would write up a guide to customizing your own blog, lol.  I’m going to write this guide geared toward someone who has never done CSS before.  I’ll explain how to set up a blog, install the CSS editor theme Toolbox, and start customizing it by editing the CSS file.

What you’ll need to do is download the blog files,  add a database for the blog to your domain host’s mysql databases, add user who can use the database, edit the config.php file in the blog folder with your database and user info, then upload the files into the appropriate folder in your domain.  Sounds complicated, but it’s pretty easy and I’ll walk you through it.


1. Alright, to start off, you need to head over to and download the blog files. I usually just download the zip to my desktop for easy access.  Extract the files.

*Note that is different than – will host your blog on their website, while gives you the files to upload onto your own hosted domain site.   Hosting your own site has several advantages, namely that you have absolute control over how your blog looks, access to hundreds of plug-ins, and the professionalism of having your own site with out tacked on the end of the URL.

2. Read’s installation guide.  Installing it is really fantastically easy and the guide will tell you much of what I’m going to tell you.  You probably can do this with only the guide, but just in case I’ll tell you how I do it.

3. Now that you’ve downloaded and extracted the blog files, go to your hosting website and log into your dashboard (the area where you can manage your sites and all their info, databases, files, ect).  I use Hostgator personally (no real reason except it was the one my sister was using when I got into coding).   There should be a link/button somewhere around your dashboard that lets you create mysql databases.  This should take you to a page where you can create a new database and/or user.  In Hostgator this is very simple to do – you’ll find the database creator at the top of the page. Simply enter the name of the database you want to add (like, ‘blog’) and then click create.  Congratulations, you have a new database!

4. Now you need to make a user to use that database with your blog.  This is also quite simple, in Hostgator you’ll find the user creator form underneath the database creator, on the same page.  Just scroll down a bit.  Add the name of the new user (like ‘john’ and then enter a password for that user and click create.

*Note that your username for your domain will be added before the database name and user’s name automatically – at least it does in Hostgator, so read up on what your own host does. So if you’re using Hostgator and your username for logging into your domain dashboard is ‘happycoder’ then and you make a database called ‘blog’, it will automatically be named ‘happycoder_blog’.  Same thing with adding a user – add a user called ‘john’ and it will turn into ‘happycoder_john’.  This is important to remember when you’re filling out the wp-config.php file of the blog!

5.  Open up the blog folder you downloaded and find wp-config-sample.php and rename it to simply wp-config.php.  Open it up in your text editor and near the top you’ll find the following bit of code:

// ** MySQL settings - You can get this info from your web host ** // 

/** The name of the database for WordPress */
define('DB_NAME', ' '); 
/** MySQL database username */
define('DB_USER', ' '); 
/** MySQL database password */
define('DB_PASSWORD', ' ');

6.  In the DB_NAME brackets, enter the name of your database.  In the DB_USER brackets enter the name of your user, and finally in the DB_PASSWORD brackets enter the password you use to log into your dashboard.  So, using our example:

// ** MySQL settings - You can get this info from your web host ** // 

/** The name of the database for WordPress */
define('DB_NAME', 'happycoder_blog'); 
 /** MySQL database username */
define('DB_USER', 'happycoder_john'); 
 /** MySQL database password */
define('DB_PASSWORD', 'happycoderspassword');

7. Now that you have the wp-config.php file edited to your database and user, decide if you want your blog to appear as the home page of your site, or in in a separate area. 

-If you the blog to be the home page of your site and the main focus, you will upload the files from the blog folder directly into the root folder for your domain.  The blog will automatically show up as your home page when someone types your URL into an address bar (this is assuming that there are no other files already in your domain root, if there are you would need to remove any preexisting index.php as it will clash with the index.php of the blog). 

-If you want to use a static HTML page for your home page, (i.e, making a site that has articles and a home page, with a blog not the main focus) then you should rename the folder containing the wordpress blog files to ‘blog’, as you’ll upload the entire file into your root to keep the blog in it’s own separate area.

8. Open up whatever FTP program you use and connect to your domain.  Navigate to the root file of your domain and upload either the files from the wordpress folder (if the blog is going to be your home page) or the entire blog folder (if the blog will be in a different area of the site).

9: Open up a internet browser and type in the domain name of your site, adding wp-admin/install.php to the end of the domain and hit enter (if you uploaded the entire blog file, use blog/wp-admin/install.php).  You should find yourself being taken to installing options where you can fill out your username and password.  Once that’s done, you’ll be taken to the dashboard of your new blog, all set up and ready to customize!

*Note that if you get an error and are unable to get to the installation, check to make sure that everything has been uploaded properly and in the right place.  If it’s still not working make sure you have the right address typed into the bar, and if it STILL isn’t working, you may need to check with your host to see if they support wordpress.

10: From the dashboard, go to appearance > themes.  Select the ‘Install Themes’ tab and type ‘toolbox’ into the search bar.  When it pops up, click install and it will automatically be installed.  Now go back to ‘Manage Themes’ and you’ll see Toolbox is now added to your list of installed themes.  Select activate to make it your blog’s current theme.

Now you have successfully installed a wordpress blog on your domain and installed the theme we’ll be working with.  Next time we’ll get started actually editing the CSS!


So I changed the background, same design but on white instead of black, I think it looks better and more feminine this way.  However now the Leia chibi looks pretty bad (worse than before) and I need to draw a new one.  Not on the back of an index card with a red pen this time, lol.  I need to actually get out my good drawing supplies.  I may possibly even color it!  But seeing as my tablet skills are pretty lame I may just go with my quick-and-easy gimp touch up instead.  All said and done, there isn’t much more I can do to customize the blog.

Why doesn’t let you use the CSS files without paying? T_T

But thankfully you can edit all you want if you download the blog files from (of course then you have to host them yourself but hey, nothing is apparently free).   And what’s more is there is this wonderfully easy to edit theme called Toolbox that is a CSS designer’s dream!  I’ve been working with that for my portfolio site blog and it’s great.  Of course working with someone else’s CSS file is always a bit challenging for my OCD, but once I’ve reorganized it properly it’s not so bad :)  I may make up a guide to customizing the Toolbox theme in a little bit.   My PHP skills are just good enough that I can possibly start doing custom widgets, but for the moment I’m happy to just stick to messing with the CSS.

%d bloggers like this: