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

Discussion in 'Styling and Customization Questions' started by Grizzly Adam, May 12, 2016.

  1. Grizzly Adam

    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
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    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 likes this.
  3. Grizzly Adam

    Grizzly Adam Active Member

    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.
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Assuming your class is called swagheader, in a CSS template it would be this:
    Code:
    .swagheader {
        background-color: @primaryDarker;
        width:100%;
        height:25px;
    }
     
  5. Grizzly Adam

    Grizzly Adam Active Member

    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?
     
  6. Grizzly Adam

    Grizzly Adam Active Member

    Any more ideas?
     
  7. Grizzly Adam

    Grizzly Adam Active Member

    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.
     

Share This Page