[Resolved] How to justify body text and center headings

Home Forums Support [Resolved] How to justify body text and center headings

Home Forums Support How to justify body text and center headings

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #2076961
    Sophie

    I am currently setting up GeneratePress on a staging site and have a few questions regarding typography. These were all check boxes within my last theme so I’m a bit lost on how to make it appear the same way. I also have very limited knowledge, so if I need to add code, please can you explain it as simply and detailed as possible πŸ™‚ Thank you so much!

    1. How can I justify all body text on my website?

    2. How can I center all headings?

    3. I would like to add a border and color background to all settings as I have it currently set up with my old theme (https://www.wedreamoftravel.com/national-parks-of-colorado/)

    #2077073
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field:
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Let me know πŸ™‚

    #2077216
    Sophie

    Hi Leo,

    Thanks for your response. I have included a link for the staging site. Hopefully this will work.

    #2077356
    Leo
    Staff
    Customer Support

    Try this CSS:

    .entry-content p {
        text-align: justify;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Looks like you’ve managed to center the headings?

    #2077375
    Sophie

    Thanks Leo. I’ll try adding the code in. I’ve not managed to globally center the headers, I’ve manually changed a few. I’d appreciate advice on how to apply a global setting to center headers. Thank you for your help.

    #2077385
    Elvin
    Staff
    Customer Support

    Hi Sophie,

    You can center all the headings with CSS:

    h1, h2, h3, h4, h5, h6 {
        text-align: center !important;
    }

    This will apply to ALL the headings on ALL of the pages throughout the site unless a specific heading has a text-align setting that wins in precedence. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2078286
    Sophie

    Perfect – my text is all aligned. However, how do I add a colored background and border to all headings as I have with my old theme (https://www.wedreamoftravel.com/national-parks-of-colorado/)? Thank you so much for your support.

    #2078342
    Ying
    Staff
    Customer Support

    Try this for H2:

    .entry-content h2 {
        background-color: #bfeaea;
        padding-top: 6px;
        padding-bottom: 6px;
        border: 1px solid #999999;
    }
    #2078345
    Sophie

    Perfect- that worked πŸ™‚ Thank you all for your help.

    #2078368
    Sophie

    I’ve just come across an issue. For some blog posts, I want to be able to center text (rather than have it justified). How I previously had it set up on my old theme was that all body text defaulted to justified but any manual changes within the post to center the text would overwrite this. Is this possible? So all the text would by default be justified unless otherwise changed within the post?

    #2078400
    Ying
    Staff
    Customer Support

    So all the text would by default be justified unless otherwise changed within the post?

    Give it a try, it should be, but there might be some exceptions that I haven’t thought about.

    If it doesn’t work, we can seek for another solution then πŸ™‚

    #2078407
    Sophie

    Thank you for your reply but I’m a little confused, I’m not sure what I’m giving a try? I’ve already added the code suggested to justify the content, which works. However, if I manually center a block within Gutenberg, the default justification overwrites the manual change and the text remains justified rather than centered.

    #2078412
    Ying
    Staff
    Customer Support

    In that case, can you link me to the post where I can see the issue?

    #2078419
    Sophie

    I am still using a staging site but will include the link for it.

    #2078436
    Ying
    Staff
    Customer Support

    There’re couple options:

    Do not use paragraph, instead using headingsfor the text that you want it to be centered.

    Or

    Change this CSS:

    .entry-content p {
        text-align: justify;
    }

    to:

    p {
        text-align: justify;
    }

    After the CSS change, justify will apply to all p elements on your site, not only the ones inside article. But it lowers down the priority of the CSS, so that the settings can override it.

    Let me know πŸ™‚

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