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

Avatar
lozhowlett

Community Member, 146 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, 146 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 :)