XF 1.5 CSS - Tapping into the Themes

Grizzly Adam

Active member
I have set up a custom page for our shop and have it all ready to go except for one thing. I have what I am calling the shop header bar that I would like to style according to the theme. How do I use the navbar colors on my shop head bar? Specifically, the outline color, background color, and font color. Thanks for your help.

Screenshot from 2016-05-12 09:56:12.png Screenshot from 2016-05-12 09:55:57.png
You can reference style property colours in CSS like so:

    color: @stylePropertyName;

If you use the same class names in the divs, etc. for the page HTML though, it should pick it up automatically.
Do you mean like:
div.swagheader {
    background-color: @primaryDarker;

Because that is the same as having no property set. I must not be understanding what you say.
Assuming your class is called swagheader, in a CSS template it would be this:
.swagheader {
    background-color: @primaryDarker;
It just makes it white.

Screenshot from 2016-05-12 13:33:04.png Screenshot from 2016-05-12 13:33:12.png

Here is the head I am using in the html file (which is in a widget)

<script type="text/javascript" src="http://firewoodhoardersclub.com/js/sizeandcolor.js"></script>
<script src="http://firewoodhoardersclub.com/js/simplecart/simpleCart.js"></script>

<link rel="stylesheet" type="text/css" href="http://firewoodhoardersclub.com/js/simplecart/style.css">
<link rel="stylesheet" href="http://firewoodhoardersclub.com/styles/tinybox.css" />
<script type="text/javascript" src="http://firewoodhoardersclub.com/js/tinybox.js"></script>

<script type="text/javascript">
function openJS(){alert('loaded')}
function closeJS(){alert('closed')}


simplecart/style.css is the file I am using. Do I have to reference the xf css in here too?
So, as I mentioned before, Brogan's answer didn't do anything but make the div background white. I ended up using the extra.css template to set each theme's color individually.
Top Bottom