Conditional CSS- Demo & 2 Simple Setup Methods

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

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.

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

Set Up Conditional CSS – Step-by-Step Guide

Changing the style CSS of your site is possible in two ways:
1. Loading an extra stylesheet that will override some of the classes of the original stylesheet.
2. Loading a different stylesheet in place of the original one.

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

Create a new conditional CSS stylesheet and upload it to the root directory of your theme. (i.e “dynamic-style.css”).
Create a new If-So trigger.
In Version A, set a condition and then paste the name of your new style file. (i.e “dynamic-style.css”)
Leave the Default Version blank.
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('') , array() );
});

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

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

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

Create a new trigger
Paste the URL you have copied in the default version content field.
In Version A, set a condition, paste the URL of your style.css file, and change the name in the URL to style2.css
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('') );

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.