Cafe Pro – front-page header background image with slider

[nicolat]

Hi,

Does anyone know how to replace the front-page header background image with a slider (eg Soliloquy)?

Thanks,

Nicola

[Cathy @ WPBarista]

Hi Nicolat,

The front page on that theme is a combination of javascript, functions in the home.php file and special css under "home" in the stylesheet. Are you able to edit javascript? (Cause thats out of my league!) I had a look for you though and it will be a lot more complicated than its worth. If I were you - I'd find a theme with a background that has that functionality built in (the slider) and then its easy to add a sticky nav to the top and widgets to the bottom.

You can also get support for individual themes through the support desk if you've purchased it at studiopress.

---

Visit WP Barista to download 52 Quick Edits You Can do Today to Get More Clicks / Views / Sales. I also do paid support (starting at $75) and fully custom Genesis Child Themes.

[Dave Shuttleworth]

I've just done this for a customers website (you can see it here: Grameen Spice), and there is an easier way to do it than faffing around with javascipt and hooks, etc.

1) In the stylesheet find the front page header image properties and set the height to 0 - this hides it from the front page.

2) In the functions & front page php files create a new widget block - put it at the top of the home page widgets obviously.

3) In the home page php file give this new widget a new style instead of "image-section" - I called mine slider-section.

4) Copy the relevant image-section CSS and rename it slider-section - stick it at the bottom of the stylesheet.

5) Fiddle with CSS after you've added a slider to style it how you like.

6) I used the smart slider 3 plugin for my slider - create the slider, then use the slider widget to put it into your new widget area you created in (2) above.

Not the "best" or "proper" way of doing things I suppose since the header image is still there, it's just hidden, but it works.

[Author]

Posts