XF 2.2 Hide the forum title text

ioneti

Active member
hello

I have added background photos to my forums and I want to know how I can remove the text of the forum title so that it does not cover the background image.

thanks
 
@ioneti Be aware this is your h1 tag for your node pages and hiding its' content using CSS (whether it's visibility: hidden or z-index: -1, etc.) has the possibility of negatively affecting your page SEO. Doing this with a standard image can be overcome by using something like the code below:

Code:
<h1>
    <img src="yournodeimage.png" alt="Your Node Title" />
</h1>

With the solution above Google would pick up on the alt text and use it for the node page h1.

The issue you are going to run into is when using a background image for an h1 tag there is no option for alt text. Just be aware that the original page title text must be readable by Google within the h1 tag in order to not affect your current node page SEO.
 
@ioneti Be aware this is your h1 tag for your node pages and hiding its' content using CSS (whether it's visibility: hidden or z-index: -1, etc.) has the possibility of negatively affecting your page SEO. Doing this with a standard image can be overcome by using something like the code below:

Code:
<h1>
    <img src="yournodeimage.png" alt="Your Node Title" />
</h1>

With the solution above Google would pick up on the alt text and use it for the node page h1.

The issue you are going to run into is when using a background image for an h1 tag there is no option for alt text. Just be aware that the original page title text must be readable by Google within the h1 tag in order to not affect your current node page SEO.
I add this in extra less but doesn’t works
 
The above code is not CSS/LESS and does not belong in extra.less. You would need to do a template modification to use the code like above. I would not suggest hiding your h1 tags content with CSS/LESS until you have another h1 SEO solution in place.
 
The above code is not CSS/LESS and does not belong in extra.less. You would need to do a template modification to use the code like above. I would not suggest hiding your h1 tags content with CSS/LESS until you have another h1 SEO solution in place.
Where and how can I make it? Thanks
 
I would need to know whether you are using an HTML image in place of your h1 tag or a CSS background image. The coding for both would be completely different in order to maintain on page SEO.
 
Less:
[data-container-key="node-5"],
[data-container-key="node-13"],
[data-container-key="node-xx"] {
    .p-title-value {
        visibility: hidden;
    }
}
[data-container-key="node-22"],
[data-container-key="node-23"],
[data-container-key="node-24"],
[data-container-key="node-25"],
[data-container-key="node-26"],
[data-container-key="node-27"],
[data-container-key="node-28"] {
.p-title-value {
visibility: hidden;
}
}

This on forum list?
 
No, in the extra.less template, sorry i forget to indicate this.
Doesn’t work…I add this :

[data-container-key="node-22"],
[data-container-key="node-23"],
[data-container-key="node-24"],
[data-container-key="node-25"],
[data-container-key="node-26"],
[data-container-key="node-27"],
[data-container-key="node-28"] {
.p-title-value {
visibility: hidden;
}
}
 
Thanks for this. Nicolas FR's code works for me for hiding the forum page's title.

Nicolas FR: Do you know the css code to change the forum title for a given node rather than hide it while keeping the forum's title setting the same...i.e., overriding the title displayed on the page with a different one? For the example below, instead of "visibility: hidden" it would have to be something to the effect of "value: "asdf""...I've searched and can't figure out what css code I need here to simply display a different title.

[data-container-key="node-28"] {
.p-title-value {
visibility: hidden; (what do I put here instead to change the title rather than hide it?)
}
}

Thanks!
 
Back
Top Bottom