Add an image to node titles on the forum home page

[Paul B]

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:

.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]

could a version of this be used to add images in other locations like the tabs across the top of the page?

 

[Paul B]

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.

 

[Paul B]

could a version of this be used to add images in other locations like the tabs across the top of the page?

Done.

http://xenforo.com/community/resources/add-an-image-to-individual-navigation-tabs.428/

 

[Precision]

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 ?

 

[Paul B]

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.

 

[Precision]

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]

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?

 

[Paul B]

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

 

[Morgain]

I know you said that before once but I didn't think you were Welsh?

 

[jackrouse]

How do I find the node ID, and is it possible to add the image AFTER the description ?

 

[bambua]

How do I find the node ID, and is it possible to add the image AFTER the description ?

You can find the id by hovering over the node in the acp under display node tree. In the link for that there will be a number. That is the node id.

 

[Paul B]

Try: .nodeList .node_32 .nodeTitle:after

 

[jackrouse]

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;
}

 

[Paul B]

Do you have a link to your site?

Which browser are you using?
http://css-tricks.com/browser-support-pseudo-elements/

 

[jackrouse]

Do you have a link to your site?

Which browser are you using?
http://css-tricks.com/browser-support-pseudo-elements/

www.manutdreds.net

I'm using firefox

 

[Paul B]

The image path is incorrect, it's showing as a broken image.

 

[jackrouse]

The image path is incorrect, it's showing as a broken image.

If the image is in a sub folder of my images folder, what should the image path be ?

 

[Paul B]

You currently have this: content: url('@imagepath/soccer-referee-icon.png');

You haven't included the sub folder in the path.
It should be content: url('@imagepath/sub-folder/soccer-referee-icon.png');

 

[jackrouse]

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.