Add an image to node titles on the forum home page

Paul B · Mar 2, 2012

Brogan submitted a new resource:

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

Rich (BB code):
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:

Rich (BB 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 · Mar 2, 2012

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

Paul B · Mar 2, 2012

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 · Mar 2, 2012

Mutt said:
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 · Mar 5, 2012

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 · Mar 5, 2012

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 · Mar 5, 2012

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 · Mar 8, 2012

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 · Mar 8, 2012

Morgain said:
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 · Mar 8, 2012

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

jackrouse · Mar 20, 2012

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

bambua · Mar 20, 2012

jackrouse said:
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 · Mar 20, 2012

Try: .nodeList .node_32 .nodeTitle:after

jackrouse · Mar 20, 2012

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 · Mar 20, 2012

Do you have a link to your site?

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

jackrouse · Mar 20, 2012

Brogan said:
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 · Mar 20, 2012

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

jackrouse · Mar 20, 2012

Brogan said:
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 · Mar 20, 2012

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 · Mar 20, 2012

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.

Add an image to node titles on the forum home page

XenForo moderator

Well-known member

XenForo moderator

XenForo moderator

Member

XenForo moderator

Member

Well-known member

XenForo moderator

Well-known member

Member

Well-known member

XenForo moderator

Member

XenForo moderator

Member

XenForo moderator

Member

XenForo moderator

Member

Similar threads

We value your privacy