Please note, this is a STATIC archive of website www.themepunch.com from 28 Sep 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Adjust Page Styles based on Current Slide

home_topbanner

For this example, we'll change the background color of the page based on a "Custom Field" addition to each slide.

1. Edit one of your slide's, and then in the "General Slide Settings", add one of the following to the "Custom Fields" section:

custom-fields

2. Next, add some custom styles for "sr-light" or "sr-dark" (we'll preface the "data-color" value with "sr-" to help avoid CSS naming conflicts).

3. Finally, add the following Custom JavaScript:

This effectively adds either the "sr-light" or "sr-dark" class to the body element of the page.

body-class

And now since the custom class name is being added to the "body" element, this allows for many possibilities. Here's an example: