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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Themes /

Discuss SilverStripe Themes.

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

Multiple page width theme


Go to End


4 Posts   2077 Views

Avatar
thepleb

Community Member, 22 Posts

23 June 2011 at 3:52am

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
Avatar
Willr

Forum Moderator, 5523 Posts

25 June 2011 at 5:19pm

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/

Avatar
thepleb

Community Member, 22 Posts

5 July 2011 at 3:15am

Edited: 05/07/2011 3:20am

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,

Avatar
martimiz

Forum Moderator, 1391 Posts

7 July 2011 at 8:30am

Edited: 07/07/2011 8:31am

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 :-)