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, biapar, Willr, Ingo, swaiba, simon_w

Theme build within the admin to alter css in themes


Reply

4 Posts   510 Views

Avatar
lozhowlett

2 April 2014 at 5:17am Community Member, 146 Posts

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

13 April 2014 at 7:25am (Last edited: 13 April 2014 7:55pm), Community Member, 17 Posts

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

14 April 2014 at 8:00pm Community Member, 146 Posts

Thats worked a treat! Thanks.

Avatar
dylangrech92

14 April 2014 at 8:03pm Community Member, 17 Posts

Glad to hear :)