How do I insert a full size (full bleed) image into the jQuery 2 slider?

Posted in: , ,
Please note: This customization does not currently work in Responsive Design.


This article describes how to insert a full size image into the jQuery 2 slider. Adding a full width image requires some minor theme modifications which are outlined below.

(click screenshot for full-size view)

General Instructions:

Here are the steps for inserting a full-size (or full-bleed) banner image into the jQuery2 homepage slider:

  1. Create the full-size banner image to be used in the slider
    The dimensions of this banner image will be 920px x 360px
  2. Download this custom page template (it’s a slightly modified version of the jQuery2 homepage template)
  3. Connect to your web server via FTP and access the Karma theme folder
  4. Upload the downloaded page template to your website and overwrite the existing page template:
  5. Log into your WordPress Dashboard
  6. Add the CSS code listed below into Karma’s Site Options Panel: Appearance > Site Options > Styling and CSS > Custom CSS
  7. That’s it! Now create your slider post just as you normally would and your full-size image will take up the full width of the jQuery2 slider.

Custom CSS Code:

.home-banner-sub-full {background:none !important; height:360px !important; position:absolute !important; right:10px !important; top:10px !important; width:920px !important;}
.home_jquery_two_full_image {width:920px !important; height:360px !important;}
.home-banner-sub-content-full {margin:0px !important;}

Important: If there is still a gap to the right of the image, then also add this code:

.home-banner-sub-content-full img {max-width:none !important}

Please Note: If you upgrade the Theme, you will loose the template-homepage-jquery-2.php Template. You will have to re-do the above steps since the Theme upgrade overwrites all the Theme’s files.

full bleed image, full size jquery-2, jquery slider full width image