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.

Overview

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
    (/wp-content/themes/Karma/)
  4. Upload the downloaded page template to your website and overwrite the existing page template:
    (template-homepage-jquery-2.php)
  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