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

Categories image headers

Discussion in 'Styling and Customization Questions' started by sawine, Oct 25, 2011.

  1. sawine

    sawine Member

    Hello,

    I would like to add some image headers to my forum categories but I not sure how. I'm still new at using XenForo, but I didn't see such option in it to do so. How could I achieve something like this ?:

    [​IMG]

    Thanks you

    -sawine
     
  2. ShadyX

    ShadyX Well-Known Member

    Appearance > Style Properties > Forum List > Category Strip

    Replace the background image
     
    Jake Bunce likes this.
  3. sawine

    sawine Member

    Oh nice, thanks, but will that work if I want to use a different image for each category ?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

  5. sawine

    sawine Member

    Thank you for the fast reply ! Mr. Jason Statham :p (I must not be the first to make the joke here I bet lol.)
     
    ShadyX likes this.
  6. sawine

    sawine Member

    I tried different outputs with the link you provided and I was not able to get it to work :/

    The only thing I've been able to to was this:

    [​IMG]

    By doing this:
    Code:
    .node.category.level_1.node_1 {
    background-color: #000000;
    }
    Or I was able to add an image behind the text, like the example also provided on the link with this code;
    Code:
    .node.category.level_2.node_1 .categoryText {
    background: url(http://i.imgur.com/CJMMZ.jpg);
    }
    What I would like to do, is place a background image in the first forum container. For example, on my screenshots, "Global Announcements" would become a header banner of the same width and height as it is currently taking as a forum node/section.

    Thanks again.
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

  8. sawine

    sawine Member

  9. sawine

    sawine Member

    It works good on IE and chrome but it's broke on my Firefox 3.6 :(
     
  10. sawine

    sawine Member


    Ok... I finally got it fixed.

    If anyone is interested, I had to add the following to my CSS:
    Code:
    .node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent { clear: both; padding: 0; }
    .nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo { clear:both; }
     
    Fuhrmann likes this.
  11. strongarm_playa

    strongarm_playa Active Member

    can I get some help on this. I just cant get it to work.
    I really like this and would love to get it working
     
  12. strongarm_playa

    strongarm_playa Active Member

    I have been through all the directed links and attempted to complete this task. Still I can not seem to get my images to display.
    For that matter I can not even seem to get a "blank" area to display either. hmmmm...
     
  13. strongarm_playa

    strongarm_playa Active Member

    nevermind.. I found another option to make this happen.. Disregard all posts above
     

Share This Page