Site logo

Archived topic

How to justify body text and center headings

18 replies · Started by Sophie on January 11, 2022

Viewing posts 1–15 of 19

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

Hi Leo,

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

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.

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. :D

Try this for H2:

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

Perfect- that worked :-) Thank you all for your help.

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?

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

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.

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

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

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

This archived topic is closed to new replies.