More in this section
Forums / Designing & Styling / Best way to change background images

Best way to change background images

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
4 posts, 1 answered
  1. TMatt
    TMatt avatar
    104 posts
    Registered:
    06 Feb 2011
    18 Mar 2012
    Link to this post
    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
  2. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    19 Mar 2012
    Link to this post
    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.
    3.
  3. TMatt
    TMatt avatar
    104 posts
    Registered:
    06 Feb 2011
    19 Mar 2012
    Link to this post
    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.
  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    19 Mar 2012
    Link to this post
    @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.
    Answered
4 posts, 1 answered