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.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Theme build within the admin to alter css in themes

Go to End

4 Posts   1042 Views


Community Member, 151 Posts

2 April 2014 at 5:17am

Hi all

So we are building a SaaS (software as a service) application, which has a number of different themes a user could choose. I then want to be able to offer my users the ability to customise their theme by selecting things like header colour, text colour, etc by entering #hex codes (i.e. #ff0000) in the SiteConfig table.

The issue i face is how to get this to pump into the themes css without doing inline styles within the page template? I need to keep it within css files and alter them on the fly.

I also cant save the changes to the css as they are common files amoungst all user.

One possibility i thought about was making an override file onBeforeWrite of SiteConfig, but thats going to get a little messy i think?

Any ideas?



Community Member, 17 Posts

13 April 2014 at 7:25am

Edited: 13/04/2014 7:55pm

Use a template as you would do to build a sitemap for example.
So would have something like this:

// I'm adding this to main page controller so it's accessible to all pages, feel free to change this

Page_Controller extends ContentController{
     // Create the action and make it visible to the browser
     private static $allowed_actions = array( 'mycss' );
     private static $visible_actions = array( 'mycss' );
     // Handle the action and make sure to add the css header
     public function mycss(){
		$this->response->addHeader( 'Content-type', 'text/css' );
		return $this->renderWith( 'mycsstemplate' );

then under themes/mythemename/templates place: which would contain something like:

.background{ background: '#{$myVar}'; margin: 0; padding: 0; ... }

finally in your template or whever you're using this in the head section add:

<link rel="stylesheet" href="{$Link}mycss" type="text/css" />


Community Member, 151 Posts

14 April 2014 at 8:00pm

Thats worked a treat! Thanks.


Community Member, 17 Posts

14 April 2014 at 8:03pm

Glad to hear :)