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

Forum Background Image

Discussion in 'Styling and Customization Questions' started by fullenchilada, Jun 10, 2013.

  1. fullenchilada

    fullenchilada Member

  2. fullenchilada

    fullenchilada Member

  3. fullenchilada

    fullenchilada Member

    Anybody an idea?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    I'm not sure what it is you're trying to do.

    Can you clarify?
     
  5. fullenchilada

    fullenchilada Member

    I sure can Brogan :)

    Here you can see the individual categories (WildStar - Neuigkeiten, Allgemeines, Videos etc.) with their blue-ish background. Well I d like to replace that with the following graphic:

    https://www.dropbox.com/s/yz3thjmjgiaf4t0/forum_li_bg.png?v=0rc-

    In Firebug that is the part of the code I d like to link the background image with:

    <li class="node forum level_2 node_8">

    So instead of having the dull blue background, I'd like to have to nice graphic for each category.
     
  6. Tracy Perry

    Tracy Perry Well-Known Member

    I noticed that was a xenStyles style. Are you still under your 12 month support and asked the theme provider?

    @Brogan, I think he' s wanting that background to replace the existing category color .
    example.png
     
  7. Tracy Perry

    Tracy Perry Well-Known Member

  8. fullenchilada

    fullenchilada Member

    Well my theme provider referred me back here because he did not have the time unfortuantely.

    There are so many css files and I have absolutely no clue which one I have to put the code into. I also do not know exactly how the css code should look like to achieve it.
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

  10. fullenchilada

    fullenchilada Member

    I dont have the class categorystrip as you can see in my source code. So the css rules posted are not gonna change anything in my forum Brogan.

    Code:
    <fieldset>
    <ol id="forums" class="nodeList sectionMain">
    <li id="wildstar-online-de-intern.24" class="node category level_1 node_24">
    <li id="wildstar.3" class="node category level_1 node_3">
    <div class="xeno_cat_top_center">
    <div class="xeno_node_middle">
    <ol class="nodeList">
    <li class="node forum level_2 node_8">
    <li class="node forum level_2 node_11">
    <li class="node forum level_2 node_14">
    <li class="node forum level_2 node_20">
    <li class="node forum level_2 node_21">
    <li class="node forum level_2 node_25">
    <li class="node forum level_2 node_9">
    </ol>
    </div>
    <div class="xeno_cat_bottom_center">
    <span class="tlc"></span>
    <span class="trc"></span>
    <span class="blc"></span>
    <span class="brc"></span>
    </li>
    <li id="w-online-de.1" class="node category level_1 node_1">
    <li id="community.5" class="node category level_1 node_5">
    </ol>
    </fieldset>
     
  11. Tracy Perry

    Tracy Perry Well-Known Member

    Are you modding the CSS directly or are you using EXTRA.css like it was designed to be used? Have you even tried putting and working with the example in the link given into your EXTRA.css to see if it modifies it?
    Chrome developer shows the below segment when I use it on your category strip
    Code:
    .node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
    padding: 0;
    }
    .nodeList .first {
    background-color: rgb(13, 32, 63);
    border-top-color: rgb(28, 50, 86);
    border-right-color: rgb(28, 50, 86);
    border-bottom-color: rgb(5, 11, 22);
    border-left-color: rgb(28, 50, 86);
    }
    .nodeList .alt1 {
    background-color: rgb(13, 32, 63);
    border-top: 1px solid rgb(28, 50, 86);
    border-right: 1px solid rgb(28, 50, 86);
    border-bottom: 1px solid rgb(5, 11, 22);
    border-left: 1px solid rgb(28, 50, 86);
    -xenforo-nomatch-background: rgb(48, 48, 48) url('styles/resurgent/xenforo/node-row.png') repeat-x top left;
    }
    Just doing some playing from Chrome Developer resulted in this (it was just real quick)
    example.png , so I have a feeling that you are not quite sure where you are supposed to be editing at.
     
    Last edited: Jun 13, 2013
  12. fullenchilada

    fullenchilada Member

    I m using Firefox and even tried the code you just posted Tracy & put it into the EXTRA.css but nothing shows up. Everything stays the same.
     
  13. Tracy Perry

    Tracy Perry Well-Known Member

    Don' t use my code... that is what is already being shown by yours. Use the example code that @Brogan pointed you to and if nothing else, place an !important before the ";" divider for the background
    Try putting the below in your EXTRA.css (with the image pointing at your background you want to use)
    Code:
    .nodeList .categoryStrip {
        background: url("path/to/your/image.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;
    }
    and play with it from there. You will probably have to play with the stuff after the image defininition
     
  14. Tracy Perry

    Tracy Perry Well-Known Member

    This gets the image onto my system... but will have to play with it some to make it expand to fill the entire thing
    Code:
     .node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
        background: url("images/test.png") no-repeat scroll center top  #F9D9B0!important;
        }
    
    example.png
     
  15. fullenchilada

    fullenchilada Member

    Well we are slowly getting there Tracy :)

    I still need to get rid of those blue borders and have everything indented on the left and on the right. And the headlines "WildStar", "W*Online DE" etc. need to be lowered a bit.
     
    Last edited: Jun 13, 2013
  16. fullenchilada

    fullenchilada Member

    Ok the indentation got taken care of...at least a little bit coz now the headline of the first post gets kinda cramped into the box :)

    The blue borders still bug me tho.
     
  17. Tracy Perry

    Tracy Perry Well-Known Member

    Code:
    .node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
    border: none;
    }
     
  18. fullenchilada

    fullenchilada Member

    Thanx Tracy, you'r the best :)
     
  19. fullenchilada

    fullenchilada Member

    Another problem that I was not aware of at first came up:

    If you hit the little arrow thingy on the right to get rid of the right side bar everything stretches to the right...even the background image....is there a way to include a "stretched" version for that scenario?
     
  20. fullenchilada

    fullenchilada Member

    There also seem to be a few problems with IE10 and Chrome from what community members told me. The issue with the "stretched background image" however is our main concern right now.
     

Share This Page