[rating itemreviewed=”How to Make Animated Skills Bar with CSS3″ rating=”10″ reviewer=”Filiz ÖZER” dtreviewed=”18.04.2013″ summary=”Best tutorial for jQuery Style Switcher! Thanks for this” best=”10″ worst=”0″][/rating]

We are continuing to write educational articles about web design. In this tutorial, we will see how to make an amazing jQuery style switcher with colorpicker script. The colorpicker script has been design and development from EyeCon web development club. You can use this jQuery style switcher on a personal or commercial usage. If you are web designer or developer, this tool very important for you! With this tool you can show a lot of different styles like change background images, background colors, links colors, H tag colors and much more.

Live Preview Download Now

This is an awesome skills bar section developed from Daily Design Notes team. If you want use this section for free, just click download button and get it!

Step #1 – add js files

At first step, you can add codes below to the your header area. We recommended before the “body” tag.

Step #2 – add css files

At second step, you can add codes below to the your header area like step #1. This files are switcher css’s.

Step #3 – call standard css

In the third step you can add codes below for standard switcher codes. I added example body background color and link colors. These codes are deafult for your demo.

Step #4 – add switcher

The fourth step, we show you how to add swithcer to the your design. Copy codes below and paste very your want to show your style switcher. For example you can add your header or footer area, this switcher will showing fixed left side.

		

			

            	 
                    

                        

                            Background
                            

                                 
                            
                        
                    
					

						

							
							
							
							
							
							
							
							
							
                            
							
							
							
							
							
						
					
                    
                    

                        Link Colors
                            

                                
                                     					
                            
                    
                    
				
			
		

Let’s look at all of the code

We are showing you all the code above. Just copy and paste to the your theme / template file.

        

    




		

			

            	 
                    

                        

                            Background
                            

                                 
                            
                        
                    
					

						

							
							
							
							
							
							
							
							
							
                            
							
							
							
							
							
						
					
                    
                    

                        Link Colors
                            

                                
                                     					
                            
                    
                    
				
			
		

How to use the switcher?

If you are done for all steps, we will show you how to use the switcher are below. Open your changer.js file from the styleChanger folder. You can edit stlChaner lines like “a, h1, h2, h3, h4, h5, h6” we added these lines for like my demo. These codes will change your link colors and H tag colors.

Change links and H tags colors

	/* Color Scheme */
	jQuery('#stlChanger .hdrStBgs .hdrCols span').click(function(){
		var hdrCol = jQuery(this).attr('title');
		
		jQuery('#stlChanger .hdrStBgs .hdrCols span').removeClass('current');
		jQuery(this).addClass('current');
		
		jQuery('#stlChanger').find('#cFontWColor1').css({backgroundColor:'#' + hdrCol});
			jQuery('#cFontStyleWColor2').text('a, h1, h2, h3, h4, h5, h6 {color:#' + hdrCol + ';}');
		return false;
	});
	
	/* Color Scheme */
	jQuery('#stlChanger #cFontWColor1').parent('a').ColorPicker({
		onChange:function(hsb, hex, rgb){
			jQuery('#stlChanger').find('#cFontWColor1').css({backgroundColor:'#' + hex});
			jQuery('#cFontStyleWColor2').text('a, h1, h2, h3, h4, h5, h6 {color:#' + hex + ';}');
		},
		onSubmit:function(hsb, hex, rgb, el){
			jQuery('#cFontStyleWColor2').text('a, h1, h2, h3, h4, h5, h6 {color:#' + hex + ';}');

			jQuery(el).find('#cFontWColor1').css({backgroundColor:'#' + hex});
			jQuery(el).find('#cFontWColor1').attr({title:hex});
			jQuery(el).ColorPickerHide();
		},
		onBeforeShow:function(){
			jQuery(this).ColorPickerSetColor(jQuery('#stlChanger').find('#cFontWColor1').attr('title'));
		}
	});

Change background colors

We show here how to change the background color with these code are below. Just edit or change the body tags.

	/* Background Color */
	jQuery('#stlChanger #cFontWColor4').parent('a').ColorPicker({
		onChange:function(hsb, hex, rgb){
			jQuery('body').removeAttr('style');
			jQuery('#stlChanger').find('#cFontWColor4').css({backgroundColor:'#' + hex});
			jQuery('#cFontStyleWColor4').text('body {background-color:#' + hex + ';}');
		},
		onSubmit:function(hsb, hex, rgb, el){
			jQuery('body').removeAttr('style');
			jQuery('#cFontStyleWColor4').text('body {background-color:#' + hex + ';}');
			jQuery(el).find('#cFontWColor4').css({background:'#' + hex});
			jQuery(el).find('#cFontWColor4').attr({title:hex});
			jQuery(el).ColorPickerHide();
		},
		onBeforeShow:function(){
			jQuery(this).ColorPickerSetColor(jQuery('#stlChanger').find('#cFontWColor4').attr('title'));
		}
	});

That’s it.! This is end of our little tutorial. I hope you benefit from this simple example. Always suggestions and possible corrections are welcome. Please share your comments with us if you have any questions or say “thanks” 🙂

Our last article was about How to Make Animated Skill Bars with CSS3. We recommend you to read it also and please share this article on your social media profiles and also bookmark us.