XF 1.4 Replace text of single child node title with image

[ReprobateUK]

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]

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:

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

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

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

}

See:

Forum list

All the latest news: saxophones, mouthpieces, reeds, players. Not to mention Cheese & Wine

cafesaxophone.com

 

[ReprobateUK]

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:

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

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

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

}

See:

Forum list

All the latest news: saxophones, mouthpieces, reeds, players. Not to mention Cheese & Wine

cafesaxophone.com

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