XF 1.4 Replace text of single child node title with image

Hello folks,

I'd like to replace a child node title text with a custom image - just a single one for one of our sponsors. I read up from a previous thread but the solution wasn't explained enough for me to understand what I should be changing. Thanks in advance for any help.

Si - thelatebay.com
 

Mr Lucky

Well-known member
Hello folks,

I'd like to replace a child node title text with a custom image - just a single one for one of our sponsors. I read up from a previous thread but the solution wasn't explained enough for me to understand what I should be changing. Thanks in advance for any help.

Si - thelatebay.com
Node titles cannot have html BUT description can. In style properties you will need to make the description online as opposed to tooltip default



1. Put your image in the node description. It needs a link to the node as the title will be hidden by CSS in extra.less:

Code:
<a href="https://exampledomain.com/forums/nodename.123/"><img class="nodelogo" src="https://exampledomain.com/image.svg" /></a>
(obviously use your image name and loctaion and node ID as appropriate)

2. CSS to hide the title (in extra.less)

Code:
.node--id123 h3
    {display:none}

.nodelogo
{width:240px}

3. CSS so description (ie the image) shows on mobile (normally description is not shown below medium responsive). You can define responsive image size here if you want.

Code:
@media (max-width: @xf-responsiveMedium)
{
.node--id123 .node-description
{display:block}

}

See:

 
Last edited:
Node titles cannot have html BUT description can. In style properties you will need to make the description online as opposed to tooltip default



1. Put your image in the node description. It needs a link to the node as the title will be hidden by CSS in extra.less:

Code:
<a href="https://exampledomain.com/forums/nodename.123/"><img class="nodelogo" src="https://exampledomain.com/image.svg" /></a>
(obviously use your image name and loctaion and node ID as appropriate)

2. CSS to hide the title (in extra.less)

Code:
.node--id123 h3
    {display:none}

.nodelogo
{width:240px}

3. CSS so description (ie the image) shows on mobile (normally description is not shown below medium responsive). You can define responsive image size here if you want.

Code:
@media (max-width: @xf-responsiveMedium)
{
.node--id123 .node-description
{display:block}

}

See:

Excellent, thank you so much Mr Lucky. Super Star!
 
Top