Jump to:

1347 Posts in 439 Topics by 514 members

Themes

SilverStripe Forums » Themes » Change css or themes depending on screen size and resolution

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 22044 Views
  • edenview
    Avatar
    Community Member
    13 Posts

    Change css or themes depending on screen size and resolution Link to this post

    I have been using javascript and css together with Mysite/Code/Page.php and comes up with bugs because of typography.css and form.css.

    I am trying to intergrate the following javascript and think it would be better to change theme depending on screen resolution:

    $(document).ready(function() {

       if ((screen.width>=1024) && (screen.height>=768) && (screen.colorDepth>12))
       {
          $("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/HighQ_Large.css"});
       }
       
       if ((screen.width>=1024) && (screen.height>=768) && (screen.colorDepth<=12))
       {
          $("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/LowQ_Large.css"});
       }

       if ((screen.width<=1024) && (screen.height<=768) && (screen.colorDepth>12))
       {
          $("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/HighQ_Small.css"});
       }

       if ((screen.width<=1024) && (screen.height<=768) && (screen.colorDepth<=12))
       {
          $("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/LowQ_Small.css"});
       }
       
       else
       {
          $("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/HighQ_Large.css"});
       }
    });

  • Shauna G
    Avatar
    Community Member
    52 Posts

    Re: Change css or themes depending on screen size and resolution Link to this post

    You might want to check out this article on CSS-Tricks to achieve what you're looking to do. For most browsers and devices, you don't even need JavaScript for basic stylesheet changes, and for things that don't support the CSS way yet, the article shows you a jQuery method, which you should be able to use as a fallback.

  • edenview
    Avatar
    Community Member
    13 Posts

    Re: Change css or themes depending on screen size and resolution Link to this post

    Thanks heaps!

    It was exactly what I needed and soo easy to implement with Silverstripe.

    No refresh problems any more!

    Thanks so much.

    Edenview Photography

  • Carrie_Lang
    Avatar
    Community Member
    24 Posts

    Re: Change css or themes depending on screen size and resolution Link to this post

    Could someone explain a little bit how to get this resolution dependent layout work with ss. I'm wondering do I need to do something with lines like <% require themedCSS(layout) %> in the template.

  • stallain
    Avatar
    Community Member
    61 Posts

    Re: Change css or themes depending on screen size and resolution Link to this post

    Hi,

    What I did for my personal website is create a new stylesheet with media queries, and then add it to my page.ss with <% require themedCSS(newstylesheet) %> - you can check the source code if you like : http://www.stanallain.fr

  • Carrie_Lang
    Avatar
    Community Member
    24 Posts

    Re: Change css or themes depending on screen size and resolution Link to this post

    Thanks! That helped me a lot

    22044 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.