span discover that the latest version class="cap">I t's of WordPress is easy to install, soon going to be time to easy to use, and easy to redesign my web site for the "Web theme.
2.0 Age." I have seriously looked
In this article, I will at two platforms, Drupal and describe how to customize Joomla, with which to accomplish WordPress 2.5.
this.
STYLING WORDPRESS -- THE JAKOB Drupal and Joomla offer DESIGN
comprehensive packages that, in
The current design for my the case of Drupal, includes a personal web site, blog and forum as core modules. SelectDigitals.com, is based on Theming these platforms can be work and philosophy of Jakob accomplished through both CSS Nielsen , http://www.useit.com/. (Cascading Style Sheets) and PHP Nielsen's work has been dedicated (Personal Home Page or PHP: to making usable web sites that Hypertext Preprocessor) code deliver content that is easy to modifications. However, these find and easy to read.
platforms are complex and
The design of Nielsen's site learning enough to install, (and my site, by permission) is manage, and customize these elegantly simple and has the platforms can be a daunting primary goal of delivering task.
content. WordPress also has the
After studying the two primary goal of delivering platforms, including using them content. So, my first WordPress both on my test bed platform and design will endeavor to maintain on the Internet, I decided to the look and feel of our sites take a look at WordPress as a with the added feature of visitor possible solution to my future interactivity. I will refer to Web needs. I was surprised to this as the Jakob design.
There are six major components the Jakob design, the other that make up the look of the Kubrick images are not needed but default WordPress blog:
will be needed for the "Fancy",
1. Header Graphic,
more complex design.
2. Blog Title,
The blog's page will be
3. Tagline,
created from a "slice" through
4. Page,
the center of the new design. The
5. Background,and
slice is a narrow image the width
6. Footer.
of the blog page.
In order to make the Jakob
I began my design by laying blog load quickly, I decided not out a basic page (760px X 600px) to use a header or footer in Adobe Illustrator. I like graphic; and since the design using Illustrator for artwork of will essentially be the default this kind, although other WordPress theme with a new coat, programs could be used, too.
only a little graphic design work
I filled the basic page with needs to be done. In fact, I only the page's background color (not needed to create one graphic to to be confused with the dark blue to generate the blog page with *body* background). The light it's two column effect. The blog background color will will page will "float" centered in a "show-off" colored text, such as dark-blue *body* background that the blog's title and tagline.
will serve to frame the page.
I overlayed the page with two
Creating the Graphic
rectangles, or "columns." The
A look in the image directory left-hand, 510px-wide column is for the default WordPress theme filled with a pastel yellow shows the default images used for color; the right-hand column, the Kubrick look. For now, there 230px wide, is filled with a is only one file of particular pastel blue color. The two interest: kubrickbgwide.jpg. For columns fit within the basic page
with a 10px border of page directory. The CSS text below background around them. shows the code changes to
In Illustrator, I then placed style.css. Before making any a 760px X 40px rectangle on the changes to the default CSS file, page and used this to make a I always make and save a copy of slice. A slice is nothing more the original. The CSS file can be that a representative piece of a opened and modified with any text larger image, in this case, of editor. Text to be deleted will the blog design. I saved the be shown within square brackets. slice as kubrickbgwide.jpg. New or modified text will be Kubrickbgwide.jpg will be used to shown without brackets.
generate the blog-page
/* Begin Typography & Colors background. As new content is */
added to the blog page, copies of
body {
the slice will be stacked
[background: #d5d6d7 vertically to "grow" the url('images/kubrickbgcolor.jpg'); two-column background. This is ]
the only image needed by a
background: #636f89; /* Set browser to generate the blog's the Body background color to blue home page. The Blog will, */
therefore, load very quickly.
}
Pretty easy so far, right? The
#page {
rest of the design is
[background-color: white;]
accomplished through the theme's
[border: 1px solid CSS file and/or through the #959596;]
padding-bottom: .5em; /* Put a the newly designed blog page is little space between the title accomplished.
and tagline */
STYLING WORDPRESS -- THE FANCY
}
DRESS DESIGN
.description {
Although I like the simplicity
text-decoration: none;
of the Jakob blog design, it will
color: blue; /* Make the not appeal to everyone. Lots of tagline blue */
people just love "glitz." The
text-align: center;
price of a fancy WordPress dress
is often a slower loading blog of the blog page in Illustrator. with no increase in usability. The page, with rounded corners, However, for those who want to floats on the default WordPress "dress up" the appearance of background, has a yellow their blog, here are additional gradient, and has a small drop ways this can be shadow. accomplished.
I first created a 760px X
First of all, it should be 600px rectangle on the noted that the background of the Illustrator artboard. I filled default WordPress page uses this rectangle with the header (kubrickheader.jpg) and background color (C:8, M:6, Y:6, footer (kubrickfooter.jpg) K:0).
graphics. These graphics are not
Next, using the Rounded filled with a solid color, as in Rectangle Tool, I drew a 736px X the Jakob design, but with 584px rectangle and filled it gradients. There also appears to with the yellow gradient. be a very small drop shadow under Essentially, I made the page as the page.
large as possible within the
Because of the complexity of background while leaving enough the default page, additional room for the drop shadow.
graphics are required and, thus,
Finally, I gave the rounded more slices will be needed. rectangle a small drop Additionally, when a more complex shadow.
body background is desired in
In order to insure that the which to "float" the page, a slices will merge perfectly into "seed" image for this might also the *body* background, I created be required (this is what the a 60px X 60px square of the same kubrickbgcolor.jpg image is background color (C:8, M:6, Y:6, for).
K:0) and saved it as
As before, I created a drawing kubrickbgcolor.jpg. The small
image will be used to "paint" the and right to left). These images body background. This is an are the same as important step as the background kubrickbgwide.jpg. So, I made two used for the body and the copies of kubrickbgwide.jpg and background used for the page must renamed them accordingly. match perfectly for the Fancy
CSS Changes
design.
The default CSS file is in the
Creating the Slices
wp-content_themes_default
Using the Rectangle Tool, I directory. The CSS text below placed a 760px X 200px rectangle shows the code changes to on top of the layout described style.css. Square brackets show above. I positioned this which code to delete and new code rectangle at the top of the is shown without brackets. Before layout and used it to make a making the change, I copied and slice for the header graphic. saved the original file. For the Before doing this, I disabled Fancy design, the CSS changes are stroke and fill.
minimal.
I saved the slice as
/* Begin Typography & Colors kubrickheader.jpg.
*/
I created the footer and page
body {
slices in a similar fashion and
[background: #d5d6d7 renamed them as kubrickfooter.jpg url('images/kubrickbgcolor.jpg'); and kubrickbgwide.jpg, ]
respectively. Kubrickfooter.jpg
background: #e7e7e7 is 760px X 63px and kubrickbgwide url('images/kubrickbgcolor.jpg'); is 760px X 40px.
There are two other Kubrick
}
images in the images directory:
#page {
kubrickbg-ltr.jpg and
[background-color: white;]
kubrickbg-rtl.jpg (left to right,
[border: 1px solid
#959596;]
color: blue; /* Make the blog
}
tagline blue */
#header {
text-align: center;
[background: #73a0c5
}
url('images/kubrickheader.jpg')
/* End Typography & Colors no-repeat bottom center;]
If the images are not not get downloaded, for any available, the alternate RGB reason, the page would not color value will be used.
display acceptably. Because of
If the graphics are not the light background used for the available, the default WordPress header and footer, they display blog is still presentable and normally on the dark-blue usable. For an initial page background assigned to the body. redesign, starting with the basic However, the page content becomes Kubrick design, without graphics, difficult to read: it almost gets might be a good place to begin. lost in the dark-blue background. This can be accomplished by A lighter background for the body simplifying the statements might have been a much wiser above:
You recently revamped your firm’s website or are planning an online marketing campaign, but are not really sure what you’ll gain in return Website analytics is a science whose aim is to answer such questions
In this piece, we’ll take a look at the benefits of web analytics and ways to optimize its tools...
Search engine optimization help is no doubt becoming the most coveted option for the business entities that want to publicize their organization through the Internet It rewards the entrepreneurs with an immense number of clients or customers, increases the Internet traffic, and promises incremented sales as well SEO follows a proper protocol defining a set of methods that are crucial for the listings of search engines...
Are you on MySpace That must be the most popular question asked who roam the streets of America today Maybe you have asked, well, dive into convoy if you have because you can now say yes...
MySpace layouts If you want to create a little piece of your own on the Web, then perhaps you might consider MySpace This website has literally exploded one of the best websites on the Internet in general You will join fifty million users of all ages and interests, and we hope to win as many of them as you can to your new online friends...
Copyright (c) 2008 Isnare.com. All rights reserved.
Got a question about this article? 
