XF 2.2 Hide the forum title text

[ioneti]

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

 

[Nicolas FR]

[data-template="forum_list"] {
    .p-title-value {
        visibility: hidden;
    }
}

 

[ioneti]

[data-template="forum_list"] {
    .p-title-value {
        visibility: hidden;
    }
}

Can I hidden determinate forums? Thanks !

 

[Nicolas FR]

[data-container-key="node-5"],
[data-container-key="node-13"],
[data-container-key="node-xx"] {
    .p-title-value {
        visibility: hidden;
    }
}

 

[bzcomputers]

@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:

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

@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:

<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

 

[bzcomputers]

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.

 

[ioneti]

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

 

[bzcomputers]

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.

 

[ioneti]

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.

But I can’t hide the tittles…when I hide them we can talk about seo

 

[ioneti]

@Nicolas FR what code and where I have to add?

 

[ioneti]

[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?

 

[Nicolas FR]

No, in the extra.less template, sorry i forget to indicate this.

 

[ioneti]

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;
}
}

 

[Nicolas FR]

It works well for me, are you sure about node ID ?

 

[ioneti]

It works well for me, are you sure about node ID ?

View attachment 283626

Yes, correct forum id…

Maybe is something bad ?

[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;
}
}

 

[Nicolas FR]

No the code is correct, do you use XenForo original style ?

 

[ioneti]

No the code is correct, do you use XenForo original style ?

No, xenfocus

 

[EchoRomeo]

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!

 

[Mr Lucky]

You might try

.p-title-value:before
{content:"Newname"}