Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Themes

Discuss SilverStripe Themes.

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

Change css or themes depending on screen size and resolution


Reply

6 Posts   24879 Views

Avatar
edenview

25 July 2010 at 7:46am (Last edited: 25 July 2010 7:46am), Community Member, 13 Posts

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"});
   }
});

Avatar
Shauna G

3 August 2010 at 5:48am (Last edited: 3 August 2010 5:48am), Community Member, 52 Posts

You might want to check out [url="http://css-tricks.com/resolution-specific-stylesheets/"]this article on CSS-Tricks[/url] 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.

Avatar
edenview

4 August 2010 at 9:11pm Community Member, 13 Posts

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

Avatar
Carrie_Lang

30 June 2011 at 7:01am Community Member, 24 Posts

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.

Avatar
stallain

16 July 2011 at 12:03pm Community Member, 61 Posts

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 : [url]http://www.stanallain.fr[/url]

Avatar
Carrie_Lang

20 July 2011 at 4:08pm Community Member, 24 Posts

Thanks! That helped me a lot