Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Center Post/Page title only if featured image set

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #157372
    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!

    #157434
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #157657
    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!

    #157688
    Tom
    Lead Developer
    Lead Developer

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

    #158738
    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!

    #158784
    Tom
    Lead Developer
    Lead Developer

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.