Conditional CSS

Override your website style definitions when 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.

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>
  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.

Categories

Date/Time, Examples, Inline Content

Related Assets
Countdown (timer)
🕐 Our next webinar

25.10 | 17:00 UTC

7:00 according to your time zone (Los_Angeles)

Event Invitation