The solution I tried to made right now is a very simple and basic one. It make use of simple jQuery to catch the click event and switching tabs, as well as the slideshow, the CSS to style it as much as we wanted and a simple HTML markup in one unordered list.

The Markup

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

<ul class="tabs tabs-1"> 
	<li> 
		<a class="tab-select" href="#tab1">1</a> 
		<div class="tab-content" id="tab1"> 
			<img src="tab-images/tab1.jpg" alt="Tab 1" /> 
		</div> 
	</li> 
	<li> 
		<a class="tab-select" href="#tab2">2</a> 
		<div class="tab-content" id="tab2"> 
			<img src="tab-images/tab2.jpg" alt="Tab 2" /> 
		</div> 
	</li> 
	<li> 
		<a class="tab-select" href="#tab3">3</a> 
		<div class="tab-content" id="tab3"> 
			<img src="tab-images/tab3.jpg" alt="Tab 3" /> 
		</div> 
	</li> 
	<li> 
		<a class="tab-select" href="#tab4">4</a> 
		<div class="tab-content" id="tab4"> 
			<img src="tab-images/tab4.jpg" alt="Tab 4" /> 
		</div> 
	</li> 
</ul>

The markups is as simple as it can get. It consists of an un-ordered list, with each list containing one anchor for navigation and one div for content.

The Javascripts

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
	jQuery(document).ready(function($){
		$('.tabs').each(function(){
			$(this).find('li:first').addClass('current'); // set the first tab to display
			repeat_slideshow($(this));
		});
		$('.tabs li .tab-select').click(function(){
			$(this).closest('.tabs').find('li').not($(this).parent()).removeClass('current'); // hide all tabs except for the current
			$(this).parent().addClass('current'); // set the current tab to display
			reset_slideshow($(this).closest('.tabs'));
			return false;
		});
		function slideshow(slide)
		{
			var index = slide.find('li.current').index();
			var total = slide.find('li').length;
			if ( index+1 >= total )
				var next = 0;
			else
				var next = index + 1;
			slide.find('li.current').removeClass('current');
			slide.find('li').eq(next).addClass('current');
		}
		function repeat_slideshow(slide)
		{
			slide.data('slideshow', setTimeout(function(){
					slideshow(slide);
					repeat_slideshow(slide);
				}, 5000));
		}
		function stop_slideshow(slide)
		{
			clearTimeout(slide.data('slideshow'));
		}
		function reset_slideshow(slide)
		{
			stop_slideshow(slide);
			repeat_slideshow(slide);
		}
	});
	</script>

This code is pretty much simple, it only toggles tab by changing class properties. It relies to the CSS to deliver the actual tabs toggling.

The CSS

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

<style type="text/css"> 
	.tabs
	{
		position: relative;
		height: 430px;
		width: 640px;
		list-style-type: none;
		margin: 10px 0 40px;
		padding: 0;
		overflow: hidden;
	}
	.tabs-1
	{
		width: 380px;
		padding: 0 0 0 260px;
	}
	.tabs li
	{
		float: left;
	}
	.tabs li .tab-select
	{
		display: block;
		float: left;
		margin: 0 5px 0 0;
		padding: 0 10px;
		background: #e6e6e6;
		color: #666;
		text-decoration: none;
		cursor: pointer;
	}
	.tabs-1 li .tab-select
	{
		height: 20px;
		line-height: 20px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		font-size: 10px;
	}
	.tabs li .tab-content
	{
		position: absolute;
		top: 30px;
		left: 0;
		height: 400px;
		width: 640px;
		opacity: 0;
		-moz-transition: opacity 0.5s linear;
		-o-transition: opacity 0.5s linear;
		-webkit-transition: opacity 0.5s linear;
		transition: opacity 0.5s linear;
		z-index: 2;
	}
	.tabs li .tab-select:hover
	{
		background: #ccc;
		color: #666;
	}
	.tabs li.current .tab-select
	{
		background: #666;
		color: #fff;
		text-shadow: 1px 1px #000;
	}
	.tabs li.current .tab-content
	{
		opacity: 1;
		z-index: 4;
	}
</style>

The CSS define how the tabs will looks. It is mainly used the position properties to maintain the position of the tab content and leave the navigation to static position (either floated or none). Notice the tabs-1 class? That is to demonstrate that even with this approach, we can customize the tab to different looks with exactly same markup structure.

To further explain how it works, first the main .tabs class is considered the area which the content will be placed, we set the position to relative and make sure it had enough height to accomodate the content. Then each list is floated to left, as well as the .tab-select anchor for navigation (in later example, we can also use div).

The content part of each list is set to absolute position. That means, they will overlap each other and make them in always same position. We then used opacity to hide and displaying the content with addition of the CSS3 transform to provide fading animation. Finally, we bring the selected content to the front by applying a bigger z-index value.

Note that, for fading animation, we used the opacity property. If you wanted to use another animation, you need to change it. For no animation, just use display: none and display: block.

Why this approach?

What make this approach better than any others tabs and slideshow?

Well, it might not better. It just that, it is simple and clean enough, at least for me.

Only one unordered list markup needed

Often, I find that a tab are made from two group of lists (when I said lists it can be a group of div, li, or anything). One is for the tab navigation and the other is for the content. Nothing is wrong either way, but I find it easier to create if it is only made on one list. This also apply when we create the markup on the fly using server script such as PHP. If we have two group of lists, this means we need to loop the variable twice, while using one list will only need one loop.

Using one list will also make the HTML cleaner and for those who browsing with text browser, it will degrade gracefully.

Lighter, no Javascript effect

I don’t know if this will be considered a good thing or not, but I don’t use any animation using Javascript nor jQuery effect. Instead, I rely on CSS 3 transition for the fade in effect. This, obviously, is not yet a good practice. It is safe to use CSS 3 feature right now, but the lack of browser support make it not yet practical. By far, only new Webkit browser (Safari and Chrome), Opera 10.6+ and Firefox 4 support CSS transition.

Again, why CSS 3? Well, we know that the animation and transition in CSS 3 is not yet matured and experimental for now. It even lagged when we are doing some heavy animation. But when it is matured enough and become a standard, it will be better than any Javascript animation as it will build natively to the browser.

Support multiple slideshow tabs

Well, it make use of two jQuery features that was there but seems to rarely used. They are jQuery.index and jQuery.data. We used jQuery.index to see the current index from the list group to find the next tab to slide. It is more simple than storing a variable and keep it updated when the slide change. Then, the jQuery.data is used to store the setTimeout variable. Why using a jQuery.data and not a variable? jQuery.data allow us to attach data to a DOM element, this way, we can attach each setTimeout variable to the parent group and make it separated to any other slideshow in the same page. So, it support multiple slideshow in the same page without interrupting each other in just a few lines of code. Nice!

The Downside

After all this goodness, obviously, there is still a downside to be considered that it might not suit your need. First of all, the content height is fixed. This is because the use of absolute position for the content. Second, well, the lack CSS3 support on some web browser.

The Demo

Finally, a demo to show you how it actually works.

Check out the demo here.

There is three styles of the slideshow tabs in the demo, so you can see that it is possible to style it in many way to suit your design.

The code is released under GNU General Public License. So feel free to use and modify it in any way you need.

Browser support?

Well, not much browser support this yet. It degrade nicely though. If you open it in older browser that didn’t have CSS 3, it still working all fine except the CSS 3 goodies. So we can say that the CSS 3 goodies is an extra for dude who love using updated browser.

How about Internet Explorer 6? Well, it is not working right as far as I can see. But I think there will be a workaround to solve the IE 6 problem though, but I just don’t have a time to spend on this stupid outdated browser.

Final?

Thank you and hope that useful for you.

The idea behind this design is, to make a simple, usable layout and still looks beautiful. There is a lot of tutorial on the web that helped me when making this. I try to make the website small in size, so you’ll able to load it fast enough. There is also a cool trick on the background, which still make the markup small without much wrapping div over div to accomplish the effect. I also realize the importance on social networking nowadays, so I add links to some of my account.

With CSS 3 coming, I won’t forget to add some CSS 3 elements. I add a little transition, on the sidebar links and the social network icon above. You won’t see it if you don’t use webkit browser though, so if you use Google Chrome 5 and Safari 5, then you are in. This transition have no importance at all, the purpose is just to enrich the user experience, but won’t lose any functionality without it. Another CSS 3 property I used is the border-radius. I used this on some input fields you can find. There is also some jQuery here, although I’m only using it on input fields now, it might become handy in future.

While I haven’t check this on all browser yet, but I’m sure it will work fine on all major browser, includes Internet Explorer 8, Mozilla Firefox 3.6, Opera 10, Google Chrome 5 and Safari 5. While I’m not supporting older Internet Explorer version, it still, on some basic level, works fine. I even can confirm that the IE 7 load almost everything fine, but it just not perfect yet. I have some issues on the logo and button, same as IE 6. This might get fixed soon.

I wish I could write the process on making this design. I might be able write it, but I won’t promise that. In short, there is 2 steps at least. First is design it in PSD, the second is convert it to WordPress. I’m skipping the step to convert it to XHTML/CSS first though, well, that’s just how I work.

I hope you will have one or two minute to type down a comment to share your opinion, so I can get better. Thanks!

Click here for the demo.

This currently worked on Google Chrome and Safari. However, in my test, Safari lagged a lot in the animation. So Google Chrome performed the best!

Enjoy…

Update: This is also submitted on Smashing Magazine CSS 3 Contest, you can preview and download from there too.

Here is the menu result

This is pure CSS, without any single Javascript involved. If you was using webkit browser, you will see a nice transition effect. The CSS 3 juice added here is border-radius, transition-property and transition-duration.

The trick for dropdown is done by using relative and absolute positioning. As you might know already, absolute position element is positioned relative to the parent that has position other than static. So, if we have relative position as the parent, absolute position element will get the position relative to the parent.

To hide and show the absolute child element, we use the :hover state. This worked fine on all major browser, except for the old IE 6, since the IE 6 can’t have :hover state work on all other element than a (anchor tag).

Now that CSS 3 has come, why bother with old browser anymore?

For every one who celebrated: Happy Chinese New Year, Gong Xi Fa Cai

And for couple: Happy Valentine Days

You can also see this art and comment it on my Deviant Art account.

We first start with style.css. The first thing we did is write the details of the template, on the comment header of style.css. See here for more information.

Here is my style.css details.

/*
Theme Name: Simple Golden Black
Theme URI: http://wordpress.org
Description: A simple template with elegant look.
Author: Jeffri Hong
Author URI: http://jeffri.net
Version: 1.0
Tags: two columns, fixed width, elegant, simple
*/

This is pretty self explanatory, isn’t it? This details will show in the themes selector on your WordPress admin page. Now let’s give some default properties.

body
{
font-family: arial;
font-size: 12px;
margin: 0;
padding: 0;
background: #c6bb93;
color: #310;
}

div
{
margin: 0;
padding: 0;
}

a
{
text-decoration: none;
color: #430;
}

a:hover
{
text-decoration: underline;
color: #650;
}

h1, h2, h3, h4, h5, h6
{
margin: 0;
padding: 0;
}

Here we just give some properties on body and make sure that all div and header (h1, h2, …) have 0 margin and padding. We also give some properties for anchor (link) for normal one and hover one. That’s it.

Okay, let’s leave the style.css for a moment and move to header.php. Here is the header.php.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<title><?php bloginfo(‘name’); ?><?php wp_title(); ?></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=<?php bloginfo(‘charset’); ?>” />
<meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats please –>
<style type=”text/css” media=”screen”>
@import url( <?php bloginfo(‘stylesheet_url’); ?> );
</style>
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<?php wp_get_archives(‘type=monthly&format=link’); ?>
<?php wp_head(); ?>

</head>

<body>
<div id=”header”>
<div id=”header-content”>
<h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<h4><?php bloginfo(‘description’); ?></h4>
</div>
<div id=”header-menu”>
<ul id=”head-menu-list”>
<?php wp_list_pages(‘title_li=’); ?>
</ul>
</div>
</div>

The head tag is actually copied from other WordPress template, we don’t need to care about it for now. The interesting part is in the body tag. You can see that I use div tag instead of classic table for layout. The header-content will contain the blog title and description while the header-menu contain the pages list. This won’t reproduce the output we want yet, it still need an assist from CSS. Also, you can see that we call some WordPress function here. The bloginfo and wp_list_pages, see the links for more information. The body tag didn’t closed here, it will be closed on footer.php.

So now, let’s get going to the footer.php. It will contain this.

<div id=”footer”>
<div id=”footer-content”>
<h4>&copy; Copyright <?php echo date(“Y”); ?> <?php bloginfo(‘name’); ?>. Powered by <a href=”http://wordpress.org/”>WordPress</a> and template by <a href=”http://jeffri.net”>Jeffri</a>.</h4>
</div>
<img src=”<?php bloginfo(‘template_directory’); ?>/images/foot-right.png” alt=”foot right bg” style=”float: left;” />
</div>
<?php wp_footer(); ?>

</body>
</html>

It is still nothing new here. Just another layout for footer with div. On the footer-content we will have copyright information. Notice there is img tag there. It is used as delimiter between the footer-content which have bright background and the footer dark background. This img tag is floating left as you can see.

Header and footer are ready now, next, we going to index.php.

<?php
get_header();
?>

<div id=”center”></div>

<?php
get_footer();
?>

OK, leave it like this first. You see we call get_header and get_footer function, this is the same as include the header.php and footer.php. We also have one div here. It will used later. Now, it is the time to play with the CSS and doing the positioning for header and footer.

We start from header.

h1
{
font-size: 50px;
line-height: 70px;
}

#header
{
background: #000 url(images/head-bg.png) repeat-x;
width: 100%;
height: 150px;
overflow: hidden;
}

#header-content
{
margin: 7px 2%;
}

#header-content h1 a
{
color: #ddd;
}

#header-content h1 a:hover
{
color: #aaa;
text-decoration: none;
}

#header-content h4
{
color: #cb9;
font-size: 14px;
line-height: 14px;
}

#header-menu
{
float: right;
background: url(images/head-menu-side.png) no-repeat top left;
padding: 0 0 0 51px;
margin: 8px 2%;
}

#head-menu-list
{
padding: 0;
margin: 0;
}

#head-menu-list li
{
list-style-type: none;
float: left;
padding: 0 25px 0 10px;
background: url(images/head-menu-bg.png) repeat-x;
height: 35px;
line-height: 35px;
}

#head-menu-list li a
{
color: #000;
font-size: 21px;
font-weight: bold;
}

Okay, a little explanation about this. If you see the header.php html, we have one parent div (header) with another two div (header-content and header-menu). The header-content will be placed on top left. But the header-menu will be placed on bottom right. We start with the parent div, we give black background with black background image (see the previous part to know what images we refer to here), and it is repeated horizontally. The width is 100% so this div will fill all of available width of your browser. The height is 150px, same as the background image height.

The header-content have margin of 7px on top and bottom, and 2% for left and right. Along with h1 (the blog title with line-height 70px) and h4 (the blog description with line-height 14px), so far we have filled 98px for the header-content. So the rest 52px (150 – 98) will be used for header-menu. This way, we calculate the remaining height to positioning header-menu to bottom. It is probably not the best way, but it is also not a bad way, because our target now is Internet Explorer 6 or higher. I don’t want to care of another crappy old browser.

Now we positioning the header-menu. We first float it to right, then choose the best margin for it. For the background, we use the delimiter image with no repeat, and to show the image, we add the left padding to 52px. We didn’t use different img tag for this as we do on footer, because we have the space for this image already. lol Okay, the next is to positioning the list to horizontal. It is a bit tricky.

Before that, we give 0 padding and margin to the ul (head-menu-list) first. Then to the li, we give float left, this way, it will be listing horizontally. We also give some padding there (left and right only), and use the light background. For height, we make it same as line-height to make it center vertically. That’s it. Header done, it will now looks like below.

Now, the footer. Here we go.

#footer
{
background: #000 url(images/foot-base-bg.png) repeat-x;
width: 100%;
height: 45px;
clear: both;
}

#footer-content
{
background: url(images/foot-bg.png);
height: 45px;
width: 70%;
float: left;
margin-left: 2%;
padding: 0 20px;
}

#footer-content h4
{
font-size: 12px;
line-height: 45px;
}

Hmm…. The footer here is the parent div of footer-content, and we give it 100% width, same as header you see above. The height is 45px, same as the background image height. The background is the dark one, while the footer-content will have bright background. We also give clear: both to make sure it clear all floating element.

The footer-content is floating left, same as the image delimiter you see on the HTML. The height is also 45px, width on 70% also some margin and padding to make sure it shows fine. For the h4, I only change the font size and line height to make sure it centered vertically. Now it should looks like this.

Not bad. That is enough today. Next day, we will start creating the sidebar and the content. See ya!

First is the preparation. For me, I will take a paper and a pen and start thinking of how the template will look like. Hmm… As of now, I will create a simple templates like usual blog template. One header with logo and description on top, one sidebar on left side, the content is on the center (right side from the sidebar), and one footer on bottom. That’s it. Okay, once you are ready then, let’s open your favorite graphics editor. For me, it is GIMP.

Now, create a new images. Since most users use the 1024 width screen, I create 1000 x 800 images. And now we will start creating the raw design. Here we go…

We create one layer for each header, sidebar, content and footer first. as you can see here.

Hmm… All is in black… No matter, I want to use black and some gold like color as the base color. Then, let’s start playing with a little advance tools from GIMP to make the graphics better. Here it is:

Okay, that’s it. That is the result I want. As you can see, the header have a space (colored with gold one) for menu. I will use this for listing static pages. It is the same as my current template, you can see my static pages is listed in the top menu. Also, in this raw images, all element is still not placed properly, but that doesn’t matter. We just need a small portion from that images.

Now, let’s divide some images that looks same. We will later use CSS to repeat it. Here we go…

See, we just need 13 images there that can represent this look. That is enough for today. Tomorrow I will start write the HTML and CSS code.

This article didn’t intend to teach you how to became the jQuery master and I’m far away from a master. It just for the case you didn’t know about jQuery yet and want to start with it, then this will be a good guide for you. If you want a more complete tutorial, go to the jQuery documentation.

To use jQuery, you must first download it on jQuery website, then load the jQuery js files on your HTML document. For example

<html>
<head>
    <script type=”text/javascript” src=”jquery.js”></script>
    <script type=”text/javascript”>
        // your code here
    </script>
</head>
<body>
    <!– your html content –>
</body>
</html>

Now, you can start writing your Javascript code using the jQuery API. Also, you can also separate your Javascript code and load it.

Here is a little example use hover event and then show some box below it, also use the click event to show some alert.

Example

This is an example box.

See… Quite cool eh? I use this on my side menu. So how to make this kind of code? It’s pretty easy using jQuery.

<script type=”text/javascript”>
$(document).ready(function(){
    $(“#example-links”).hover(function(){
        $(“#example-box”).show(500);
    }, function(){
        $(“#example-box”).hide(500);
    });
    $(“#example-links”).click(function(){
        alert(“You clicked the example links!”);
    });
});
</script>

Look, that is the Javascript. Complicated? No, read carefully… First, we need to place all of our script on $(document).ready() event. So, this will set all of your event handler once the DOM (Document Object Model) is ready. You can have as many $(document).ready() event as you want in your header or body tags.

This event, need a callback function. Here we made the callback function directly on the ready event argument, without separated function. So the code is mostly like this

$(document).ready(
    function(){
        // your code here
    }
);

Ok, this make it clearer right? This is the basic of jQuery, most event are called like this.

Next, the selector, as you can see in this code, we have at least two unique selector, #example-links and #example-box. If you has known CSS, it is probably very clear to you. This select element that based on its id attribute. Then, enclose it with $( and ) will construct the jQuery object. Oh, don’t forget to enclose the selector with quotes.

$(“#example-links”).click(function(){
    alert(“You clicked the example links!”);
});

This line set the click event handler for element with example-links id. So, while users click on this links, the alert box will be prompted.

$(“#example-links”).hover(function(){
    $(“#example-box”).show(500);
}, function(){
    $(“#example-box”).hide(500);
});

Now look on this line, it set the hover event handler. You can see that we have two function as the argument. The first one will be called when users hover the mouse on the element, while the second one will be called when the mouse out from the element. Inside the function, we call the show and hide effect for #example-box element. For more information about the events, effects, and more, see the documentation page.

I think the code is quite understandable now, if you at least have basic on Javascript before. Now the HTML

<a id=”example-links” style=”font-size: 20px;” href=”#”>Example</a>
<div id=”example-box” style=”margin: auto; background: #ff9999 none repeat scroll 0% 0%; display: none; width: 200px; height: 200px;”>This is an example box.</div>

That’s all. Hope you find it useful.

It still use fixed width, I will solve this later so if you are using wider screen, the head logo and menu will not separated from the main element. I’m still testing this templates and will improve it day by day. Damn, I think I really interested on creating WordPress templates now. Maybe I will make a public templates soon.