• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Add an image to node titles on the forum home page

Add an image to node titles on the forum home page

Brogan

XenForo moderator
Staff member
#1
Brogan submitted a new resource:

Add an image to node titles on the forum home page (version 1.0) - Smexy!

This simple bit of CSS will add an image to the forum home page before a node title.

You need to know the node ID for each image; you can find this in the ACP or by using one of the browser inspection tools.

For each node, you will need to add CSS similar to the following to EXTRA.css:

Code:
.nodeList .node_32 .nodeTitle:before {
content: url('@imagePath/path/to/image.png');
display: inline;
vertical-align: middle;
padding-right: 4px;
}
The value...
Read more about this resource...
 

Mutt

Well-known member
#2
could a version of this be used to add images in other locations like the tabs across the top of the page?
 

Brogan

XenForo moderator
Staff member
#3
I can get the image to display for each tab individually, but it pushes the text down.
Still trying to resolve it.

This for example is the class for the Forums tab .navTabs .publicTabs .navTab.forums:before

Annoyingly it works fine using after.
 
#5
I followed the tutorial, and it didn't seem to work for me. I added a pic called 'turntable.png' to my path at "/images/node-pics/turntable.png", applied the code, changed the ID of the forum to the one specified, and it didn't change anything :(. Here's the code I entered in Extra.css:

.nodeList .node_102 .nodeTitle:before {
content: url('@images/node-pic/turntable.png');
display: inline;
vertical-align: middle;
padding-right: 4px;
}

When I hover over the "Music" section of my forums it says www.worldofdiscussions.com/forums/music.102/ .

What did I do wrong :p?
 

Brogan

XenForo moderator
Staff member
#6
I just inspected the code on your site and I don't see the CSS.
Either you didn't apply it properly or it's to do with your custom style.
 
#7
Yeah sorry, I accidentally deleted it, when I realized it didn't work. I'll put it back in Extra.css , is the code right though?
 

Morgain

Well-known member
#8
Brogan I don't understand what this does. In the scr you give everything looks normal to me.
There's no image on the category bar, and a category is a node.
The forum icons are normal - green for new content grey for nothing new?
The only item that seems different is one forum at the top has a black icon. Is that it? If so wouldn't that be about the sprite?
The other thing is the small picture showing on Teams and Drivers ... that's it?

Also out of curiosity why is a London lad like you displaying y Ddraig Goch as your avatar?
 

Brogan

XenForo moderator
Staff member
#9
The other thing is the small picture showing on Teams and Drivers ... that's it?
That's it.
It allows you to set an individual graphic per node, in addition to the read and unread icons.

Also out of curiosity why is a London lad like you displaying y Ddraig Goch as your avatar?
I'm not a Londoner ;)
 
#14
Thanks for all the help so far, I've got this far, but no image displays using "before" or "after"

.nodeList .node_4 .nodeTitle:after {
content: url('@imagepath/images/node-pic/soccer-referee-icon.png');
display: inline;
vertical-align: middle;
padding-right: 4px;
}
 
#20
I'm having a real problem with this, I've tried adding the lines of code to the EXTRA.css file for the default, Aurora and the child theme, none of which have worked.