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've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

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

Create CSS Dynamically


Go to End


2 Posts   1225 Views

Avatar
Vix

Community Member, 60 Posts

10 May 2016 at 8:27pm

Is there a way to create a dynamic stylesheet that is built from setting some values in the CMS?

For example I have a DataObject 'Theme Settings' with the following $db array:

<?php class ThemeSettings extends DataObject {
	
	private static $db = array(
		'H1Color' => 'Text',
		'H2Color' => 'Text',
		'H3Color' => 'Text',
		'H4Color' => 'Text',
		'H5Color' => 'Text',
		'H6Color' => 'Text',
		'TextColor' => 'Text',
		'LinkColor' => 'Text',
		'LinkHoverColor' => 'Text',
		'BackgroundColor' => 'Text',
		'HeaderColor' => 'Text',
		'NavBgColor' => 'Text',
		'NavBgHoverColor' => 'Text',
		'NavTextColor' => 'Text',
		'NavTextHoverColor' => 'Text',
		'HeaderText' => 'Text'
	);
}

At the moment I am just outputting the data in the head of the document through the init function:

public function init() {
		parent::init();
		$settings = $this->FetchSettings();
		if($settings){
		  Requirements::customCSS(
    //css goes in here
);
}
}

But I would prefer to be able to generate an actual custom.css file and attach it (so I don't have to add the css with every page load). Has anyone got any ideas how to implement this?

Avatar
Vix

Community Member, 60 Posts

10 May 2016 at 9:18pm

I have managed to do this by creating a StylesheetPage class with the following in it:

public function init() {
		parent::init();
		$settings = $this->FetchSettings();
		if($settings){
			$content = '
			body{
				background: '.$settings->BackgroundColor.';
				color: '.$settings->TextColor.';
			}
			p,li,td {
				color: '.$settings->TextColor.';
			}
			h1 {
				color: '.$settings->H1Color.';
			}
			h2 {
				color: '.$settings->H2Color.';
			}
			h3 {
				color: '.$settings->H3Color.';
			}
			h4 {
				color: '.$settings->H4Color.';
			}
			h5 {
				color: '.$settings->H5Color.';
			}
			h6 {
				color: '.$settings->H6Color.';
			}
			a {
				color: '.$settings->LinkColor.';
			}
			a:hover {
				color: '.$settings->LinkHoverColor.';
			}';
			$filePath = 'assets/css/custom.css'; 
			$fh = fopen(BASE_PATH . '/' . $filePath, "w");
			fwrite($fh, $content);
			fclose($fh);
					
			
		}
	}

	
	public function FetchSettings(){
		$settings = ThemeSettings::get()->First();
		return $settings;
	}

And then just linking the css in the Page.ss template. I am sure there is a more elegant way of doing this than the way I have done, so would love anyone else's input.