In Cafe Pro by default site title and site description appear centered on top of a big fixed background image below the Before Header section. In this tutorial I show how we can replace this background image with a slider.
Overview of the steps:
- Remove the front page header from automatically getting inline height via JS to ensure that the solution works in a responsive manner.
- Insert Soliloquy (commercial plugin) slider in a function hooked togenesis_header on the front page.
- Float the title area using absolute positioning relative to the front page header using CSS.
Step 1
In home.js inside the js directory, comment out or delete both the instances of
| $('.front-page-header') .css({'height': newHeight +'px'}); |
by 
Step 2
Install and activate Soliloquy. Create a slider named say, 'Home Slider' and upload your desired slide images. Use images that are big and wide or as per your design needs. Images used in the demo site are 1600 x 1034.
In the 'Config' tab, select 'Full Width' for Slider Dimensions. Set the width of your slide images in the width field. Set the height to how tall/high you want the slider to be. In the demo site, I used 700.
Step 3
In front-page.php add the following before closing genesis();:
