XF 2.2 Change Node Title to Image

[Agatha]

I am trying to get rid of the node title text for each forum title and replace with a customized image. I tried NodeIcon add on bit it seems to only put a customized icon in front of the title and I would like to delete the title and replace with a larger image than an icon. Does anyone know if there is a way to do this? Thanks.

 

[l3ta]

Put the following code in your extra.less template:

.node-title a {content: url(https://i.imgur.com/4UXr2er.png);}

 

[Agatha]

thanks. will try it now.

 

[Agatha]

is there a way to make each image different?

 

[l3ta]

is there a way to make each image different?

Yes. You need the node title id of each forum so your code will look like this for each:

.node--id1 .node-title a {content: url(https://i.imgur.com/4UXr2er.png);}

 

[Agatha]

Sorry to be dense. I am trying to figure out where to find the node/forum title and also how to link the image from my ftp in the code. Could you please let me know how to? Thanks so much for your help.

 

[l3ta]

Sorry to be dense. I am trying to figure out where to find the node/forum title and also how to link the image from my ftp in the code. Could you please let me know how to? Thanks so much for your help.

Sure. To get the node id, hover over the forum link with your mouse and look at the bottom left corner of your browser to get the id number.

 

[l3ta]

If you have a link to your forum, I can do all that for you.

 

[Agatha]

thank you so much. it is an adult forum so not sure how ppl feel about that... I do not wish to offend anyone

 

[l3ta]

you can pm me the link or we can continue here. Did you get the nodes id?

 

[Agatha]

just did thanks

 

[l3ta]

Here is the code for each of your forums. Replace the image url with your own:

.node--id2 .node-title a {content: url(https://i.imgur.com/4UXr2er.png);}

.node--id31 .node-title a {content: url(https://i.imgur.com/4UXr2er.png);}

.node--id36 .node-title a {content: url(https://i.imgur.com/4UXr2er.png);}

.node--id37 .node-title a {content: url(https://i.imgur.com/4UXr2er.png);}

 

[Agatha]

Thanks! That worked great! Now last dumb question ...how do i put link to image from a folder on my server? sorry. I do not do simple coding enough. I tried just using the file path instead of the url but it did not work.

 

[Agatha]

Just wanna say I'm amazed at how helpful you have been and fast in response. Thank you so much!

This member is very helpful we should all appreciate them.

 

[l3ta]

You're welcome!

 

[Luke_l]

Agatha this is exatly what i would like.... but i am very new..... where exactly did you put your images? i can't quite peice this together yet...
the node numbers that i want to have pics instead of titles are 41,42 and 43...

 

[Luke_l]

i got it!