It’s soon going to be time to redesign my web site for the “Web 2.0 Age.” I have seriously looked at two platforms, Drupal and Joomla, with which to accomplish this.
Drupal and Joomla offer comprehensive packages that, in the case of Drupal, includes a blog and forum as core modules. Theming these platforms can be accomplished through both CSS (Cascading Style Sheets) and PHP (Personal Home Page or PHP: Hypertext Preprocessor) code modifications. However, these platforms are complex and learning enough to install, manage, and customize these platforms can be a daunting task.
After studying the two platforms, including using them both on my test bed platform and on the Internet, I decided to take a look at WordPress as a possible solution to my future Web needs. I was surprised to discover that the latest version of WordPress is easy to install, easy to use, and easy to theme.
In this article, I will describe how to customize WordPress 2.5.
STYLING WORDPRESS — THE JAKOB DESIGN
The current design for my personal web site, SelectDigitals.com, is based on work and philosophy of Jakob Nielsen , http://www.useit.com/. Nielsen’s work has been dedicated to making usable web sites that deliver content that is easy to find and easy to read.
The design of Nielsen’s site (and my site, by permission) is elegantly simple and has the primary goal of delivering content. WordPress also has the primary goal of delivering content. So, my first WordPress design will endeavor to maintain the look and feel of our sites with the added feature of visitor interactivity. I will refer to this as the Jakob design.
There are six major components that make up the look of the default WordPress blog:
1. Header Graphic,
2. Blog Title,
3. Tagline,
4. Page,
5. Background,and
6. Footer.
In order to make the Jakob blog load quickly, I decided not to use a header or footer graphic; and since the design will essentially be the default WordPress theme with a new coat, only a little graphic design work needs to be done. In fact, I only needed to create one graphic to to generate the blog page with it’s two column effect. The blog page will “float” centered in a dark-blue *body* background that will serve to frame the page.
Creating the Graphic
A look in the image directory for the default WordPress theme shows the default images used for the Kubrick look. For now, there is only one file of particular interest: kubrickbgwide.jpg. For the Jakob design, the other Kubrick images are not needed but will be needed for the “Fancy”, more complex design.
The blog’s page will be created from a “slice” through the center of the new design. The slice is a narrow image the width of the blog page.
I began my design by laying out a basic page (760px X 600px) in Adobe Illustrator. I like using Illustrator for artwork of this kind, although other programs could be used, too.
I filled the basic page with the page’s background color (not to be confused with the dark blue *body* background). The light background color will will “show-off” colored text, such as the blog’s title and tagline.
I overlayed the page with two rectangles, or “columns.” The left-hand, 510px-wide column is filled with a pastel yellow color; the right-hand column, 230px wide, is filled with a pastel blue color. The two columns fit within the basic page with a 10px border of page background around them.
In Illustrator, I then placed a 760px X 40px rectangle on the page and used this to make a slice. A slice is nothing more that a representative piece of a larger image, in this case, of the blog design. I saved the slice as kubrickbgwide.jpg. Kubrickbgwide.jpg will be used to generate the blog-page background. As new content is added to the blog page, copies of the slice will be stacked vertically to “grow” the two-column background. This is the only image needed by a browser to generate the blog’s home page. The Blog will, therefore, load very quickly.
Pretty easy so far, right? The rest of the design is accomplished through the theme’s CSS file and/or through the WordPress administrative interface.
CSS Changes
The default CSS file is in the wp-content_themes_default directory. The CSS text below shows the code changes to style.css. Before making any changes to the default CSS file, I always make and save a copy of the original. The CSS file can be opened and modified with any text editor. Text to be deleted will be shown within square brackets. New or modified text will be shown without brackets.
/* Begin Typography & Colors */
body {
[background: #d5d6d7 url('images/kubrickbgcolor.jpg');]
background: #636f89; /* Set the Body background color to blue */
}
#page {
[background-color: white;]
[border: 1px solid #959596;]
border:none;
}
[#header {
background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
}
#headerimg {
margin: 7px 9px 0;
height: 192px;
width: 740px;
}]
#footer {
[background: #eee url('images/kubrickfooter.jpg') no-repeat top;]
background: #fffef2; /* Very light yellow */
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [.description] {
text-decoration: none;
[color: white;]
color:red; /* Make the title red */
padding-bottom: .5em; /* Put a little space between the title and tagline */
}
.description {
text-decoration: none;
color: blue; /* Make the tagline blue */
text-align: center;
}
/* End Typography & Colors */
/* Begin Structure */
#page {
[background-color: white;]
background-color: fffef2; /* Very light yellow */
[border: 1px solid #959596;]
border: none;
}
#header {
[background-color: #73a0c5;]
background-color: #fffef2; /* Very light yellow */
}
/* End Structure */
After making and saving these changes to the style.css file, the newly designed blog page is accomplished.
STYLING WORDPRESS — THE FANCY DRESS DESIGN
Although I like the simplicity of the Jakob blog design, it will not appeal to everyone. Lots of people just love “glitz.” The price of a fancy WordPress dress is often a slower loading blog with no increase in usability. However, for those who want to “dress up” the appearance of their blog, here are additional ways this can be accomplished.
First of all, it should be noted that the background of the default WordPress page uses header (kubrickheader.jpg) and footer (kubrickfooter.jpg) graphics. These graphics are not filled with a solid color, as in the Jakob design, but with gradients. There also appears to be a very small drop shadow under the page.
Because of the complexity of the default page, additional graphics are required and, thus, more slices will be needed. Additionally, when a more complex body background is desired in which to “float” the page, a “seed” image for this might also be required (this is what the kubrickbgcolor.jpg image is for).
As before, I created a drawing of the blog page in Illustrator. The page, with rounded corners, floats on the default WordPress background, has a yellow gradient, and has a small drop shadow.
I first created a 760px X 600px rectangle on the Illustrator artboard. I filled this rectangle with the background color (C:8, M:6, Y:6, K:0).
Next, using the Rounded Rectangle Tool, I drew a 736px X 584px rectangle and filled it with the yellow gradient. Essentially, I made the page as large as possible within the background while leaving enough room for the drop shadow.
Finally, I gave the rounded rectangle a small drop shadow.
In order to insure that the slices will merge perfectly into the *body* background, I created a 60px X 60px square of the same background color (C:8, M:6, Y:6, K:0) and saved it as kubrickbgcolor.jpg. The small image will be used to “paint” the body background. This is an important step as the background used for the body and the background used for the page must match perfectly for the Fancy design.
Creating the Slices
Using the Rectangle Tool, I placed a 760px X 200px rectangle on top of the layout described above. I positioned this rectangle at the top of the layout and used it to make a slice for the header graphic. Before doing this, I disabled stroke and fill.
I saved the slice as kubrickheader.jpg.
I created the footer and page slices in a similar fashion and renamed them as kubrickfooter.jpg and kubrickbgwide.jpg, respectively. Kubrickfooter.jpg is 760px X 63px and kubrickbgwide is 760px X 40px.
There are two other Kubrick images in the images directory: kubrickbg-ltr.jpg and kubrickbg-rtl.jpg (left to right, and right to left). These images are the same as kubrickbgwide.jpg. So, I made two copies of kubrickbgwide.jpg and renamed them accordingly.
CSS Changes
The default CSS file is in the wp-content_themes_default directory. The CSS text below shows the code changes to style.css. Square brackets show which code to delete and new code is shown without brackets. Before making the change, I copied and saved the original file. For the Fancy design, the CSS changes are minimal.
/* Begin Typography & Colors */
body {
[background: #d5d6d7 url('images/kubrickbgcolor.jpg');]
background: #e7e7e7 url(‘images/kubrickbgcolor.jpg’);
}
#page {
[background-color: white;]
[border: 1px solid #959596;]
}
#header {
[background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;]
background: #e7e7e7 url(‘images/kubrickheader.jpg’) no-repeat bottom center;
}
#footer {
[background: #eee url('images/kubrickfooter.jpg') no-repeat top;]
background: #e7e7e7 url(‘images/kubrickfooter.jpg’) no-repeat top;
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [description]{
[color: white;]
color:red; /* Make the blog title red */
padding-bottom: .5em; /* Put a little space between the title and tagline */
}
.description {
text-decoration: none;
color: blue; /* Make the blog tagline blue */
text-align: center;
}
/* End Typography & Colors */
/* Begin Structure */
#page {
[background-color: white;]
background-color: #e7e7e7;
[border: 1px solid #959596;]
border: none; }
#header {
[background-color: #73a0c5;]
background-color: #e7e7e7;
}
/* End Structure */
After the design and CSS work, the WordPress shows it’s new clothes to the whole Internet.
STYLING WORDPRESS — THE NO-GRAPHIC DESIGN
Nothing every goes wrong when a browser loads a page from the Internet, right? Even if this were, in fact, the case, it is still wise to consider how a page will display in case the graphics can’t be found.
In the case of the Jakob design, if kubrickbgwide.jpg did not get downloaded, for any reason, the page would not display acceptably. Because of the light background used for the header and footer, they display normally on the dark-blue background assigned to the body. However, the page content becomes difficult to read: it almost gets lost in the dark-blue background. A lighter background for the body might have been a much wiser choice.
The creator of the Kubrick design solved this problem by assigning alternate background colors to be used if the graphics were not available. The assignments are made within the style.css file:
body { background: #d5d6d7 url(‘images/kubrickbgcolor.jpg’); }
#header { background: #73a0c5 url(‘images/kubrickheader.jpg’) no-repeat bottom center; }
#footer { background: #eee url(‘images/kubrickfooter.jpg’) no-repeat top; }
If the images are not available, the alternate RGB color value will be used.
If the graphics are not available, the default WordPress blog is still presentable and usable. For an initial page redesign, starting with the basic Kubrick design, without graphics, might be a good place to begin. This can be accomplished by simplifying the statements above:
body { background: #d5d6d7; }
#header { background: #73a0c5; }
#footer { background: #eee; }
The colors can then be changed to try out various blog color schemes. Just change the RGB color codes, save the CSS file, and refresh the browser to see the changes immediately.
Yours for a more successful blog,
Royce Tivel
For an extended version of this article, complete with numerious images showing, step-by-step, the procedures described in the article, please visit http://www.selectdigitals.com.
