Main title colour and background

  • Author
    Posts
  • #3426965

    Hi There,
    Newbie here.

    Is is possible to change my page main title colour, or add a background to the title so that it stands out more, against the header main image?

    Is is also possible to shrink the height of the main header image, as it takes up too much real estate at the moment (the width is fine – would love it to be shorter though).

    I use theme twenty-seventeen.
    Thanks in advance

    The blog I need help with is dermaldistinction.blog.

    #3427170

    Hi there!

    Is is possible to change my page main title colour, or add a background to the title so that it stands out more, against the header main image?

    Is this what you’d like to modify? https://d.pr/i/96lRjT
    If so, it can be done with some custom CSS code but we’d need to know what exactly would you like to achieve.

    In my opinion, half-transparent background would work better than changing just the color of the text, have a look:

    This is, of course, just an example, you can use any color you want. If you’d like to try that, please go to My Site>Design>Customize>CSS and paste this code:

    .site-branding .site-branding-text {
      background: rgba(250, 230, 204, 0.5);
    }

    To change the color, check the desired color rgba code and paste it in place of the current one. The last value (0.5) is the opacity, you can change that as well.

    Is is also possible to shrink the height of the main header image

    Again, you’d use custom CSS for that, although this one is more tricky:

    @media screen and (min-width: 48em) {
    .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, .admin-bar.home.blog.has-header-image .custom-header-media, .admin-bar.home.blog.has-header-video .custom-header-media {
        height: 50vh;
    }
    }

    If you don’t like how it looks after adding the code, I’d suggest looking for a different theme with a small header.

    Please note that you can get support faster by reaching out directly via https://wordpress.com/help/contact. With your plan, you have access to live chat :)

You must be logged in to reply to this topic.