Jump to:

1384 Posts in 493 Topics by 522 members

Themes

SilverStripe Forums » Themes » Multiple page width theme

Discuss SilverStripe Themes.

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

Page: 1
Go to End
Author Topic: 1221 Views
  • thepleb
    Avatar
    Community Member
    15 Posts

    Multiple page width theme Link to this post

    Hi,

    I am moving my site over to a fixed width theme and I am trying to offer variable fixed widths (such as Normal, Wide, Widest and Mobile). Obviously I have Normal sorted and, with the mobile module, I have Mobile sorted, but I am unsure how to go about the other two. Basically the user should be able to go to any page and then click on a screen width and it render the content using a particular stylesheet, but remember what stylesheet it is using so when they click on a link it continues to display at the same width.

    Is there a way maybe I could extend the mobile module to just call different stylesheets instead of different templates, then extend it to additional widths (such as "fullSite=" for mobile, "fullSite=1" for normal, "fullSite=2" for wide and "fullSite=3" for widest)?

    Obviously if they are using a "mobile" device then it needs to display the mobile site first!

    Any help would be gratefully appreciated as I am meant to be getting the site live by Friday! Eeek!

    Many thanks.

    PS: Screenshot to show how I would ideally like it to work.

    Attached Files
  • Willr
    Avatar
    Forum Moderator
    5508 Posts

    Re: Multiple page width theme Link to this post

    Well like you said, the easiest option is to use a GET parameter like that. You could then combine that with the Requirements::css() call and Cookie (for long term caching). In your Page.php file (init())

    function init() {
    parent::init();

    // default theme is one
    $theme = 1;

    // check for a new version
    if(isset($_GET['fullSite'])) {
    $theme = (int) $_GET['fullSite'];
    // save to a cookie
    Cookie::set('fullSite', $theme);
    }

    // check for cached version
    $theme = ($option = Cookie::get('fullSite')) ? $option : $theme;

    switch ($theme) {
    case 2:
    Requirements::themedCSS('mid.css');
    break;
    case 3:
    Requirements::themedCSS('small.css');
    break;
    default:
    Requirements::themedCSS('main.css');
    break;
    }

    }

    If you want to change HTML instead of just CSS you could do the same idea but SSViewer::set_theme().

    Or if you want to be all chic and modern like everyone seems to be these days, use media queries to send different versions. alistapart.com/articles/responsive-web-design/

  • thepleb
    Avatar
    Community Member
    15 Posts

    Re: Multiple page width theme Link to this post

    Many thanks for getting back to me so quickly! I have added:

    // default theme is one
          $theme = 1;
          
          // check for a new version
          if(isset($_GET['fullSite'])) {
             $theme = (int) $_GET['fullSite'];
             // save to a cookie
             Cookie::set('fullSite', $theme);
          }
          
          // check for cached version
          $theme = ($option = Cookie::get('fullSite')) ? $option : $theme;
          
          switch ($theme) {
          case 1:
             SSViewer::set_theme("sbcdefault");
          break;
          case 2:
             SSViewer::set_theme("sbcdefaultwide");
          break;
          default:
             SSViewer::set_theme("sbcdefaultmobile");
          break;
          }

    to my Page.php file (yes I wanted a different template for each version) and it appears to work. However, moving between "Normal" and "Wide" requires clicking on the relevent link twice. Both times it calls the same page (i.e. ?fullSite=2 for the wide version), but only the second time uses the wide template. It is like the code is ignoring the new change in cookie and just using the previously set cookie (so the first time it sets the cookie but doesn't use it, then the second time it uses it).

    If I comment out:

    $theme = ($option = Cookie::get('fullSite')) ? $option : $theme;


    then the template change always happens immediately, but it doesn't seem to persist between pages, instead choosing to reset to "Normal".

    Does this make sense? Could it be something to do with the mobile module doing some additional work to the cookie?

    I could make a dummy site available if that helps, so you could see the fault in action...

    Many thanks,

  • martimiz
    Avatar
    Forum Moderator
    1086 Posts

    Re: Multiple page width theme Link to this post

    I think that might be normal behaviour when setting a cookie..? I'm not quite sure, but maybe session::set / Session::get would work richt away? That said, you can always add checking the GET var as well. Someting along this line (very basic, didn't test):

    $theme = '';

    if (isset($_GET['fullSite'])) {

       $theme = (int) $_GET['fullSite'];

       // save to a cookie
       if ($theme) Cookie::set('fullSite', $theme);
    }

    elseif ($value = Cookie::get('fullSite')) {

       // previous $value
       $theme = $value;
    }
    if (!$theme) $theme = <some default>;

    Hope this helps some

    1221 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.