I am working to create a radio button list in the CMS on every page so that an option can be selected that will change the CSS files that are used according to which button is selected.

For example my list is a simple list of colour options, eg. Green, Blue, Red etc

I would like the user to have the option to select a set of css rules by simply clicking one of the radio buttons in the CMs for each page.

This means that one page could be green, and another could be blue and another could be red etc.

I have successfully developed the list of radio buttons which appear correctly on every page, by including the code below on my page.php

<CODE>

function getCMSFields() {
$fields = parent::getCMSFields();

$fields->addFieldToTab('Root.Content.Main', new OptionsetField(
$name = "CSStheme",
$title = "CSSthemes",
$source = array(
"1" => "Green",
"2" => "Blue",
"3" => "Red",
"4" => "Pink",
"5" => "Orange",
"6" => "Yellow",
"7" => "Black"
),

$value = "1"
));

return $fields;
}

</CODE>

This creates the list in my CSS on every page because it is on the page.php, which is being used as the base for all my pages.

The second piece of code that I have is below.

<CODE>

class Page_Controller extends ContentController {

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

if($this->CSStheme == '1'){
Requirements::css("mysite/css/greenlayout.css"); Requirements::css("mysite/css/greentypography.css");
}
if($this->CSStheme == '2'){
Requirements::css("mysite/css/bluelayout.css"); Requirements::css("mysite/css/bluetypography.css");
}
if($this->CSStheme == '3'){
Requirements::css("mysite/css/redlayout.css"); Requirements::css("mysite/css/redtypography.css");
}
if($this->CSStheme == '4'){
Requirements::css("mysite/css/pinklayout.css"); Requirements::css("mysite/css/pinktypography.css");
}
if($this->CSStheme == '5'){
Requirements::css("mysite/css/orangelayout.css"); Requirements::css("mysite/css/orangetypography.css");
}
if($this->CSStheme == '6'){
Requirements::css("mysite/css/yellowlayout.css"); Requirements::css("mysite/css/yellowtypography.css");
}
if($this->CSStheme == '7'){
Requirements::css("mysite/css/blacklayout.css"); Requirements::css("mysite/css/blacktypography.css");
}
}

This part of the code I believe is supposed to differentiate the different radio button options by specifying which CSS to use depending on what button is selected.

Now is where I become a bit lost, so bear with me. I do not know how to call this function on my page.ss so that the correct CSS is used.

I have been trying things along the lines of <% require themedCSS(layout) %> just after the base_tag in the head, where i swap the themedCSS to CSStheme or css.

I also tried to include things like

<% if CSStheme(2) %>
$init
<% end_if %>

or

<% if CSStheme(Blue) %>
$init
<% end_if %>

I simply do not know how to call the function on the page.ss, so if anybody is willing to help me out with this I would be greatly appreciative. I really am not all that confident with php and functions, but I feel like I am so close, but cant quite seem to get there.

Thanks in advance people.

You don't have to call init yourself. It will automatically be called on every Page load. Actually, your code should be working. Please check the generated HTML Source code if any of the CSS files are getting included.

Ok so advancements have been made. now I have achieved the inclusion of all the right CSS files for my page.ss

When I load a page it loads all the CSS files though and ends up being the colour of the last file, in my case black.

<CODE>

<% if CSStheme == 1 %>
<% require css(themes/ontherecord/css/greenlayout.css) %>
<% require css(themes/ontherecord/css/greentypography.css) %>

<% else_if CSStheme == 2 %>
<% require css(themes/ontherecord/css/bluelayout.css) %>
<% require css(themes/ontherecord/css/bluetypography.css) %>

<% else_if CSStheme == 3 %>
<% require css(themes/ontherecord/css/redlayout.css) %>
<% require css(themes/ontherecord/css/redtypography.css) %>

<% else_if CSStheme == 4 %>
<% require css(themes/ontherecord/css/pinklayout.css) %>
<% require css(themes/ontherecord/css/pinktypography.css) %>

<% else_if CSStheme == 5 %>
<% require css(themes/ontherecord/css/orangelayout.css) %>
<% require css(themes/ontherecord/css/orangetypography.css) %>

<% else_if CSStheme == 6 %>
<% require css(themes/ontherecord/css/yellowlayout.css) %>
<% require css(themes/ontherecord/css/yellowtypography.css) %>

<% else_if CSStheme == 7 %>
<% require css(themes/ontherecord/css/blacklayout.css) %>
<% require css(themes/ontherecord/css/blacktypography.css) %>

<% end_if %>

</CODE>

So this is the code i have on my Page.ss

It loads all of the files though, so I am guessing that my RadioButtonList is not working properly. And on further inspection I notice that when I select a colour theme from the CMS with the radio buttons and Save and Publish, it always seems to reset to the original when I re-edit the page?

Any ideas?

Hi Roony!

As banal explained, your code should be working IF your Page model had a CSStheme attribute:

public static $db = array(
	'CSStheme' => 'Int', // Or 'Enum'
);

Take a look at SS data model. Also, you don’t need requirements both in init() and in the template. The former should suffice.

If I got you well. Regards,
Juan

Okay well, the code went through numerous changes and tweaks but we finally got it all working perfectly. Oh man what a relief.

<CODE>

<?php

class Page extends SiteTree {

public static $db = array(
"CSSTheme" => "Varchar(100)"
);

public static $has_one = array(
);

public static $defaults = array(
"CSSTheme" => "black"
);

function getCMSFields() {
$fields = parent::getCMSFields();

$fields->addFieldToTab('Root.Content.Main', new OptionsetField(
$name = "CSSTheme",
$title = "CSSThemes",
$source = array(
"green" => "green",
"blue" => "blue",
"red" => "red",
"pink" => "pink",
"orange" => "orange",
"yellow" => "yellow",
"black" => "black"
)
));

return $fields;
}

}

class Page_Controller extends ContentController {

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

Requirements::themedCSS($this->CSSTheme."layout");
Requirements::themedCSS($this->CSSTheme."typography");

}

?>

</CODE>

With this I do not need and if, else statements in my Page.ss file. All i needed was this code and everything worked for me swimmingly and it also made the radio button list save its position when editing pages.

Now each page can be specified a different theme according to the colour selected in the CMS.

SPECIAL THANKS go to Zauberfisch and Martijn for all their patience with me, as I am only truly a beginner when it comes to silverstripe and php. Thanks for your help guys, and hope this thread helps a lot of other people.

Glad you got it sorted out. A much better solution compared to your previous code :)

A short explanation, why the following didn't work (for future reference):

<% if CSStheme == 1 %>
<% require css(themes/ontherecord/css/greenlayout.css) %>
<% require css(themes/ontherecord/css/greentypography.css) %>

<% else_if CSStheme == 2 %> 
...

First and foremost, you should use = as comparison operator in templates. NOT ==.
As far as I know, requirement calls cannot be nested in if/else statements in templates. They are just parsed and included and don't check for conditions. If you need conditional includes, put them in code as you did with the init method.

Banal is correct - requirements can't be conditional. However in 2.4 (as of rc1) you can thanks to a patch from simon_w which I believe was included so if your on 2.4rc1 you can enjoy! Reference - http://open.silverstripe.org/ticket/4188