Multiple CSS changes for Holiday Decor

Bootstrap Studio Help
1

I have a couple clients that are Holiday types... if you know what I mean ... They love to decorate everything and that includes their websites. What I'm wondering is if anyone has any suggestions on how to go about swapping out CSS code during things like this since we don't really have comment ability where we can have one live while not the other (well I suppose we do if we check and uncheck all the properties of a class each time, but that could get messy). I have a feeling I'm going to be alternating a lot of classes a lot of times a year for this and would love some input of ideas on the best way to accomplish this in BSS. Thanks!

P.S. Right now I'm thinking the only thing we have is that I'd have to create a duplicate and add the holiday name to it, then uncheck every property in the original as well as any other holiday duplicates, and check the ones in the class I want to have active at the time. This is doable, but as I said it could get messy when you're dealing with a dozen holidays or so for each of who knows how many classes and ID's lol. Seems like there should be a simpler way to just turn a class on and off like you would with a comment. Anyways, this option I'm aware of so any others would be appreciated.

2

Well your pretty much right, you would put a holiday class at the body element level.

< body class="christmas">

Then in your CSS you would make duplicate CSS rule(s) for the specific holiday CSS rule(s)

For example:

no holiday/normal

.main-content{
    font-size:1em;
    line-height:1.4;
    background-image:local-city-scape.png;
    background-repeat:no-repeat;
}

christmas holiday

.christmas .main-content{
    background-image:santa-sleigh.png;
}

easter holiday

.easter .main-content{
    background-image:bunny.png;
}

You then only need to edit your HTML to switch the holiday classes when you need to.

You only need to make rules for the parts of your CSS where you need to make changes, only the rule(s) and the needed property(ies):value.

One thing I just was thinking about for this is it could be possible to use JS to set the class on the body dynamically by using a switch case test.

$(function(){
    var setHoliday = 0; //set holiday value 0 = none, 1 = christmas, 2 = easter etc...
    switch (setHoliday){
        case 0: //if zero do nothing
            break; //end test
        case 1: //if 1
            $("body").addClass("christmas"); //add class "christmas" to the body element
            break; //end test
        case 2: //if 2
            $("body").addClass("easter"); //add class "easter" to the body element
            break; //end test
    }
    // this is similar to a normal if/else if testing I kind like it for somethings
    // you'd just add more case(s) with their relevant class to add
    // and then add break; after to stop the rest of the script from processing
    // then all you would need to do is change var setHoliday = x;
    // for when the holiday comes up to automatically switch your css to that set of rules
});

Saj

3

Although I'm not there yet for being able to totally understand how to manipulate that script, I have learned some and understand what you're getting at with it. That might be a good goal for me to learn how to do that as I learn Javascript! Goals are nice, they give me better purpose for learning than just blindly following examples does lol. Thanks for that idea. Other than that, yeah the rest is what I figured it would need to be.

Now... if we had the ability to edit the CSS to add comments... that would fix most of this right up too as we could just comment and uncomment classes and id's without giving them holiday names (put the name in the comment instead of the class basically). It would still be some work but you can do a search for the holiday names to find any scripts that need commenting or removing of comments which would be faster than trying to edit the HTML would be I think. Maybe not, not sure lol. I'll mull it over some and see if anything else comes to mind, but I like your idea of using the switch using JS.

4

I hope that you are getting that your CSS file would look like this :)

...
.main-content{
    font-size:1em;
    line-height:1.4;
    background-image:local-city-scape.png;
    background-repeat:no-repeat;
}
.christmas .main-content{
    background-image:santa-sleigh.png;
}
.easter .main-content{
    background-image:bunny.png;
}
...

No comments necessary.

But yes the HTML is the one needing to always change the classes for the season which is why I was thinking the script would do that in a single file you'd just change that one variable from 0 or 1 or 2 etc...

Adding or removing comments I thinking would probably be more work then switching in/out a holiday class name. It is also possible that you could set the JS to work off of calendar dates but that's a bit more tricky.

I don't do the JS thing I change the HTML on a site I do for a client that has a spring time guide for a couple weeks. A couple background images and such get switched in the CSS just by adding/removed a class in the HTML on like 3 files I think it is.

Saj

P.S. Ha, that script totally works as is, just tested it for my self :) If you want just give me the holidays and I'll write out a working version for you. :) All it will do is add a class to the Body element based on which script variable will be set for setHoliday. Just give me a list of the holiday classes you are going to use. You won't need to do anything HTML just CSS and include this extra script file that you will set the var setHoliday = [value]; to.

5

Yeah I do understand what you meant on the CSS with changing out the various holiday classes. Nice that the script works as is lol, good job! The holidays so far that have been used are:

New Year's Day Valentine's Day St. Patrick's Day Mardi Gras Easter Mother's Day Memorial Day Father's Day Labor Day (not much done on this one though) Sweetest Day Halloween Veteran's Day Thanksgiving Day Christmas

Appreciate the help!

6

Ok, so I created 2 scripts and I tested that both work. Setting the var setHoliday = [value]; to any one of the appropriate holiday numbers does add the appropriate class to the body element. These 2 scripts require jQuery to run so the site you want them on needs to use jQuery. If it doesn't then a vanilla JS script needs to be written instead.

You can use "either one" that you are more comfortable with using. I made an assumption of the classes names so change those accordingly to what you want. The second script in theory is supposed to execute slightly quicker then script 1.

The only real gotcha on doing it this way using JS is that if there is a delay in the execution of the script, you might see the site actually switch styles. :)

In the app just right click on Javascript in the Design pane and select "Create JS". Then double click on the untitled.js and copy/paste one of the 2 scripts and then click the APPLY button above.

Script #1 My original switch case

$(function(){
    // New Year's Day = 1, Valentine's Day = 2, St. Patrick's Day = 3, Mardi Gras = 4
    // Easter = 5, Mother's Day = 6, Memorial Day = 7, Father's Day = 8
    // Labor Day = 9, Sweetest Day = 10, Halloween = 11, Veteran's Day = 12
    // Thanksgiving Day = 13, Christmas = 14
    // no holiday = 0;

    var setHoliday = 0;
    switch (setHoliday){
        case 0:
            break;
        case 1:
            $("body").addClass("new_years_day");
            break;
        case 2:
            $("body").addClass("valentines_day");
            break;
        case 3:
            $("body").addClass("st_patricks_day");
            break;
        case 4:
            $("body").addClass("mardi_gras");
            break;
        case 5:
            $("body").addClass("easter");
            break;
        case 6:
            $("body").addClass("mothers_day");
            break;
        case 7:
            $("body").addClass("memorial_day");
            break;
        case 8:
            $("body").addClass("fathers_day");
            break;
        case 9:
            $("body").addClass("labor_day");
            break;
        case 10:
            $("body").addClass("sweetest_day");
            break;
        case 11:
            $("body").addClass("halloween");
            break;
        case 12:
            $("body").addClass("veterans_day");
            break;
        case 13:
            $("body").addClass("thanksgiving_day");
            break;
        case 14:
            $("body").addClass("christmas");
    }
});

Script 2 the more traditional if/else if testing

$(function(){
    // New Year's Day = 1, Valentine's Day = 2, St. Patrick's Day = 3, Mardi Gras = 4
    // Easter = 5, Mother's Day = 6, Memorial Day = 7, Father's Day = 8
    // Labor Day = 9, Sweetest Day = 10, Halloween = 11, Veteran's Day = 12
    // Thanksgiving Day = 13, Christmas = 14
    // no holiday = 0;

    var setHoliday = 0;
    if (setHoliday == 0){
    }else if (setHoliday == 1){
        $("body").addClass("new_years_day");
    }else if (setHoliday == 2){
        $("body").addClass("valentines_day");
    }else if (setHoliday == 3){
        $("body").addClass("st_patricks_day");
    }else if (setHoliday == 4){
        $("body").addClass("mardi_gras");
    }else if (setHoliday == 5){
        $("body").addClass("easter");
    }else if (setHoliday == 6){
        $("body").addClass("mothers_day");
    }else if (setHoliday == 7){
        $("body").addClass("memorial_day");
    }else if (setHoliday == 8){
        $("body").addClass("fathers_day");
    }else if (setHoliday == 9){
        $("body").addClass("labor_day");
    }else if (setHoliday == 10){
        $("body").addClass("sweetest_day");
    }else if (setHoliday == 11){
        $("body").addClass("halloween");
    }else if (setHoliday == 12){
        $("body").addClass("veterans_day");
    }else if (setHoliday == 13){
        $("body").addClass("thanksgiving_day");
    }else if (setHoliday == 14){
        $("body").addClass("christmas");
    }
});

Saj