Customize your website’s design if a condition is met

Use If-So conditions to override your default style attributes.

The following demo shows a replacement of the page background color based on the Page URL condition (IF: Page URL > Contains > example?load-extra-css THEN: Load extra style attributes.

Live Example: Click to load this page again with a different style

Use Cases:

• Change the design of your website on holidays and special occasions (see how we dressed up our homepage for Halloween).
• Replace the background of your website at night or when the business is closed.
• Match the design of your site to the season of the year.
• Replace the colors of your site for users from different locations (based on the colors of their flag or sports team).

Step-by-step Guide:

In the current example, we loaded extra CSS code directly to the page. If you would like to load an extra stylesheet or to load a different stylesheet in place of the original one, you can learn how to do it here.

1. On your WordPress dashboard, go to “If-So → Add New Trigger”.
2. Click on “Select a condition” and set the condition for the conditional design.
3. In the dynamic version content field, make sure you are in “Text” mode, and enter your new style attributes between <style> tags. The following CSS was used to create the example on this page:

<style>
.wrapper, .ifs-row, {
    background: #dfcab4;
}
</style>

4. Leave the default content field blank
5. Press “Publish” and paste the shortcode generated by If-So anywhere on your page

* If you want to apply the changes on all of your website’s pages, you can apply the trigger on all pages through the plugin’s settings.