[Resolved] Center Post/Page title only if featured image set

[Hans Christian Siller]

Hi,

I would like to have my Post/Page title line (H1) left-aligned by default – BUT if the page/post has a featured image, I would like to switch to center-alignment.

Is it possible to achieve this with css? Or would I have to create a child theme and edit the php code?

Here’s my site: http://www.philosophysalons.com

The reaon for this formatting request:
-without a featured image, the title line is right underneath the centered navigation menu. Since I am also using a sidebar, the nav menu will be truly centered, while the title will be off-center (due to the smaller content area). However, if there is a featured image, it must be center-aligned (and with it, the title underneath the featured image).

Thanks for any pointers!

[Tom]

Hi there,

Give this CSS a try:

.generate-page-header + .entry-header {
    text-align: center;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Hans Christian Siller]

Hi Tom,

thanks for your quick response. But the css will center ALL H1 headlines. What I’m looking for is a way to center H1 headlines CONDITIONALLY (only if a featured image is set for the post/page in question).

Is it possible to do that with CSS – or would I need to start hacking the Php code?

Thanks!

[Tom]

That CSS should actually only center headlines that come right after the feature image. Have you tried it yet?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Hans Christian Siller]

Tom,

thanks for your suggestion! You are correct – the + selector correctly centers the H1 text only if it is preceded by a featured image.

However, your code had the wrong class in it (at least for my install). It looks like I need to use .page-header-image-single instead of .generate-page-header

Here’s the CSS that works (center Post/Page title only if a featured image exists):

.page-header-image-single + .entry-header {
    text-align: center;
}

Thanks for your help – everything is working great now!

[Tom]

Ah, sorry about that! Glad you found the right class 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts