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

Node Secondary Images

Images within your node areas

  1. Shelley

    Shelley Well-Known Member

    Ingenious, Sylar, Bob and 2 others like this.
  2. oman

    oman Well-Known Member

    Already having fun with this Shelley! Simple, yet perfect!:

    nodeimageprev.png
     
    Ingenious, Lisa and Shelley like this.
  3. Rho Delta

    Rho Delta Well-Known Member

    This is very cool Shelley! You could even use this as an add space for companies that want to sponsor a particular section of your site. Any way to mod this to have the secondary icon link to an external site?
     
  4. Tracy Perry

    Tracy Perry Well-Known Member

    You WOULD post this right after I had already done 63 of my forum topics via another way... and I like the way THIS displays much more. You trying to make more work for an old retired guy?:D
     
    Shelley likes this.
  5. Tracy Perry

    Tracy Perry Well-Known Member

    MUCH cleaner look - but it's going to be a bear going through for all the nodes... since I have one for just about every major production motorycle that is being made. :rolleyes:
    And all this for a forum that only has about 4 regular users right now. :(
    [​IMG]
     
  6. Shelley

    Shelley Well-Known Member

    I'm sorry I don't offhand without testing it again on my site.which i'm not currently at right now.

    haha sorry. :p seen many variations of this hack where the threads/ discussions and subforums sit under the image and thought it looked odd and wasted space. And I had a few minutes spare to try something out and it worked so thought others would benefit since the questions on how to accomplish this has been asked so many times. I'm quite surprised nobody posted it before.
     
    Lisa likes this.
  7. Brogan

    Brogan XenForo Moderator Staff Member

    Shelley likes this.
  8. Shelley

    Shelley Well-Known Member

    Ah yeah so you did. Yeah I didn't like the Discussions/messages and subforum text sitting underneath. It's compatible with all the modern browsers though in IE8 it's not without:

     
    Tracy Perry, Lisa and Brogan like this.
  9. Tracy Perry

    Tracy Perry Well-Known Member

    OK, for anyone that has a Category->Category->Forum structure, and you want to have icons on the categories, here is how. The screenshots show what it looks like with the normal forums, and then also the categories done.

    [​IMG]

    OK, here is the CSS I'm using to get the main forum page categories done. It's a mish-mash of info from Brogan (Thanks dude!) and the almighty and all seeing Shelley (blushing yet?:p) .
    Code:
    .node .categoryText {padding-left: 36px;}
    .node.category.level_1.node_37 .categoryText{ background: url("images/forum/vendor.png") no-repeat scroll left transparent;}
    .node.category.level_1.node_254 .categoryText{ background: url("images/forum/general.png") no-repeat scroll left transparent;}
    
    I figured out the secondary categories now. You can use the code and just place it below the above code (I keep a separator between them to keep up with what is what).

    Code:
    .node.category_forum.level_2.node_54 .nodeText {background:url("images/forum/bmw.gif") no-repeat scroll left transparent;}
    
    If the icons for either categories are to large, you can add the "background-size: contain" command into the background area, just be sure you put it after the ";" and place another ";" after it before the closing structure. Needless to say, you can control the location of the text by adjusting the padding parameters.
    All the icons I used were obtained off the web, edited in Gimp to provide a transparent background and then resized with the max size (either height or width) at 32px.

    Anybody want to see how it looks (and I'm still working on it as of 4:08 Central Time) can check here. I know it's not the sharpest looking site out there... but what can you say, I'm not a designer - just a donut eater!

    mmmmmm.. Doughnuts.
     
  10. Rho Delta

    Rho Delta Well-Known Member

    Very cool! Did you make all of your icons yourself or do you have a site where you can find them?
     
  11. Tracy Perry

    Tracy Perry Well-Known Member

    Shoot, I'm in NO way a graphics artist... Google was my friend. :D
    I just did advanced search on images (mainly clipart size) for the item I needed (like for sale, vendor, etc).. and then grabbed those images after confirming they were in the public domain. Then loaded them into Gimp on the Mac, made the backgrounds transparent, resized them and uploaded them to the site.
    There is a site you can find a bunch at here.
     
    Shelley likes this.
  12. Shelley

    Shelley Well-Known Member

    Was that to Tracy or Me? I'm assuming you were asking Tracy?
     
  13. Tracy Perry

    Tracy Perry Well-Known Member

    I didn't think about that... it was probably you as I already advertised that I am design challenged. o_O
    I'm trying to teach myself Gimp so I can make a nice logo, but it's hard when you aren't much on design elements.
    I went ahead and did a resource for the Category images as related here since it would be easier for people to find, giving Kudos to you and Brogan for leading the way.
     
    Shelley likes this.
  14. Shelley

    Shelley Well-Known Member

    Actually i think he/she was asking you. :p But i wanted to make sure just in case they were asking me. :p
     
  15. Luxus

    Luxus Well-Known Member

    You can save yourself a bunch of http requests and speed up your site if you combine all node icons to a sprite sheet. I have 59 icons myself and saved me 58 http requests (although the sheet contains not only node icons). The CSS would be
    Code:
    .node .forumNodeInfo .nodeIcon, .node .categoryForumNodeInfo .nodeIcon
    {
    	background-image: url("@imagePath/xenforo/icons/node-sprite.png")
    	background-repeat: no-repeat;
    }
    And then for every node you have to define the background position
    Code:
    .nodeList .node_1 .nodeIcon
    {
    	background-position: 0 0;
    }
    
    .nodeList .node_2 .nodeIcon
    {
    	background-position: -36px 0;
    }
    And so on.
     
  16. shenmuee

    shenmuee Active Member

    Doesn't works for me,
    Where is this URL in FTP?
    Code:
    url("@imagePath/xenforo/icons/node19.png")
     
  17. Shelley

    Shelley Well-Known Member

    Think of this submission as a guide. Your node ID and image paths would be different since node ID are unique to your own site. You can view with a code inspector (built into modern browsers) which node IDs your forums are you then input your own IDs and use your own images/ insert your own image path.
     
    Tracy Perry likes this.
  18. Tracy Perry

    Tracy Perry Well-Known Member

    By default it will be in your /styles/default/xenforo/icons directory in your root forum structure if you use the listed example. The nodeXX.png is a custom png named for the appropriate node.
    I personally use an /images folder myself and make appropriate directories under each, that way I'm not dependent upon the styles properties being set.
     
    Shelley likes this.
  19. shenmuee

    shenmuee Active Member

    Thank you ^O^ It's works now :D
    Ekran Alıntısı.JPG
     
    Shelley likes this.
  20. Majestic

    Majestic Member

    I recently tried this however it didn't work, it just kept showing up the node status icons rather than the secondary status icons from the new sprite sheet I did. I got the node numbers correct and did all the image/sprite positioning. In the end I went back to the original author's method and it worked. It's a shame as I would had preferred the sprite method to save on the http requests.
     

Share This Page