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

Different colour bars?

Discussion in 'XenForo Questions and Support' started by Shanj, Oct 14, 2010.

  1. Shanj

    Shanj Well-Known Member

    Is it possible to have a selection of bar colours, and select per category of forums?
    (The coloured bar withy gradient, which gets title text on it.)
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You will have to be creative.

    I recommend simply editing the category descriptions to include some colorful HTML. It won't change the color of the entire category bar, but it can easily set apart the different categories with colors inside of that bar.

    Otherwise I can imagine some template code that references different background gradients based on node_id, but that is a little yucky.
     
  3. Morgain

    Morgain Well-Known Member

    Looking for template code to use to create a different colour gradient on each Category bar please.
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I know more now than I did a year ago. This can be done with simple CSS:

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Code:
    .nodeList .node_1 .categoryStrip
    {
    	background-color: red;
    }
    
    .nodeList .node_4 .categoryStrip
    {
    	background-color: blue;
    }
    
    You need to specify the node_ids of the categories.

    This is the result:

    Screen shot 2011-10-27 at 2.40.37 PM.png
     
    Morgain likes this.
  5. Morgain

    Morgain Well-Known Member

  6. Morgain

    Morgain Well-Known Member

    Jake I have had lots of friendly admiring comments on my pretty category bars all due to your clever code snippets.

    They are so cool -I have the image, the coloured gradient per category - and the coloured title font.
    I would love to place them in other locations like

    - the sidebar - without the small text explanation along the bottom - so the side menu matches the main forumslist.
    I've done this by making graphics from the forums list page but it's pretty clumsy looking really.
    http://www.housemorgain.co.uk/forumxf/index.php

    - in a page content area like the matching dedicated category view,
    or on a Page giving info about that category.
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Which part of the sidebar exactly?

    Changing the page background within a category requires creating a new style for that category:

    Admin CP -> Applications -> Display Node Tree -> [click the category] -> Override user style choice
     
  8. Morgain

    Morgain Well-Known Member

    Thank you Jake.

    Here's the sidebar I use on users_online / forums_list/ and the wiki
    - I made an approx version mimicking the bars with graphics, not great
    - the bars are too short they should stretch right across the sidebar.
    catbars-sidebar.png

    Here's category view - dedicated page for a category in the node tree (this is a mockup)
    catbar-categoryview.png
    I tried copying some code in the category _view template but it showed only the text on the bar and the standard XF icon.

    Here's an info page (static page) using a cat bar as a graphic header so each section has a description.
    How can I insert the cat bar in html?
    catbar-page.png
     

Share This Page