The Websites:

Verizon Wireless

Sprint.com

Blackberry.com

Palm Pre

Sony Ericsson Xperia X10

Nexus One

WireFly.com

Of course -The iPhone

HTC

T-Mobile

The Free PSD:

Below is a preview of the Photoshop mock up free for download. It was inspired by the list above.

Here is the download link. Feel free to check out my downloads page for other free stuff you can use in your design projects. Follow me in Twitter or leave a comment below – That’s all I ask.

As we all may know – Web 101 includes a plethora of venues for better performing sites: SEO being one of them. Speed is another. As a matter of fact – speed may one day affect your page rankings in search engines. Now before we scour our HTML for bloated code, check out these quick and easy tips on how to make your web pages faster:

Smush.It

Smush.It is Yahoo’s proprietary image compression tool. If you haven’t yet noticed, web sites nowadays are getting fancier. Plenty of images – large backgrounds, slideshows, thumbnails – they’re all accomplished by embedding images into the pages. The problem is – images are huge in kilobytes. Smush.It takes care of that by compressing your images, hence “Smush” – but without loss of quality.

Simply go to Smush.it and upload your images. No code to download, no plugin to install – Yahoo has provided this service for anyone to use online.

For Wordpress Users:

A beautiful plugin known as WP Smush.it developed by the folks from Dialect.ca. The plugin automatically compresses images uploaded to your posts behind the scenes – using the Smush.it API. What’s great about this plugin is – you can go back to your image library and Smush your older images – how neat is that!

Use Lazy Load

You ever notice those mega websites with tons of images in an article – but each image only load when you scroll to that part? This effect is achieved through Javascript (jQuery) and a little plugin called Lazy Load. Lazy Load is developed by Mika Tuupola with the main purpose of delaying the loading of images below the viewable screen area. Thus making pages load faster – especially helpful for long pages with plenty of images.

Installing Lazy Load is very easy. There are two scripts you need included in your page – the jquery.js file and the plugin script itself (which can be downloaded from this link)

1
2

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

You can assign all images to automatically load lazy:

$("img").lazyload();

Or only specify specific images:

$("#main-container img").lazyload();

CSS Sprites

No, not another flavor of that clear soda pop – CSS Sprites is the process of using a single image for a web component such as navigation or rollover buttons. The idea is one image source greatly reduces the amount of HTTP requests compared to using multiple images; thus, decreasing page load times. Web designers may have started using sprites for buttons, but I’ve seen many websites using it on any static image such as maps, rating scales and logos. My main navigation bar is using CSS Sprites:

While many think CSS Sprites are daunting to make – it certainly becomes much easier once you get the hang of it. Check out my tutorial on How to make a Subscribe Bar using CSS sprites.

Combine those Stylesheets

As mentioned previously – Reducing the number of HTTP requests is key to a speedier page. Different calls for external stylesheets is no different. Having just a single external stylesheet will definitely improve your page performance. This may not apply to smaller single page portfolios, but if you run a blog or a CMS with countless dynamic pages – having multiple stylesheets is very common. Combine those styles into one giant stylesheet. Better yet – include an @imports statement inside your main css file:

Update! – It turns out that using @imports may have a negative impact on the overall performance of your websites. Thanks to Max Zero – who led me to this article which outlines performance lags including IE issues by using @imports.

1
2
3
4

@import url('/css/another.css') screen; 
@import url('/css/another1.css') screen; 
@import url('/css/another2.css') screen; 
@import url('/css/print.css') print;

Import statements include other stylesheets into your main css. So you can still use multiple sheets – but in your HTML – you just call the main file:

<link rel="stylesheet" type="text/css" href="/css/styles.css" />

For Wordpress Users:

Many of you may not know that most plugins come with their own css file. The more plugins you have – the more HTTP request for those stylesheets get appended in your HTML – slowing your pages down multi-fold. Read this article by WPRecipes on how to deregister plugin css files. Once you have the css deregistered, simply copy those stylesheets it into your main styles.css file. This eliminates the need for those additional stylesheets.

Use Speed Testers

The final tip for web swiftness –use online speed testers. These are special websites that determine your page load times. Of course this alone won’t make your website fast – you have to go through the analysis and recommendations on HOW to speed up your website. What’s good about these websites are not only that they’re designed specifically for this purpose – but also, they’re free! So take advantage of speed testers and see their suggestions on how to fix and fine tune your site. I think of them as pit stops for web pages – sound corny? I think so too.

Personally, I use a firefox add-on known as YSlow. YSlow analyzes your pages based on the strict Yahoo rules for high website performance.

Other online web page speed testing services include: http://tools.pingdom.com/ and http://www.websiteoptimization.com/services/analyze/.

Conclusion:

Now apply these techniques to you web pages and I guarantee a significant increase in performance. What about you? Do you have tips on how to make web pages faster? Feel free to leave a comment below:

Before I delve into the details of FlowPlayer, view the demo below: (Notice the absence of the “YouTube” logo)

Would you like to replay the video or share the link to it with your friends?

What is FlowPlayer?

FlowPlayer is an open source video player for the web. It is a way for you to stream videos in your pages, from your own server. Thus, eliminating the need for external video serving services such as YouTube. FlowPlayer is highly extensible and customizable. Though it may take a little more than a few clicks – the benefits far outweigh the work needed to get it running. Consider these pros and cons:

Pros:

Cons:

How to use FlowPlayer

What I really liked about FlowPlayer is their extensive documentation. It includes walkthroughs for beginners, as well as in depth instructions for the expert programmers. To start using FlowPlayer – all you need is to do the following:

1) Download the FlowPlayer Files – This download includes the actual FlowPlayer .swf files as well as the .js file to get you started. It also includes an HTML page that demonstrate the basic installation of FlowPlayer.

2) Include the flowplayer.js in your HTML:

<script src="path/to/the/flowplayer-3.1.4.min.js"></script>

3) Setup the player container – Simply add an anchor tag with 3 important attributes: a) href – the pointer to the video file, b) style: determines the size and basic display properties of the player and c) id: very important – this acts as a selector for the javascript to target to load the player.

1
2
3
4
5

<a  
    href="http://www.mywebsite.com/myVideo.flv"  
    style="display:block;width:425px;height:300px;"  
    id="player"> 
</a>

4) Install Flowplayer – The final code tells FlowPlayer to install in our anchor tag:

<script language="JavaScript"> 
flowplayer("player", "path/to/the/flowplayer-3.1.5.swf"); 
</script>

FlowPlayer and Wordpress:

Oh yes – you can actually embed Flowplayer inside your posts. The beauty of it is – there are actually several Flowplayer plugins already available for Wordpress. Though I’m just going to cover the two most popular:

FV Wordpress Flowplayer - developed by Foliovision, is a straight forward FlowPlayer plugin made exceptionally easy. All you need is to install, upload your video and add the plugin shortcode to your posts. Note that this is the plugin I’m using for my video demo above. The screenshot below shows the plugin options page:

Flowplayer for Wordpress – created by David Busby of Saiweb, this plugin also includes player customization features as well as commercial license key input for advanced settings:

Embed FlowPlayer in your Theme:

If you’re like me, you may come across a website project that requires videos hosted in their own server. Of course Wordpress and FlowPlayer is a good combination. What about if the requirements for the player are so extensive that may not be achieved with any sort of plugin? This is when you’d want to embed FlowPlayer in your theme.

The process is pretty much the same as the basic FlowPlayer installation. The only difference is we’re using custom fields for the href attribute of our player. In your theme folder, edit single.php and include this code inside the loop:

1
2
3
4
5
6

<?php if (get_post_meta($post->ID, 'movie', true)){?>
<a href="<?php echo get_post_meta($post->ID, 'movie', $single = true); ?>"  
			 style="display:block;width:590px;height:278px"  
			 id="player"> 
</a>
<?php }?>

This sets up a default player for each post, wrapped in an “if” block. This way you customize the page to your client’s extensive requirements. A screenshot of my page mockup is shown below:

Don’t forget the call to install FlowPlayer:

1
2
3

<script>
flowplayer("player", "<?php bloginfo('template_directory'); ?>/flow-player-files/flowplayer-3.1.5.swf");
</script>

Now all you need to do is upload the movie using the default Wordpress media uploader, and plug in the url in a custom field set to “movie”

Conclusion

If you haven’t already noticed – almost every aspect of FlowPlayer can be customized. Having this much control over video content is invaluable and cannot compare to services like YouTube. Best of all, the basic version is free under the GPL license which you can use for personal or commercial purposes. Note that there are also paid versions that determine the amount of branding you can as well as legal domain usage. Head on over to FlowPlayer’s website for more information.

As I was searching the net for good restaurant websites, I stumbled upon these 16 sites which had all the elements that my client needed. In addition, some of these websites look so good – that it would inspire many of you designers out there. Note that I included my work in the list (its my blog – I can do whatever I want).

http://thenoodlebox.net/

http://www.rubytuesday.com

http://www.twelve-restaurant.co.uk/

http://www.pizzaza.ca/

http://www.nuevo-aurich.de/

http://www.pomonavalleyminingco.com/

http://www.lapizarraproject.com/

http://www.villagerkent.com/

http://www.bertoldis.ca/

http://www.caferouge.co.uk/

http://jakesrh.net/

http://www.belgo-restaurants.co.uk/

http://www.giraffe.net/

http://www.sandiegobrewing.com/

http://www.hoddows-gastwerk.de/

http://www.strada.co.uk/

So much for a name change. Nonetheless, Aparatus is packed with features and design delight that aims to tickle your innermost web mag fancy. I have included extensive theme options that will leave you not needing to touch a single line of HTML. I have cufonized fonts for the headings and the site logos – that you need not create your own. I have modified the Wordpress loop so much that it covered almost all possible looping scenario. Last of all, Aparatus comes with four different stylesheets targeted to suit your color schema.

The Slide Show

As for many magazine styled websites – a slideshow is a must have. Thanks to JonDesign’s Smooth Gallery – which made this possible. The slideshow by default pulls your five latest posts. The loop then continues to present the remaining of your posts directly below. The theme options allow total exclusion of the slideshow, as well as automatic slide. You can also specify a specific category to be pulled into the slideshow – without ever duplicating the posts in the bottom. All while the default loop logic is still acknowledged and functional. What this means is that – the loop still recognizes the options you enter in Wordpress admin – not just in the theme (i.e. number of posts to show, etc); in addition, the paging system (next page etc) still works and automatically hides the slideshow in the inner pages. Oh, I also re-styled the WP-Navi Plugin (the right way), by de registering it’s default stylesheet.

WP 2.9 Thumbnail Ready!

The images in the slideshow as well as the thumbnails per post can be set by using the new “set as thumbnail” feature in WP 2.9!. This supersedes the old school way of inserting “custom-fields” – but will still work with either! You can use the thumbnail feature or custom fields set to “image”.

Ads, Twitter, Widgets and Everything else

The sidebar comes with advertising blocks which you can set up in the theme options panel. When you enter your Twitter account in the options, this will dictate the @replies in the Tweet Me buttons, the big “Follow my Updates” in the header, as well as the last tweet in the sidebar. The popular posts and recent comments tabbed area are all non-plugin driven – which means the code is all inclusive with the theme, without needing to install a plugin. Lastly, the sidebar supports widgets, the comments are threaded, gravatar – ready, as well as suckerfished drop down menus for the categories in the header.

That’s Enough! Download Already!

To view a live preview of Aparatus – click here. You can download the theme from this link. If you like the theme – you can do one of many things to keep me happy: Follow me in Twitter, Donate some coffee money, Tweet about it, subscribe to my feeds or even just leave a nice comment below.

A number of leading designers have already dominated this Wordpress premium themes market; quite notably: Woothemes, DIYThemes and StudioPress.

But amongst these big names you may have come across a more succinct, straightforward and classy premium theme designer – simply named “Elegant Themes“.

Who is Elegant Themes?

Elegant Themes is owned by a designer named Nick Roach. This means that all of the designs and code that is produced from Elegant Themes is from this mighty fellow. According to Nick:

I created this website to provide WordPress themes of quality and integrity. I craft my themes with a goal of simplicity and professionalism and strive to inject each design with a dose of modest elegance. I believe that your website is not just a tool, it is an integral part of your identity. My job is to respect each customer by providing attractive and userfriendly templates that will help you achieve your online goals.

What’s so special about Elegant Themes?

Quality over quantity. Elegant Themes is hardly a large collection – I mean, there’s only about 30 downloadable themes at the time of this writing. But note they are quite high quality. Check out some of them below:

Wooden

Very down to earth, classy and professionally done – this theme can transform your blog into a modern website wonder.

Lumin

Soothing to the eye with subtle textures and sharp, detailed accents – this theme is packed with visual amenities that scream WEB 2.0!

GrungeMag

Semi-magazine, semi-newspaper – beautiful textures, slider, thumbnails – simply stunning.

Evid

Create your own “Hulu” styled video website with this theme:

Deviant

The ultimate grunge look! Random page tears, crumpled paper, dirty textures – you want your blog to stand out from the crowd – this be the theme for you!

Like Nick said – “each design is injected with a dose of modest elegance”. With each theme you will find excellent color schema, superb use of typography, plenty of textures, just the right amount of Javascript, and above all – originality. The themes obviously took time to build.

You Can’t Beat 20 Bucks a Year!

I don’t think I can elaborate on this any further. $20 dollars a year gives you unlimited access to all of Elegant Themes. Whether you’re a blog owner, an entrepreneur, or even a web developer – you’ve already won by having this arsenal of elegant designs to beautify your websites; all for about the same price as a bucket of fried chicken. Head on over to Elegant Themes!

To preview what we are going to build – see the demo page. Just in case you missed the first tutorial, click here. So are you ready to get started? Let’s begin:

The Wrap, Header and Feature Divs

First of all, you will notice that our layout doesn’t really have anything in the header. This is because I’m sure you will use your own logo for your design – so I left that out. Second, is there really is no need for a navigation bar because we’re only building a single page. Although we may include some anchors in this area so we can quickly jump from one section of the page to another. Also important to recognize that most modern websites now have a large “feature” section which packs the main message of the website. This effect is proven to be pretty effective – that’s why we’re applying the same concept to our portfolio site.

In Dreamweaver, create a new HTML page, name it “index.html” and save it.

Create a CSS document – name it “styles.css” and save it in the same location as “index.html”. Link to the stylesheet from index.html by using a link tag:

<link type="text/css"  href="styles.css" rel="stylesheet" />

Now, we create the main DIV – we’ll call this the “wrap”. In this DIV we’ll house almost all of our elements (all but one: the footer – which I’ll explain later). In index.html, enter the code:

<div id="wrap">  </div><!--wrap-->

Next, we grab the body style of our page. Go to Photoshop and open our mockup. Flatten the image (“Layer” > “Flatten Image”) and grab a piece of background:

Still in Photoshop, press Ctrl + C to copy the selected area, create a new document – and paste (this will be our HTML body background that will span horizontally). Save this file as “body-bg.gif” inside a folder called “images” in our root directory.

Next is we apply some fixin’s to our CSS:

* {padding:0; margin:0}
  body{background: url(images/body-bg.gif) repeat-x #f3f2ed;}

The above code tells everything to reset to 0 padding and 0 margin. It also applies the body background to the image we just created, repeat it horizontally and apply the color #f3f2ed everywhere else. View your file in the browser, you should have something like below:

Now remember we created the main div? That is just sitting in somewhere in the page. Let’s apply some standard measurements to it and align it so it settles perfectly in the middle of our browser.

Note that in the beginning of this tutorial – I was going to use the 960.gs framework, but feel as though I’m cheating because the tutorial calls for “from scratch”. So I decided, I’m not using the framework and code everything by hand, hence – “from scratch”.

Add this code to your style.css:

#wrap {margin:0 auto; width:960px; background:#CCCCCC;  min-height:500px;}

This centers our wrap in the middle of the page, as well as set the default 960 pixels width. The background color and the minimum height properties are added temporarily so we can tell from the browser what we’re working with. Refresh your page and you should have something like below:

Go back to index.html and add the header div inside the wrap div:

<div  id="header"></div><!--header-->

Back to our style.css – add this piece of code:

#header {height:32px; background:#333333;}

Refresh your browser – and you can see where our header sits nicely on top. The background color again is temporary.

Next is our feature div. Create a new div tag in your index.html with the id of “feature”, place in between the “feature” divs. Add two paragraph tags inside with your own text. In my case – I’m using the default Lorem latin filler text:

1
2
3
4

<div id="feature">
<p id="slogan"><!--your fantastic slogan goes here--></p>
<p><!--followed by a smaller, but also fantastic slogan here--></p>
</div><!--feature-->

Notice the first paragraph tag has an id of “slogan”. This is because this is the primary text that we are going to style with an image. We are treating it as regular text for SEO purposes.

Go back to your mock up in Photoshop and press “Step Backward” (ctrl + z + alt) several times until you get the fully layered version once again. Make sure the guides are showing – select the feature section like below:

In your layers panel, make sure you hide all the layers that shouldn’t be shown. This includes all the background layers and text elements. The only layer that should remain is the large feature image and the borders and glow to the left. Select the feature area and hit crop (“image” > “crop”). Save this as “feature.png” inside our images folder. This will be our feature div background image:

Now in our styles.css – add the following code:

#feature {background:url(images/feature.png)  no-repeat; height:394px;}

Go back to your mockup and click “Step Backward” (“Edit” > “Step Backward”) to uncrop. Unhide the slogan layer and select it according to the guides. Crop once again and save this as “slogan.png”.

Now add this code to your styles.css:

1
2

#feature p#slogan {background:url(images/slogan.png)  no-repeat; width:390px; height:192px; text-indent:-9999px; position:relative;  top:30px; margin:0;}
#feature p {font-family:verdana; font-size:12px;  color:#FFFFFF; width:320px; line-height:20px; margin:48px 0 0 28px;}

The above code styles the two paragraph tags inside the feature div. The first one with a background image, and the next one as plain text. Now when search engines crawl our page – it still thinks both are plain text – which is a good thing.

I’ve also taken out the color property in our wrap div to see how our feature looks like. Another thing to remember is that since our feature sits in its own div – it will be easy to add a slideshow or something to that effect as replacement.

Now that our wrap, header and feature is in place, we’re ready to move to the next sections: Testimonials and Previous Work:

This tutorial will show you how to create a simple style switcher from your themes options panel. It will have a single drop down list with all the available styles to pick from. Once saved – your theme will switch to the selected style. Ready to get started – let’s begin:

Part 1 – Set up functions.php

First thing you need is a functions.php file. A functions file is an optional “plugin” type of file you can include in your theme directory folder. One of its’ purpose is to setup administration options for your theme – which is exactly what we’re doing. Create a file and name it “functions.php” and paste the code below. Note that you need to change variables that define your theme name ($themename) and the short name ($shortname) to match your themes:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php 
 
$themename = "My Sweet Theme";
$shortname = "mst";
$options = array (
array( "name" => "Style Sheet",
	"desc" => "Enter the Style Sheet you would like to use for Sweet Ass Theme",
	"id" => $shortname."_style_sheet",
	"type" => "select",
	"options" => array("default", "green", "blue", "yellow"), 
	"std" => "default"),
);
?>

The above code initializes your theme options structure. First it defines several variables, including a multi-dimensional array (which will become our drop down list containing the four selectable options that will dictate our style sheets). Next is to copy the code below. This code loops through each iteration of the array we declared previously. It assigns a type of form field, displays labels and applies the correct descriptions etc. It also includes several functions that saves the form data, resets information and displays status messages etc. It’s a wee bit technical – so its better if we simply copy and paste the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

 
<?php
function mytheme_add_admin() {
 
global $themename, $shortname, $options;
 
if ( $_GET['page'] == basename(__FILE__) ) {
 
if ( 'save' == $_REQUEST['action'] ) {
 
foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
 
foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }
 
header("Location: themes.php?page=functions.php&saved=true");
die;
 
} else if( 'reset' == $_REQUEST['action'] ) {
 
foreach ($options as $value) {
delete_option( $value['id'] ); }
 
header("Location: themes.php?page=functions.php&reset=true");
die;
 
}
}
 
add_theme_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
 
}
 
function mytheme_admin() {
 
global $themename, $shortname, $options;
 
if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';
 
?>
<div class="wrap">
<h2><?php echo $themename; ?> Settings</h2>
 
<form method="post">
 
<?php foreach ($options as $value) {
switch ( $value['type'] ) {
 
case "open":
?>
<table width="100%" border="0" style="background-color:#eef5fb; padding:10px;">
 
<?php break;
 
case "close":
?>
 
</table><br />
 
<?php break;
 
case "title":
?>
<table width="100%" border="0" style="background-color:#dceefc; padding:5px 10px;"><tr>
<td valign="top" colspan="2"><h3 style="font-family:Georgia,'Times New Roman',Times,serif;"><?php echo $value['name']; ?></h3></td>
</tr>
 
<!--custom-->
 
 
<?php break; 
case "sub-title":
?>
<h3 style="font-family:Georgia,'Times New Roman',Times,serif; padding-left:8px;"><?php echo $value['name']; ?></h3> 
<!--end-of-custom-->
 
 
<?php break;
 
case 'text':
?>
 
<tr>
<td valign="top" width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" /></td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case 'textarea':
?>
 
<tr>
<td valign="top" width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td>
 
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case 'select':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select></td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case "checkbox":
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
</td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php break;
 
}
}
?>
 
<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
 
<?php
}
add_action('admin_menu', 'mytheme_add_admin');
?>

Test out your theme options by going under the “Appearance” section > “Your Theme Name Options” tab. You will see the drop down list with the selectors already in place. Once you hit “Save Changes” – it saves your data. While clicking “Reset” sets it back to the default selector. We also see nice status messages appear on top each time we update.

Part 2 – Create the Style Sheets

Create four .css files that correspond to the drop down list selections we defined in our functions.php. The names do not have to exactly match the selectors (but is wise to have some meaningful relation to the names). Save these four files in the root directory of your theme:

style.css – this style sheet is for a black background page with white colored fonts.

1
2

/* CSS Document */
body {background:#000000; color:#FFFFFF;}

green.css – this style sheet is for a green background page with white colored fonts.

1
2

/* CSS Document */
body {background:#3bae09; color:#FFFFFF;}

blue.css – this style sheet is for a blue background page with white colored fonts.

1
2

/* CSS Document */
body {background:#038aba; color:#FFFFFF;}

yellow.css – this style sheet is for… you get the picture.

1
2

/* CSS Document */
body {background:#f6f658; color:#333333;}

Part 3 – The Switch Statement

Now that we have our options working in the back end, and we have our four style sheets sitting in the root folder waiting to be called, all we need now is a way to flip the style sheets in our header file. We achieve this by using a standard switch statement. A switch statement in php is an alternative to the the “if…else” statement. It uses the case keyword which we use to match our selectors to execute a statement that calls the appropriate style sheet. In the default header.php file – look for the line of code below and delete it:

1

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

This is the standard call for the default style.css file which we no longer need. Next, paste the code below inside your header.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php
	global $options;
	foreach ($options as $value) {
		if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
	}
	?>			
	<?php switch ($mst_style_sheet) {
		 case "default":?>
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<?php break; ?>	
	<?php case "green":?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/green.css" type="text/css" media="screen" />
	<?php break; ?>
	<?php case "blue":?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blue.css" type="text/css" media="screen" />
	<?php break; ?>
	<?php case "yellow":?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/yellow.css" type="text/css" media="screen" />
	<?php break; ?>	
	<?php }?>

The above code is quite self explanatory. First it grabs whichever values we’ve stored in our theme options. Second – is the switch statement for our drop down list, followed by cases for each entry – with its unique statement calling the style sheets.

Now if you go back to your style switcher and select “blue” – your theme style should switch to blue – and so on and so forth.

You can have as many styles as you wish to integrate in your options. As well as the amount of customization in the actual .css files is completely up to you. You can download the source files from this link – simply add these files in your theme folder and change some values – and your theme will instantly have it’s own style switcher.

Take Django for instance. “Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design”. Though I never tried implementing it – here’s a list of 20 beautiful websites powered by Django:

http://shoporbitbaby.com/

http://www.bedrijfscultureelabonnement.nl/

http://www.dobrota.in/

http://www.onyxelectronics.com/

http://www.drguiloff.com/

http://rblmon.com/

http://www.fitness-class.com.ua/

http://www.pbs.org/teachers/

http://www.webmasterpro.de/

http://www.pauldeleeuw.tv/

http://run-up.fr/accueil/

http://zyelabs.net/

http://www.bidsketch.com/

http://journalism.berkeley.edu/

http://www.inkboxprints.com/home.html

http://outings.ca/

http://linux.pt/

http://rottenetter.no/

http://www.gramyfair.pl/

http://www.sportsgirl.com.au/

If you would like to see more websites powered by Django – visit: http://www.djangosites.org/.

You also might want to find out more about Django:

• http://jeffcroft.com/blog/2006/may/02/django-non-programmers/
• http://patrickbeeson.com/blog/2008/jul/28/how-django-good-seo/
• http://docs.djangoproject.com/en/dev/

This tutorial is the first of three parts: 1) the Photoshop Mock up, 2) Coding the HTML / CSS and finally 3) Adding PHP / jQuery.

The Output

Below is a preview of what we’re building. The aim is to have a mock up that is fully layered, so we can optimize for the purpose of SEO and page performance. Ready to get started – Let’s begin:

Part 1 – The Fold

We’re going to design the page from the top to bottom. The fold is first part of a web page can see – without having to scroll downwards. In our case, this includes the header and the big red feature bar:

If you aren’t familiar with 960.gs – it’s a CSS framework that follows the standard 960 pixels page width rule. Download the photoshop template and check out the guides – we are building the page following the 960 grid rules:

Create a new layer – this will be the fold layer. Select the full page width, with approximately 380 pixels in height. Fill it with a solid color – in my case I chose a bright red #730701:

Create another layer for the header bar, select the full page width and 48 pixels in height. Fill this with another solid color – in my case, #bcbcbc for light grey.

Where the header bar and the fold meet, we want to add an “etched” effect. We achieve this by using 2 lines using the “line” tool. Create 2 horizontal lines at 1 pixel each (make sure you hold the “Shift” key) as you drag it across the page. Nudge one line so that they sit just on top of one another. The rule is to use a lighter shade for one line, and a darker for the other (it is important that you play with the colors, and zoom out and test if the etched look is achieved). Add a subtle gradient fill for the header bar as well.

The next step is to add a large feature image. This sits on top of all the layers to give it that 3D effect. Place in at almost half the 960 pixel page width, overlapping some part of the header and pass below the fold. Include the effects as shown:

Immediately to the left of the feature image, add your large slogan text. This is to be your attention grabbing statement, and is important to be the most prominent. I chose Rockwell at size 36 pixels, with -50 tracking. Also add the following text effects:

• Drop shadow – Normal blend mode – #000, 90 degrees angle, 1px distance, 0 spread and 1px in size
• Inner Shadow – Normal blend mode – #FFF, 90 degrees angle, 1px distance, 0 choke and 0px size
• Gradient Overlay – use default settings, reduce opacity to 34% and 90 degrees in angle

Add a gradient effect to the background layer named the fold. The rule is to use a slightly lighter color than the existing background as one color, and the same background color as the secondary color. Fill by pressing the shift key and releasing simultaneously.

Add another 2 horizontal lines right underneath the slogan text. *Use the rule as described in the previous line tools used in the header and the fold separation. Add a smaller set of text – I used Arial with 14 pixels in size, #FFFFFF color.

To complete the fold – we add a glow effect to the bottom area where the borders separate the large text and the small text. Select a small area (shown below), grab the brush tool, select white for the color, increase the brush radius (shown below) – reduce the opacity all the way to 12 percent and daub a quick light stroke. Next up: Below the Fold.