XF 1.5 CSS - Tapping into the Themes

Grizzly Adam · May 12, 2016

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.webp

Screenshot from 2016-05-12 09:55:57.webp

Paul B · May 12, 2016

You can reference style property colours in CSS like so:

Code:

.myClass
{
    color: @stylePropertyName;
}

If you use the same class names in the divs, etc. for the page HTML though, it should pick it up automatically.

Grizzly Adam · May 12, 2016

Do you mean like:

Code:

div.swagheader {
    background-color: @primaryDarker;
    width:100%;
    height:25px;

Because that is the same as having no property set. I must not be understanding what you say.

Paul B · May 12, 2016

Assuming your class is called swagheader, in a CSS template it would be this:

Code:

.swagheader {
    background-color: @primaryDarker;
    width:100%;
    height:25px;
}

Grizzly Adam · May 12, 2016

It just makes it white.

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

Screenshot from 2016-05-12 13:33:12.webp

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

Code:

<head>
<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')}
</script>

</head>

simplecart/style.css is the file I am using. Do I have to reference the xf css in here too?

Grizzly Adam · May 13, 2016

Any more ideas?

Grizzly Adam · May 27, 2016

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.

XF 1.5 CSS - Tapping into the Themes

Grizzly Adam

Active member

Paul B

XenForo moderator

Grizzly Adam

Active member

Paul B

XenForo moderator

Grizzly Adam

Active member

Grizzly Adam

Active member

Grizzly Adam

Active member

Similar threads

We value your privacy