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   25345 Views

Avatar
edenview

Community Member, 13 Posts

25 July 2010 at 7:46am

Edited: 25/07/2010 7:46am

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

Community Member, 52 Posts

3 August 2010 at 5:48am

Edited: 03/08/2010 5:48am

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

Community Member, 13 Posts

4 August 2010 at 9:11pm

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

Community Member, 24 Posts

30 June 2011 at 7:01am

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

Community Member, 61 Posts

16 July 2011 at 12:03pm

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

Community Member, 24 Posts

20 July 2011 at 4:08pm

Thanks! That helped me a lot