Add an image to node titles on the forum home page

[Echo-07]

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]

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]

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

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

 

[Brogan]

Use nodeTitle:after instead of nodeTitle:before.

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

 

[clove28]

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

 

[clove28]

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]

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.

 

[Brogan]

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

 

[saucylost]

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?

 

[Brogan]

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]

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]

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!