Node Secondary Images

Node Secondary Images

Overview Reviews (2) Discussion
Shelley

Shelley

Well-known member
Shelley submitted a new resource:

Node Secondary Images (version v1) - Images within your node areas

Ziq9JoW.png
View attachment 41548


Summary: I've seen this asked many times and although the solution is scattered on the forums I thought i'd post it here. This enhancement will display additional images to the right of th node icons (they are not replacements) checkout Miko's guide on how to accomplish this.

Install: Copy and paste...
Click to expand...

Read more about this resource...
 
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?
 
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
 
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. :(
example10.jpg
 
Rho Delta said:
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?
Click to expand...

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

Tracy Perry said:
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
Click to expand...

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.
 
Brogan said:
I posted a version a while ago but it was using .before CSS, which I think isn't compatible with all browsers?

http://xenforo.com/community/resources/add-an-image-to-node-titles-on-the-forum-home-page.425/

So this is a much better solution.
Click to expand...

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:

Note: For :before to work in IE8, a <!DOCTYPE> must be declared.
Click to expand...
 
Shelley said:
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:
Click to expand...

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.

mysite-cat.png


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.
 
Rho Delta said:
Very cool! Did you make all of your icons yourself or do you have a site where you can find them?
Click to expand...

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 said:
Was that to Tracy or Me? I'm assuming you were asking Tracy?
Click to expand...
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.
 
Tracy Perry said:
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.
Click to expand...

Actually i think he/she was asking you. :P But i wanted to make sure just in case they were asking me. :P
 
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.
 
shenmuee said:
Doesn't works for me,
Where is this URL in FTP?
Code: 
url("@imagePath/xenforo/icons/node19.png")
Click to expand...

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.
 
shenmuee said:
Doesn't works for me,
Where is this URL in FTP?
Code: 
url("@imagePath/xenforo/icons/node19.png")
Click to expand...
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.
 
Luxus said:
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.
Click to expand...

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.
 
You must log in or register to reply here.
Back
Top Bottom