How To Style Wordpress 2.5

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