A quick guide to alter ZK tabs look and feel

Bookmark Blog Post

	del.icio.us
	Digg
	DZone
	Furl
	Reddit

Dhrubojyoti Kayal's Blog | February 29, 2008  10:51 AM | Comments (0)

I have been busy these days again with some work on Virtualization. But at the same time i keep working with my favorite Web UI frameworks. Off late i have seen that ZK developers and designers are finding it hard to alter the style of the default tab component. So here is how the default tab component looks like:

Now we would see if it can be easily customized to a version without rounded corner and meeting our needs. The steps below presents a step by step account of the same
Step 1 : Read the ZK style guide
As a first step developers must go through the ZK tab style guide available at this link - http://www.zkoss.org/doc/styleguide/ch01s06.html
Step 2 : Create a custom style sheet to override the defaults
Listing 1 - cat-tab.css - Download css here

td.tab-3d-tl-sel {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	background-color:#D7E3EA;
	border-left:1px solid blue ;
	border-top:1px solid blue 
}

td.tab-3d-tm-sel {
	background-image: url(/CAT/images/dot.gif);
	height:5px;width:10px;
	background-color:#D7E3EA;
	border-top:1px solid blue 
}

td.tab-3d-tr-sel {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	background-color:#D7E3EA;
	border-right:1px solid blue ;
	border-top:1px solid blue 
}

td.tab-3d-ml-sel {
	border-left:1px solid blue ;
	width:5px; height:20px;
	background: #ffffff url(/CAT/images/selected.gif) repeat-x top left;
	
}	

td.tab-3d-mm-sel {
	background: #ffffff url(/CAT/images/selected.gif) repeat-x top left;
	width:20px; height:20px;
	
}

td.tab-3d-mr-sel {
	background: #ffffff url(/CAT/images/selected.gif) repeat-x top left;
	width:5px; height:20px;
	border-right:1px solid blue 
}

td.tab-3d-bl-sel {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	border-left:1px solid blue ;
}
td.tab-3d-bm-sel {
	background-image: url(/CAT/images/dot.gif);
	width:20px; height:5px;
	
}

td.tab-3d-br-sel {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	border-right:1px solid blue ;
}


td.tab-3d-tl-uns {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	background-color:#BBFFFF;
	border-left:1px solid yellow ;
	border-top:1px solid yellow 
}

td.tab-3d-tm-uns {
	background-image: url(/CAT/images/dot.gif);
	height:5px;width:10px;
	background-color:#BBFFFF;
	border-top:1px solid yellow 
}

td.tab-3d-tr-uns {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	background-color:#BBFFFF;
	border-right:1px solid yellow ;
	border-top:1px solid yellow 
}

td.tab-3d-ml-uns {
	border-left:1px solid yellow ;
	width:5px; height:20px;
	background: #ffffff url(/CAT/images/nonsel.gif) repeat-x top left;
	
}	

td.tab-3d-mm-uns {
	background: #ffffff url(/CAT/images/nonsel.gif) repeat-x top left;
	width:20px; height:20px;
	
}

td.tab-3d-mr-uns {
	background: #ffffff url(/CAT/images/nonsel.gif) repeat-x top left;
	width:5px; height:20px;
	border-right:1px solid yellow 
}

td.tab-3d-bl-uns {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	border-left:1px solid yellow ;
}
td.tab-3d-bm-uns {
	background-image: url(/CAT/images/dot.gif);
	width:20px; height:5px;
	
}

td.tab-3d-br-uns {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	border-right:1px solid yellow;
}

<window>
	       	
		<tabbox panelSpacing="4">
		    <tabs >    
		        <tab label="First" />        
		        <tab label="Second"/>        
		    </tabs>    
		    <tabpanels>    
		        <tabpanel>The first panel.</tabpanel>        
		        <tabpanel>The second panel</tabpanel>        
		    </tabpanels>    
		</tabbox>
</window>

<window>
	    <style src="/css/cat-tabs.css"/>
    	
		<tabbox panelSpacing="4">
		    <tabs >    
		        <tab label="First" />        
		        <tab label="Second"/>        
		    </tabs>    
		    <tabpanels>    
		        <tabpanel>The first panel.</tabpanel>        
		        <tabpanel>The second panel</tabpanel>        
		    </tabpanels>    
		</tabbox>
</window>

Here is how the modified version looks

Ok i will finish this in a hurry. But before i go, i must thank the ZK folks for few things - documentation in version 3 is improved and things look even better with the release of your books. I have read one of them. Also please document your JSF support.

Comments