Best way to change background images - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 18-Mar-2012 00:00

Hi,

i´am new in Sitefinity. We would build a template where the background image change based on "day time" and on "four seasons". How can i overwrite the css from a Template main.css with jquery.

Thanks

PS: Hope for some ideas

Posted by Community Admin on 19-Mar-2012 00:00

Hey TMatt,

You could do something like this:

// change background depending on user's time

datetoday = new Date();

timenow = datetoday.getTime();

datetoday.setTime(timenow);

thehour = datetoday.getHours();

if (thehour >= 18)

$('body').addClass('evening');

else if (thehour >= 15)

$('body').addClass('afternoon');

else if (thehour >= 12)

$('body').addClass('noon');

else if (thehour >= 7)

$('body').addClass('morning');

else if (thehour >= 0)

$('body').addClass('night');

else

$('body').addClass('general');

And define background images based on the classes...

Jochem.

Posted by Community Admin on 19-Mar-2012 00:00

Thanks for the tip,

i have now runnig some code like you posted.My question where is best place for the script.

I have no luck with script on website when i add the classes in main.css.
Only when i place the classes on page with css widget i get the results.

Posted by Community Admin on 19-Mar-2012 00:00

@TMatt,

That's because of the loading order. This script needs to be executed before the .CSS (other wise the body won't have the extra class yet). And since the snippet is jQuery, jQuery needs to be loaded prior to that.

So you first load jQuery, then load the script (set it to run at the head) and use the CSS rules in your main.css. Or set the script to run before the closing tag and add a styling widget onto the page and define the css rules on the widget.

The option script at the bottom runs faster because it doesn't halt page execution, the option with script at the top is 'cleaner' from a developer/maintenance perspective. so basically its up to you what works best...

Jochem.

This thread is closed