Can you help correct problem on header?

  • Unknown's avatar

    I inserted an image for my header. It loaded fine. Problems is WordPress has covered it with a gray color. The image background is white. (Pen and ink drawing). Can you correct this or tell me how to?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Hi,

    The same issue was reported in July, in the topic Header does not display properly (Libretto Theme). It was one of multiple issues raised regarding the Libretto theme header, and there is no sign there that this issue has been resolved yet. It may be an intentional design feature of the theme.

  • Unknown's avatar

    Thank you so much. Since I’m just learning my way around the neighborhood, and have never blogged before most of this stuff is alien to me. Is there a way I can report this problem to an actual person at WordPress?

  • The grey gradient on the custom header is a design feature in Libretto, and allows an overlaid site title and tagline to be legible against most background header images.

    It may be removed with custom CSS if you prefer:

    .libretto-has-header-image #masthead::after {
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    }

    Custom CSS is available with the WordPress.com Premium or Business plan.

    p.s. I’ve moved this post to the Themes forum. If you need staff attention on a thread in the future, just add the tag modlook to the Tags area in the sidebar.

  • Unknown's avatar

    We have just purchased the upgrade. Made a CSS change, to remove gray color from header. but how do we SAVE the changes when inspecting the element?

  • Unknown's avatar

    Hi @lindashobe, you need to go to My Sites > Customize > CSS, delete all the informational text in that window, and paste in the custom CSS @kathrynwp provided. There is a Save & Publish button at the top of the left pane that you click to save and make your custom CSS live.

  • Unknown's avatar

    Yes, thank you. That did it! But this introduced a new problem. It has cut off the bottom third of the header image.

    It looks fine in the customized mode, but is cut off in the web viewing mode.

  • Unknown's avatar

    Hi, remove this rule from your custom CSS

    .site-header .site-branding {
        background-size: cover;
    }

    and replace with this one

    .libretto-has-header-image #masthead {
        background-size: contain;
        background-color: #fff;
        background-position: center top;
    }
  • Unknown's avatar

    Dear Mr. Sacred Path. You are quickly becoming our best friend. Hubby, who I have drafted into this venture, is good with computers (heck, he teaches SAP) but has never done anything remotely like this, fortunately with your fabulous help we are making progress.
    Next challenge: We (he) cannot figure out how to make this be responsive on various devices. Right now looks good on my iPad, but others, not so much.
    The problem I’m working on is getting the featured image on my “about me” page to be larger. I see images on the live demo are as big as the page, but mine won’t do it. Help.
    Thank you, thank you, thank you!

  • Unknown's avatar

    On the header image on your about page, we can make it taller, but that sort of messes with the cropping. With the original cropping, it keeps your image on smaller devices whereas if we make things taller, it cuts the image off. You can give the following a shot and use the device preview buttons in the Customizer to see what I mean.

    .libretto-has-header-image #masthead {
        height: 800px !important;
    }

    Original height was 541px.

  • Unknown's avatar

    Oops, use this instead which uses the unique CSS body selector to limit this to only your about page.

    .page-id-1.libretto-has-header-image #masthead {
        height: 800px !important;
    }
  • Unknown's avatar

    Thank you, will give it a go this evening.

  • Unknown's avatar

    You are welcome, and let us know how it goes.

  • Unknown's avatar

    Next challenge, attempting to change font size on “about page”. Can find no “font size” icons.

  • Unknown's avatar

    Clarification regarding font size mentioned a minutes ago. This is in regards to Blockquote text. We want to increase size.
    Thank you in advance.

  • The blockquote text is already quite large at 20.8rem but if you want to increase its size further, try something like this:

    blockquote {
      font-size: 30px;
    }

    If you need further help with anything, please start a new thread. Thanks!

  • The topic ‘Can you help correct problem on header?’ is closed to new replies.