Sketch to Pixels

Before I built this WordPress site, I had a regular website. I had built it with Dreamweaver, and was quite happy with how it looked. After installing the WordPress software on my server, I tried to find a theme that looked similar to my other website. You can see what it looked like below:

After searching several different WordPress theme sites, I came across a theme called Silhouette, shown below:

Since the colour of this scheme and the rounded corners were consistent with my regular website, I thought it would be a good fit. I downloaded the theme and went to work customizing it.

The first thing I changed was the header image. I found out what the original image was called and where it was located, and created a new image that matched my old site. Next, I wasn’t happy with the white bar that spanned the entire web page, so I modified the background image to have a pale blue bar instead. These were the easy changes. Changing the CSS was a little more tricky.

Next, I wanted to make the title “Sketch to Pixels” smaller, since it wasn’t really needed because of my header graphic, and right aligned. (Bold indicates changed elements)

#main_logo h1 {
padding:0px;
margin:0px;
font-size:18px;
text-align:left;
}

This was changed to:

#main_logo h1 {
padding:0px 10px 0px 0px;
margin:0px;
font-size: 14px;
text-align: right;
}

Next, I wanted to hide the site description, because it interfered with my header graphic. However, I did not want to delete it completely because I wanted the text to be found by search engines, so I changed the text colour to white. You can see the original code below:

#mainpix .desc {
color:#333;
padding:10px 0px 0px 10px;
display:block;
}

This was changed to:

#mainpix .desc {
color: #ffffff;
text-align: center;
padding:10px 0px 0px 10px;
display: block;
}

Using the “View Style Information” option in the Web Developers toolbar was handy in locating the names of the styles used.

Another part I changed was the colour of the tabs. Originally they were blue when you were on the page, and white for the other pages. I changed it so it is white when you are on the page, and blue if you’re not. I felt this was more intuitive (at least for me).

Below is what the original code looked like:

#glowingtabs a span {
float:left;
display:block;
background:url(images/glowtab.gif) no-repeat right top;
padding: 8px 22px 10px 13px;
font-weight:normal;
color:#2a2a2a;
overflow:hidden;
}

#glowingtabs a span {
float:none;
}

#glowingtabs a:hover span {
color:#fff;
}

#glowingtabs .current_page_item a {
background-position:0 -33px;
}

#glowingtabs .current_page_item a span {
background-position:100% -33px;
color:#fff;
}

This was changed to:

#glowingtabs a span{
float:left;
display:block;
background:url(images/glowtab.gif) no-repeat right top;
padding: 8px 22px 10px 13px;
font-weight:normal;
color:#fff;
overflow:hidden;
}

#glowingtabs a span {
float:none;
}

#glowingtabs a:hover span {
color:#2a2a2a;
}

#glowingtabs .current_page_item a {
background-position:0 -33px;
}

#glowingtabs .current_page_item a span {
background-position:100% -33px;
color:#2a2a2a;
}

After completing the above changes and writing a few posts, I noticed that a large title was placed above the article. You can see what I’m describing by looking at the image below.

Since this was mostly unnecessary for my needs, and just looked ugly, I decided to remove it. Actually, to be more accurate, I didn’t remove it from the page, I just removed it from view. See below for comparison to the image above.

The original code is shown below:

h2.pagetitle {
font-size: 24px;
line-height:26px;
}

This was changed to:

h2.pagetitle {
font-size: 24px;
line-height:0px;
margin-bottom: -60px;
margin-left: -2000px;
}

By using a margin of -2000, the title still exists, which is good for search engines to find, but it is removed from view. Also, a margin-bottom of -60 was used to push the lower title up to the top. You can see the results of this by scrolling up. However, this meant that I had no page title on my blog, so I entered some text at the top of my post and manually made it bold.

If you’re familiar with CSS, then you won’t find the changes mentioned above too difficult, however, it took a few hours for me to accomplish all of them. Although WordPress.com gives you the ability to modify the CSS code for a small annual fee, if you want to use a custom template and plugins, then you will have to go with a self hosted WordPress site.

.