Support » Theme: Twenty Seventeen » customizing h1

  • Resolved Andreas

    (@amwebwerbung)


    Hi everybody,

    I am trying to customize fontsize and color of the h1-headings which appear in the left column of my pages / header section.

    firebug and css viewer tell me that theses headings are tagged class=”entry-title”. So this is what I added to my custom css:

    .entry-title h1 {
    color: #ff3777;
    font-size: 40px;
    }

    This shows no effect at all, while

    .entry-content h4 {
    color: #ff3777;
    }

    works fine for h4 on the right column (entry-content).

    What’s the problem? Thank you for your support.

    Andreas

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi,
    Please post your site url.

    Andreas

    (@amwebwerbung)

    Hi Menaka,

    it’s about this site: http://sprich-mit-tieren.de/

    And it’s about this part:

    Thnak you for your support.

    Andreas

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    You need to get a little bit more specific with your targetted elements to override them.

    To change the colour of page headings when using the “Dark” colour scheme, try this in your custom CSS editor:

    .colors-dark.page:not(.twentyseventeen-front-page) h1.entry-title {
      color: #ff3777;
    }
    

    For the size, try this:

    body.page:not(.twentyseventeen-front-page) .entry-title {
        font-size: 40px;
    }

    If you also want to make the same changes on the front page, you’ll need to target a couple more elements, just let me know if you need help with that.

    Andreas

    (@amwebwerbung)

    Hi Kathryn,

    works perfectly – thank you so much.

    But there are two questions remaining:

    First: yes, I would like to do the same changes to the front-page. Until now, I haven’t found how to adapt your CSS code… 🙁

    Second: How do I manage to find out the specific code? They certainly are different depending on what theme i am using. So if it is possible to apply a custom CSS, one should be able to find this information documented in some place, I suppose.

    Thanks again for your support.

    Andreas

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    To apply the same styles to the front page, change this:

    body.page:not(.twentyseventeen-front-page) .entry-title {
        font-size: 40px;
    }

    to this:

    body.page:not(.twentyseventeen-front-page) .entry-title, .colors-dark .page .panel-content .entry-title {
        font-size: 40px;
    }

    And change this:

    .colors-dark.page:not(.twentyseventeen-front-page) h1.entry-title {
      color: #ff3777;
    }

    to this:

    .colors-dark.page:not(.twentyseventeen-front-page) h1.entry-title, .colors-dark .page .panel-content .entry-title {
      color: #ff3777;
    }

    Second: How do I manage to find out the specific code? They certainly are different depending on what theme i am using. So if it is possible to apply a custom CSS, one should be able to find this information documented in some place, I suppose.

    The trick to finding the right elements to target with custom CSS is learning how to use a browser inspector. Here are some guides you can check out:

    https://thewc.co/articles/view/web-inspector-tutorial

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    Andreas

    (@amwebwerbung)

    Thank you so much for your help, Kathryn.

    I hope my English will get me through these guides 😉 I’ll have a try!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Good luck! Using the browser inspector takes some practice but the more you use it the better you’ll get.

    I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.

    p.s. I really like how you’ve customized Twenty Seventeen – the black-and-white photos are very effective and the hot pink text pops!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘customizing h1’ is closed to new replies.