Creating Beautiful Wordpress Sites

Creating Beautiful WordPress Sites Ann Zerega Design

Why would a web designer want to create a WordPress site instead of a XHTML/CSS site? Because WordPress and a good theme makes many design tasks very easy.
Separation of layout and functionality helps avoid time consuming mistakes
Strong cross – browser support
Ability to rapidly prototype a site so your client can interact directly with the latest design
Ability to add functionality on the fly with plugins

How would a web designer create a WordPress site that doesn’t look like (yet another) “Kubrick” theme?
A theme that allows customization (in this case the Thesis theme)
Some understanding of CSS
Medium level skill with Photoshop or another image editing program

Here’s an example of porting a look/feel from an XHTML/CSS site to a WordPress site using the Thesis Theme settings, Thesis Open Hook plugin and some custom CSS.
Cellist Irene Sharp’s website is a full width site with the following elements:
Background images of a cello body on left
Her logo at the top left
Musical staff lines across the top of the page
Vertical navigation menu

First – Use Thesis Openhook to move the navigation from its default position to a vertical position in Sidebar 1
In the “Before Header” section, select the “remove Thesis nav menu” button and save
In the “Before Sidebar 1” section, insert the following code: <?php thesis_nav_menu(); ?>
Click “execute PHP on this hook” and save
Exit Openhook

Second – Open the Thesis Options menu and make sure the following options are selected:
Under “Display Options” select “Show site name in header”
Select which pages you want to appear and their order
Choose whether you want the default “Home” blog page to appear in the nav
Save your changes
1 2 3 4

Third– Open the Thesis Design Options menu and create an overall style for your site from this panel:
Choose a font and site background color
Choose colors for your navigations menu including rollover colors
Choose your site layout (3 column, 2 column, sizes of columns)
Show or hide the multimedia box
Check “use custom style sheet
Save your changes
1 2 3 4 5 6

/* custom page background */
.custom #page{
display: block;
background-color: #ffffff;
background: url('images/cello_image.gif')no-repeat left top;
}
/* custom header with repeating music staff lines */
.custom #header{
background: url('images/staff_lines.png') repeat-x; outline: none;
}
/* clickable header logo*/
.custom #logo a{
display: block;height: 152px;
text-indent:-99999px;
background: url('images/a_logo.png') left no-repeat;
}
/*Menu Tab width with dashed lower border*/
.custom .menu .tab {
width:250px !important;
border-bottom: 1px dashed #000000;
}
Fourth – Implement custom CSS for page and nav menu layout :
Position the background image of the cello body
Have the staff line image repeat across the entire page by “repeating-x”. This will ensure you won’t have header “over hang” in Safari
Make cello player logo clickable and specify height
Move the default blog logo off the screen by indenting it 99999 px
Place cello player logo on left
Specify width of menu tab and add dashed black border on the bottom
Save your changes and upload if necessary
1 2 3 4 5 6

The final layout of Irene Sharp’sWordPress site looks nearly identical to the original but now has search, blogging and plugin capability Original Site WordPress Site

If you’re lucky enough to start fresh, you can also create dramatic WordPress sites using background photos, slide shows and many other web design techniques

Questions?

http://www.wordpressasylum.com	17
http://www.annzeregadesign.com	11
http://www.slideshare.net	8
http://eastbaywp.com	5
http://www.watchknowlearn.org	4
http://www.meetup.com	3
http://mswhite.watchknowlearn.org	3
http://www.watchknow.org	2
http://watchknowlearn.org	2
http://sammayer.watchknowlearn.org	1

Creating Beautiful Wordpress Sites

by East Bay WordPress Meetup on Apr 01, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 56

Statistics

Creating Beautiful Wordpress Sites — Webinar Transcript