Conditional CSS – Demo & 3 Simple Setup Methods

Utilize conditional CSS to dynamically change your website design by overriding the style.css file when specific conditions are met.
conditional css

Want to change the design of your page using If-So’s conditions? You can do so with (dynamic) conditional CSS file changes.

By replacing your style.css file or by loading an additional one, you can easily change the look of your website. With conditional CSS, you have endless possibilities to make small design tweaks or completely transform your page’s look and feel.

livedemocharacterLive 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.
  • Change the design of your site based on 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).
More personalization examples

3 ways to set up conditional design

Changing the style CSS of your site is possible in three ways:

  1. Adding custom styles directly inside a trigger version (Recommended unless your changes are extensive).
  2. Loading an extra stylesheet that will override some of the classes of the original stylesheet.
  3. Loading a different stylesheet in place of the original one.

Adding custom styles directly inside a trigger version (Recommended unless your changes are extensive).

Option 1: How to load an additional stylesheet based on an If-So condition?

You can apply CSS conditionally using If-So by adding custom styles directly inside a trigger version. This allows you to load specific styling only when the version’s condition is met.

To do this, wrap your CSS inside <style> tags within the version’s content field. For example:

<style>
    .Halloween-banner {
        background-color: #ffeb3b;
    }
</style>

When the conditions for this version are met, both the CSS and the HTML will be loaded. When the conditions are not met, the CSS will not be included on the page.

This method is useful for:

  • Applying custom styles to location-based versions
  • Changing colors, sizes, or layout only for specific audiences
  • Styling dynamically displayed blocks without editing your theme or global CSS

Step-by-step: Add conditional CSS inside a version

  1. Create a trigger and select the condition you want to use (for example, Geolocation or URL).
  2. In the conditional version’s content field, switch the editor to HTML/Code mode.
  3. Add your CSS inside <style> tags, followed by the HTML that uses those styles.

Option 2: How to load an additional stylesheet based on an If-So condition?

  1. Create a new conditional CSS stylesheet and upload it to the root directory of your theme. (i.e “dynamic-style.css”).
  2. Create a new If-So trigger.
  3. In Version A, set a condition and then paste the name of your new style file. (i.e “dynamic-style.css”)
  4. Leave the Default Version blank.
  5. Open your functions.php file and paste the following code at the bottom of the file. Make sure to replace the trigger ID with your trigger ID (ifso id=”XXX”).
add_action('wp_enqueue_scripts',function(){
    wp_enqueue_style( 'ifso-custom-style', get_template_directory_uri() . '/' . do_shortcode('[ifso id="646"]') , array() );
});

That’s it! Every time the condition is met, the new stylesheet will be loaded.

Option 3: How to replace the original style.css if a condition is met

  1. Duplicate the style.css file and name the duplication style2.css (make sure to place the file in the same directory as the original style.css file).
  2. Find the URL of your theme style.css file.
    • Open the site in your browser.
    • Click F12, “Network”, “CSS”, and refresh the page.
    • Find your theme style.css file (there might be several style.css files, so hover over each one to see its path and make sure you click on the one that belongs to your theme).
    • Click on it and copy the file URL.
  1. Create a new trigger
  2. Paste the URL you have copied in the default version content field.
  3. In Version A, set a condition, paste the URL of your style.css file, and change the name in the URL to style2.css
  4. Find the enqueue function that “calls” your style.css file. It should look something like this:  
 wp_enqueue_style( 'STYLESHEET URI', get_stylesheet_uri() );

* The value ”STYLESHEET URI” can be anything. It will be whatever the developer of your site named it.

Depending on your theme and how it is built, there are several places in which the enqueue function can be found. Usually, it will be in the function.php file which can be found in the main directory of the theme.

7. Once you find the enqueue function, simply replace the second parameter of the function, “get_stylesheet_uri()”, with the following:

do_shortcode('ifso id="XXX"]')

Make sure to replace the “XXX” with the ID of the trigger you created in the previous steps.

This is what the whole function should look like in the end:

wp_enqueue_style( 'YOUR-STYLE-SHEET-NAME', do_shortcode('[ifso id="XXX"]') );

That’s it! As they say, the devil is in the details, and with If-So, just like that, you’ve created a slightly new, or even a whole new look for your site.

Troubleshooting

If you followed this guide and the conditional CSS doesn’t seem to work, go to If-So > Settings on your WordPress Dashboard and uncheck the “the_content” filter option.

Related Articles