setting class attributes in .css file using session variables

Bootstrap Studio Help
1

Hi

Is there a way to set a class attribute in the .css file with session variables. So I'm setting a class for particular item e.g. custom-background class. But this custom-background gets set eveyday using a different color read from the database. In theory, I want the class to look like:

.custom-background

width:100px;

height:100px;

background-color: sessionStorage.getItem('todaysBackground');

is this achievable in boostrap?

regards, zaire

2

I dont know about bootstrap but i think this is possible with django.

3

Take a look at this

https://stackoverflow.com/questions/41484551/changing-image-based-on-day

4

You can use JS code to update the class on an element based on day which you would then create a class for each day you want the background to change.

For example:

.custom-background {
  width:100px;
  height:100px;
  background-color: white;
}

.custom-background.monday {
  background-color: blue;
}

.custom-background.tuesday, .custom-background.wednesday {
  background-color: grey;
}

.custom-background.thursday {
  background-color: ;
}

.custom-background.friday {
  background-color: red;
}

There's an easter egg in that :)

Then you'd create some JS code that based on the day, you would remove the classes of any day that is not today and then set the class of today's. On second thought, it might be easier to use a data- attribute modifier to simply change the value rather than clearing and setting classes for something like this.

Saj

5

Actually this would work fine.

function checkDay(){
  var d = new Date(),
      dNames = ["sunday","monday","tuesday","wednesday","thursday","friday","saturday"],
      tDay = d.getDay();
  $(".custom-background").addClass(dNames[tDay]);
}
$(function(){
  checkDay();
});

Doesn't need to clear out any classes because the only added class would be today's class. And because you're changing the class, you can CSS modify anything then. i.e. Font/Size/Style border background-image/color etc..

Saj