• Resolved ecarstens

    (@ecarstens)


    We have a WP site using the Twenty Seventeen theme. I would like to customize the font size, colour, and alignment of the Headings. We specifically use H2 a lot. On some forums, it says to find Typography on the Appearance menu but I do not see that in our dashboard for this theme. Is there any easy place/way to alter the characteristics of the H2 heading so that it is consistent on all pages?

    I have as seen Additional CSS in the Dashboard but I don’t know how to write the code for what I want to see.
    Here is a manually set H2 bit of text:
    <h2 class=”has-text-align-center”>Who We Are</h2>

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Try placing in the Appearance > Additional CSS

    h2 .has-text-align-center
    {
    whatever special css you want goes here
    }

    This is the h2 with the class defined. Whenever you use this h2 with the class, the special css should kick in.

    Thread Starter ecarstens

    (@ecarstens)

    So, if I simply add:

    h2 .has-text-align-center

    to the Additional CSS box, it will align all H2 text centre in the whole site? That is what I want.

    If you want all h2 to be text align centered, you should need something like

    h2
    {
    text-align : center;
    }

    H2 with different classes may or may not be affected, depending on the class and the cascade.

    Thread Starter ecarstens

    (@ecarstens)

    I do not know what “different classes” means. I added the lines
    h2
    {
    text-align : center;
    }
    to the Additional CSS box, but did not see a change in the alignment of all my H2 texts on all my pages. Some may have been manually centered when I originally created the pages. Sorry for my ignorance on the technical aspects of WordPress.

    Thread Starter ecarstens

    (@ecarstens)

    I’ve gone back to those pages where H2 was not centered and looked at the Code Editor. There, I saw a class command that must have been set manually, to align left. Looks like I figured that out.
    Now, if I want to make all H2 to be bold, what do I have to add to the Additional CSS box? I think the HTML tag is but how do I add that to the CSS?

    h2
    {
    text-align : center;
    }

    Try

    h2
    {
    text-align : center;
    font-weight : bold;
    }

    Look at a primer for Cascading Style Sheets. This will help you with the basics of all the properties you can change and how classes work. For instance,

    h2 .experiment

    in the stylesheet would control this entity

    <h2 class=”experiment”></h2>

    If you use the browser’s Inspector, you can determine what is controlling what. And if you use the Appearance -> Custom CSS in the Dashboard, when you start typing it should help you automatically.

    Thread Starter ecarstens

    (@ecarstens)

    Thank you very much for all your help! I have learned a lot! Great tips about automatically filling in Custom CSS.
    I still need to learn about “classes”. I did not understand you example of h2.experiment but that is no big deal right now. I will read further.

    All is well now. I just need to practise.

    Any introduction to css will help you understand classes. From a search on google for “css class” —

    “In CSS, a class is a group of elements that are the same or similar. You can have as many elements as you want in a class. … Every class has CSS attributes (like color and font-size) that are specific to that class. CSS classes are similar to a real-life class.”

    Just keep looking into whatever you don’t understand. It will come clear eventually. Mozilla has a good resource. And of course you can always ask here.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Editing Heading Typography on all pages’ is closed to new replies.