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

XenForo - different backgrounds for different forum nodes.

Discussion in 'Styling and Customization Questions' started by Cryptaline, Oct 14, 2012.

  1. Cryptaline

    Cryptaline Active Member

    I don't have a chance to try it right now on my own. So wonder to know, guys ve you tried to add a dif bg (image/color) to a dif forum node. E.g, i have 10 diff forum categories on my main page. I want to add a dif bg for each of these categories so it will make more easy for ppl to find/recognise my forum categories.

    If so, could you show css fix for this.
    Thank you!

    UPDATE ~~~~~~~~~~~~~~

    Question Solved!

    Code used:
    .nodeList .node.node_7(Number of the forum node) { background-image: url('path'); background-repeat: no-repeat;}

    Result is:
    social-top.png
     
  2. Morgain

    Morgain Well-Known Member

    Yes Jake Bunce showed how to do this ages ago. I think the link is in my signature.
     
  3. Cryptaline

    Cryptaline Active Member

    Ok, prob fix will look like this, am i right, could you confirm that, please?

    .nodeList .node.node_7 { background-image: url('path'); background-repeat: no-repeat;}
     
  4. Morgain

    Morgain Well-Known Member

    Brandon Sheley and Cryptaline like this.
  5. Morgain

    Morgain Well-Known Member

  6. Cryptaline

    Cryptaline Active Member

    Thx for the quick respond.

    May s1 confirm this "css combo" will it work fine or i need to read(or add smth else) a whole guide? :LOL: thank you. As i said i can not check it myself atm.
     
  7. Morgain

    Morgain Well-Known Member

    I dunno Adam I only know how to do the stuff Jake taught us.
    There'll be cleverer people here in the morning it's 2.30am here in the UK and I know Jake isn't on at the moment.

    EDIT. Jake just appeared.
     
  8. Cryptaline

    Cryptaline Active Member

    While I'm waiting for some answer i just ve noticed that this thread has now over 600 views in just few hours. :eek: wth
    S1 refreshing this page or what?
     
  9. Cryptaline

    Cryptaline Active Member

    Ok, finally i ve done my css combo which i ve mentioned before myself on my laptop (.nodeList .node.node_7 { background-image: url('path'); background-repeat: no-repeat;}). Works fine for me but i still curious, is it 100% right css fix and i can use it or mb it will be broken somehow somewhere. Could you answer? :coffee:
     
  10. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  11. Cryptaline

    Cryptaline Active Member

    What i was looking for is .... THIS! ^^^^^^^^^^^^^^^^
    Thank you :LOL:

    Looks awesome btw

    social-top.png
     
  12. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    That is a much more complicated layout. I don't have a guide for that.
     
  13. Cryptaline

    Cryptaline Active Member

    This is my layout! :oops:
    Nothing 2 hard, what i did i just used css combo which i ve mentioned before + other css fixes.
    As i said i was just curious, have i done the part with custom bg right or not.

    I'm sorry, i can misslead sometimes :giggle:
     
  14. Cryptaline

    Cryptaline Active Member

    lol
    1,568 views, i swear it's not me who refreshing this topic O_O guys stop it.
     
  15. Shelley

    Shelley Well-Known Member

    It looks okay from the screenshots. I'm sure you've checked in all the browsers for any breakage so if it's displaying fine in all browsers chances are you did it correctly.
     
  16. Shelley

    Shelley Well-Known Member

    I can't help myself but it's been plaguing me every time i visit your site. :D Is there a reason why you haven't adjusted and re-coloured the borders to reflect the modified coloured category areas? I think it would look better with the borders changed rather than leaving them the default setting.

    apologies for going off-topic in this thread and my obsession with your category border Morgain. :(

    category-colours.png

    Code:
    .nodeList .node_1 .categoryStrip {
        background-color: violet;
            border-top: 1px solid purple;
            border-bottom: 1px solid purple; }
     
    .nodeList .node_1 .categoryStrip .nodeTitle a {
            color: purple !important; }
     
    .nodeList .node_1 .categoryStrip .nodeDescription {
            color: purple; }
     
    .nodeList .node_7 .categoryStrip {
        background-color: lightblue;
            border-top: 1px solid blue;
            border-bottom: 1px solid blue; }
     
    .nodeList .node_7 .categoryStrip .nodeTitle a {
            color: blue !important; }
     
    .nodeList .node_7 .categoryStrip .nodeDescription {
            color: blue; }
     
    .nodeList .node_3 .categoryStrip {
          background-color: lightgreen;
            border-top: 1px solid green;
            border-bottom: 1px solid green; }
     
    .nodeList .node_3 .categoryStrip .nodeTitle a {
            color: green !important; }
     
    .nodeList .node_3 .categoryStrip .nodeDescription {
            color: green; }
    
     
  17. Cryptaline

    Cryptaline Active Member

    Yup i ve checked everything, but i prefer also 2 ask ppl.
     
    Shelley likes this.
  18. Shelley

    Shelley Well-Known Member

    Good call, a second, third etc opinion is always good. (y) Your probably best linking to the page, if there are any issues that you missed other people will be able to debug any issues you may have missed rather than looking at the screenshot where they can't do much. Chances are if you checked, it displays correctly you did everything correctly.
     
    Cryptaline likes this.
  19. Cryptaline

    Cryptaline Active Member

    I'm trying to avoid linking my template atm. If Jake said "It's Ok" im 10000% fine :)
     
  20. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Shelley is the style police. ;)
     
    ArnyVee likes this.

Share This Page