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

Replacing the category strip with image(s)

Discussion in 'XenForo Questions and Support' started by Bain, May 11, 2011.

  1. Bain

    Bain Active Member

    Hello,

    I am working on a skin for the Coast to Coast AM Forum and was wondering if there was a way to replace the category strip in: .nodeList .categoryStrip

    And have images shown in its place. Each separate category node would have its own unique category strip header. I assume it would work similar to how icons are replaced?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    This is one way of doing it - add this to EXTRA.css

    Code:
    .node.category.level_1.node_2 .categoryText {
    background-color: #CC0000;
    }
    Change the node number for each category node id.
    Amend the CSS to suit.

    You will need to make changes to the other CSS which affects the category strip, such as removing the background image, etc.
     
    Klaudius and Bain like this.
  3. Brogan

    Brogan XenForo Moderator Staff Member

    An alternative method is to do this:

    Code:
    .nodeList .categoryStrip {
    background: none !important;
    border: none !important;
    border-radius: none !important;
    }
    
    .node.category.level_1.node_2 {
    background-color: #CC0000;
    }
    First remove all the styling from the category strip and then re-apply it individually.
     
  4. Akrion

    Akrion Well-Known Member

    Brogan is dead on. I am doing this exact approach in my current project. I do wish there was a configurable way of doing this outside of matching the node ids.
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Damn!

    I really, really want to do this but I'm absolutely hopeless with graphics :D

    I think I'll persevere though as done correctly it can really add another dimension to a forum home page.
     
  6. Shelley

    Shelley Well-Known Member

    Well since you posted that css it's just motivated me into doing just that. Damn you brogan and your excellent tidbits of information. :cry:
     
  7. Renada

    Renada Active Member

    Gawd now you have me faffing around with my categories. I've changed the colour of the category strips using the above code. How would I be able to style the rest of the category - i.e. the speech bubbles, forum name links, last post background to match?

    This is the code I have so far:

    Code:
    /* Category strips */
    
    .node.category.level_1.node_3 .categoryStrip {
    background-color: #CC0000;
    }
    
    .node.category.level_1.node_11 .categoryStrip {
    background-color: #FEFFB8;
    }
    
    .node.category.level_1.node_22 .categoryStrip {
    background-color: #FFDDEE;
    }
    
    I've done it this way because I don't want ALL the categories changing.

    Thanks for any help :)

    Renada
     
    Brandon Sheley likes this.
  8. Renada

    Renada Active Member

    Hi,

    Okay I've worked out some more but I've run into a problem. This is my code for one category.

    Code:
    .node.category.level_1.node_3 .categoryStrip {
    background-color: #CC0000;
    }
    
    .node.category.level_1.node_3 .nodeIcon {
        background-image: url("styles/default/xenforo/widgets/forum_unread1.png");
    }
    
    .node.category.level_1.node_3 .node .nodeLastPost {
        background-color: #CC0000;
    }
    1) Can you tell me how to put that all together or do I need the 3 separate instances of css? That will be a lot of css to keep track of over several categories if so, but that's ok :)

    2) I've managed to change the speech bubble colour but I think this now makes the image hard coded so it won't change to "read" when all the messages are read. Is this correct? If yes, what do I do to correct that so that it changes to light/dark depending on whether or not there are read/unread messages?

    3) I have it setup so that if you click the category name the page refreshes with just the selected category and its list of forums. (not like here where it just scrolls down to the category you click). Thing is, when I click on the category title now the new page still refreshes to give me just that category and its forums but it has reverted to all the original colours so it's ignoring all the new css entries even though the main forum page is showing the new colours. What did I do wrong?

    Regards,
    Renada
     
  9. Bain

    Bain Active Member

    Brogan-

    Thanks for the help. I appreciate it! Will that also work for subcategories by placing in level_2 and so on?
    Also, is it possible to increase the category title (font size) and have it centered?
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    Apologies for not responding to this thread, I've been a little busy lately.

    I'll see what I can do with regards to answering each question soon.

    Anyone else is free to chime in though :)
     
  11. ShadyX

    ShadyX Well-Known Member

    could this be applied to individual nodes instead of categories? :)
     
  12. ArnyVee

    ArnyVee Well-Known Member

    Any new techniques or updates that folks can share? I wanted to do this for one of my sites that I'd like to bring over to xF. :)
     
  13. Shelley

    Shelley Well-Known Member

    It's basically the same way as brogan posted. Below is the way I did it when styling Urban Fantastic though you may have to adjust the title and sub title position depending on your height of the category image.Just insert that in your EXTRA.CSS Template.

    Code:
    fieldset .nodeList.sectionMain .node.category.level_1.node_4 .categoryText {
        background: url("@imagePath/xenforo/gradients/4.png") no-repeat scroll right center transparent;
        height: 40px;
    }
    fieldset .nodeList.sectionMain .node.category.level_1.node_10 .categoryText {
        background: url("@imagePath/xenforo/gradients/10.png") no-repeat scroll right center transparent;
        height: 40px;
    }
    fieldset .nodeList.sectionMain .node.category.level_1.node_14 .categoryText {
        background: url("@imagePath/xenforo/gradients/14.png") no-repeat scroll right center transparent;
        height: 40px;
    }
    fieldset .nodeList.sectionMain .node.category.level_1.node_22 .categoryText {
        background: url("@imagePath/xenforo/gradients/14.png") no-repeat scroll right center transparent;
        height: 40px;
    }
    .nodeList .categoryStrip {
        background: url("@imagePath/xenforo/gradients/gradient_main.png") repeat-x scroll center top #F9D9B0!important;
        border: 1px solid #4d4944 !important;
        border-radius: 4px 4px 4px 4px;
        border-top: 1px solid #F9D9B0;
        color: #6D3F03;
        font-size: 11px;
        margin: 0;
        min-height: 6px;
        padding: 0 0 0 10px !important;
    }
    
    The following code was primarily done/need to position the text/subtext so the position/colouring was aligned, your's will be different pending on the height.

    Code:
    .nodeList .categoryStrip .nodeTitle {
        color: #f0e3d5 !important;
        font-size: 10pt;
    font-style: georgia !important;
        padding-top: 5px !important;
    }
    .nodeList .categoryStrip .nodeTitle a {
        color: #e3d7cb !important;
    }
    .nodeList .categoryStrip .nodeDescription {
        color: #eeeae5 !important;
        font-size: 10px;
    }
    
     
  14. ArnyVee

    ArnyVee Well-Known Member

    Thanks Shelley! :D

    I know that this was discussed on your old site (BBSmiley), but since it wasn't around I had no record of it. :(

    But now you have enlightened me once again ;)
     
  15. wickedstangs

    wickedstangs Well-Known Member

    What is the Category Strip image size to do this?

    is the file category-23px-light.png the right one to mess with?

    Trying to make my category strip look like this.
    strip.png
     
    Last edited: Jul 18, 2014
  16. Brandon Sheley

    Brandon Sheley Well-Known Member

    Hello,

    I'm trying to do something like this.

    Code:
    .node.category.level_1.node_3 .categoryStrip {
        background-image: url("styles/default/xenforo/widgets/forum_unread1.png");
    }
    I'd like to make all category strips with the image I'm using, is there a way to do that or is it best I just repeat for each node?

    Thanks
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

    If you omit the node ID it should apply to all.
     
  18. Jim Kingsnorth

    Jim Kingsnorth Active Member

    On my two custom themes (I created and am trying to convert to xf) I use 3 images. Is it possible to do that? I have a right and left image and a background image.
     

Share This Page