Jump to:

23490 Posts in 18996 Topics by 2878 members

General Questions

SilverStripe Forums » General Questions » Theme build within the admin to alter css in themes

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

Page: 1
Go to End
Author Topic: 499 Views
  • lozhowlett
    Avatar
    Community Member
    146 Posts

    Theme build within the admin to alter css in themes Link to this post

    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

  • dylangrech92
    Avatar
    Community Member
    17 Posts

    Re: Theme build within the admin to alter css in themes Link to this post

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

  • lozhowlett
    Avatar
    Community Member
    146 Posts

    Re: Theme build within the admin to alter css in themes Link to this post

    Thats worked a treat! Thanks.

  • dylangrech92
    Avatar
    Community Member
    17 Posts

    Re: Theme build within the admin to alter css in themes Link to this post

    Glad to hear

    499 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.