Add an image to node titles on the forum home page

Echo-07 · Jun 17, 2014

Okay, so I looked through that site. Helpful, TY! I know about creating Hyperlinks, but I'm not sure where to put the new code to create the hyperlink since I had to add the image to Extra.css in the first place. This is the stuff that I have trouble with -- where to place the new code.

Also, I've been looking through the forums as well as the tips and guides and I still haven't been able to find any reference to removing the word balloons. They just don't fit our forum style. I'm hesitant to go into templates since I don't own the forum, am only helping design the elements.

Cidrack · Jun 29, 2014

Hi...

please, what code I have to use to transform image 1 to image 2? I used photoshop to example:

Thank you very much

clove28 · Aug 30, 2014

Hi @Brogan ,

Thanks for this modification. I have some questions:

1. How can I bring the node title up?

2. Since this code works, is it possible to bring the image after the node title instead before? If yes, what should I change with these codes..

Code:

.nodeList .node_146 .nodeTitle:before {
content: url('http://pinoyexpatforum.com/test3/upload/styles/flexile/flexile/ban_ad_304x100.gif');
display: inline;
vertical-align: middle;
padding-right: 4px;
}

Thanks!

Paul B · Aug 30, 2014

Use nodeTitle:after instead of nodeTitle:before.

You will also need to tweak the CSS to add some left paddding instead of right.

clove28 · Aug 30, 2014

Thanks for your reply! How about bringing the title up? How can I do that?

clove28 · Sep 5, 2014

Brogan said:
Use nodeTitle:after instead of nodeTitle:before.

You will also need to tweak the CSS to add some left paddding instead of right.

I successfully put the node title on the left. Now, my only problem is how to make the title at the middle part or at the top of the image? I hope you could help me again.

saucylost · Apr 12, 2015

I am not getting this to work. I don't see how it could be that hard. I copied the text into the EXTRA.css file and edited the forum ID. I used the relative path and the direct path for the image and it did not work either way.

Could you help @Brogan and does this replace the word bubbles or add the image next to it. I want to replace the word bubbles.

Paul B · Apr 12, 2015

If you just want to replace the default icons, that can be done in Style Properties.

saucylost · Apr 13, 2015

Brogan said:
If you just want to replace the default icons, that can be done in Style Properties.

Where in style properties and can I make each node have it's own image?

Paul B · Apr 13, 2015

You can't do that in SPs.

This thread should help: https://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/

HotRodCarts · Mar 4, 2019

I was using Brogan's code to display images after node titles on the forum home page but it no longer works with XF 2.1. Anyone know what needs to be added to extra.less to accomplish this?
Thanks!

HotRodCarts · Apr 10, 2021

Still looking to add a small image after the node titles with XF2.2. What would needed to be added to extra.less to do this?
Thanks!

Add an image to node titles on the forum home page

Echo-07

Member

Cidrack

Active member

clove28

Active member

Paul B

XenForo moderator

clove28

Active member

clove28

Active member

saucylost

Member

Paul B

XenForo moderator

saucylost

Member

Paul B

XenForo moderator

HotRodCarts

Well-known member

HotRodCarts

Well-known member

Similar threads

We value your privacy