jQuery Sliders – Switch Image to the left and Text to the right

You can change the Appearance of the jQuery Slider and switch the Featured Image to show on the left and the Text to show on the right. To do this access your stylesheet style.css found: – via FTP in your server in /wp-content/themes/Karma/ or – via Appearance > Editor Open the file and look for the following lines of code:

For the jQuery (1)

line 806:

 .home-banner-main { width:350px; top:45px; left:45px; position:absolute; } 

And change the above code to the following:

 .home-banner-main { width:350px; top:45px; right:45px; position:absolute; } 

line 919:

 .home-bnr-jquery .home-banner-sub { width:432px; height:270px; background:url(images/_global/global-sprite.png) 0 -1188px no-repeat; top:13px; right:35px; position:absolute; } 

And change the above code to the following:

 .home-bnr-jquery .home-banner-sub { width:432px; height:270px; background:url(images/_global/global-sprite.png) 0 -1188px no-repeat; top:13px; left:35px; position:absolute; } 

line 944:

 .home-bnr-jquery .home-banner-main { width:375px; top:40px; left:45px; position:absolute; } 

And change the above code to the following:

 .home-bnr-jquery .home-banner-main { width:375px; top:40px; right:45px; position:absolute; } 

line 992:

 .home-banner-video-sub-alt { top:20px; right:20px; position:absolute; /* -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);     	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); */ } 

And change the above code to the following:

 .home-banner-video-sub-alt { top:20px; left:20px; position:absolute; /* -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);     	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); */ } 

For the jQuery (2 )

line 806:

 .home-banner-main { width:350px; top:45px; left:45px; position:absolute; } 

And change the above code to the following:

 .home-banner-main { width:350px; top:45px; right:45px; position:absolute; } 

line 813:

 .home-banner-sub { width:456px; height:309px; background:url(images/_global/shadowBG.jpg) 0 0 no-repeat; top:40px; right:40px; position:absolute; } 

And change the above code to the following:

 .home-banner-sub { width:456px; height:309px; background:url(images/_global/shadowBG.jpg) 0 0 no-repeat; top:40px; left:40px; position:absolute; } 

line 979:

 .home-banner-video-sub { padding: 10px; background:#FFF; border: 1px solid #D7D7D7; top:40px; right:40px; position:absolute; } 

And change the above code to the following:

 .home-banner-video-sub { padding: 10px; background:#FFF; border: 1px solid #D7D7D7; top:40px; left:40px; position:absolute; } 

(click screenshot for full-size view)