• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.5 CSS - Tapping into the Themes

#1
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
 

Brogan

XenForo moderator
Staff member
#2
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.
 
#3
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.
 

Brogan

XenForo moderator
Staff member
#4
Assuming your class is called swagheader, in a CSS template it would be this:
Code:
.swagheader {
    background-color: @primaryDarker;
    width:100%;
    height:25px;
}
 
#5
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)

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?
 
#7
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.