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're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

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

Avatar
lozhowlett

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?

Thanks

Avatar
dylangrech92

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:
mycsstemplate.ss which would contain something like:

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

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

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

Avatar
lozhowlett

Community Member, 151 Posts

14 April 2014 at 8:00pm

Thats worked a treat! Thanks.

Avatar
dylangrech92

Community Member, 17 Posts

14 April 2014 at 8:03pm

Glad to hear :)