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

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" />

Thats worked a treat! Thanks.

Glad to hear :)