Customize your website’s design if a condition is met

Override your website style definitions based on If-So conditions

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.

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:
.wrapper, .ifs-row, {
    background: #dfcab4;
  1. Leave the default content field blank
  2. 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.



Advertising Platforms, Date/Time, Geolocation

Realated templates and examples