Third Light Developer Exchange

JuiceBen

Member

Registered: 2014-11-05

Posts: 2

New CSS Template that pulls through colour tags [RESOLVED]

Hi all,

I have created a new css file within "Extra Files" and have been customising the system.  It is working well so far however, I would like to pull in the colours from the "fonts and colours" section of the admin panel into my custom css file.

I have found that they should be referenced like "[$SecondaryBackground]" for example but they do not pull the colour it just displayed the text when the code is inspected.  Is there anything else I am missing to enable this to happen?

Thanks for any help!

Ben

Last edited by JuiceBen (2014-11-06 14:26:35)

ben

Third Light Staff

From: Third Light

Registered: 2013-06-06

Posts: 79

Re: New CSS Template that pulls through colour tags [RESOLVED]

Hi Ben,
Interesting question. Unfortunately you can't do exactly what you ask - extra files included in a template as an external reference like a CSS file will not go through the smarty compiler, and hence the colour variables are simply not available.

However, there is a workaround which might be OK for you - you can create extra smarty template files and add them to the Extra Files area. And then include these directly in the other templates using the smarty include mechanism. By doing this the files will go through the compiler, and all the environment variables will be available. Here are the details:

First create a new tpl file (e.g. "ben.css.tpl") and upload it to the Extra Files area. Example contents:

{literal}
body {
        background-color:{/literal}{$IMS_THEME.themecolours.SECONDARY_BACKGROUND}{literal};
}
{/literal}

Then, in the header_htmlhead.tpl template, use a smarty include, to include the contents of this template as an inline style sheet. Example snippet of header_htmlhead.tpl:

...
    <style type="text/css">
       {include file="ben.css.tpl"}
    </style>
...

With the above two steps in place you'll be able to insert CSS using the appropriate theme colours. A few notes:
- this method of inclusion uses { and } as smarty delimiters so you'll need to use {literal} tags as above. (In the built in stylesheet we change the delimiters to square brackets for convenience.)
- the theme colours need to be referenced in a slightly different manner to the normal style sheets so [$SecondaryBackground] becomes {$IMS_THEME.themecolours.SECONDARY_BACKGROUND}

So I hope that helps. I can't think of any other way. Given all the above, it might work out more sensible to just hard code the relevant colour values!

Best wishes,
Ben

JuiceBen

Member

Registered: 2014-11-05

Posts: 2

Re: New CSS Template that pulls through colour tags [RESOLVED]

Hi Ben,

Thanks very much for the help, that worked perfectly!

Many thanks

Ben