[Resolved] How to justify body text and center headings

[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/)

[Leo]

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 🙂

[Sophie]

Hi Leo,

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

[Leo]

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?

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

[Elvin]

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. 😀

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

[Ying]

Try this for H2:

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

[Sophie]

Perfect- that worked 🙂 Thank you all for your help.

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

[Ying]

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 🙂

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

[Ying]

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

[Sophie]

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

[Ying]

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 🙂

[Author]

Posts