Altering My Header Image, Site Title, etc.

  • Unknown's avatar
    thejasonwatts · Member ·

    Hi,

    Is it possible to change the default grey box that usually displays the site’s title in Hemingway Rewritten so that it’s transparent?

    Basically, I’d like to recreate my site’s title text so that is has a transparent background and “floats” over the header image without a box around it.

    As you can probably see, I’ve already added the code that allows me to use my own image in place of the default grey box and site title, but if I use a version of my title with a transparent background, the grey box still appears beneath it.

    Thanks in advance to anyone willing to help me!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, If you wish to use the standard text-based title and tagline on Heminway Rewritten, the following will make the box transparent and also keep it from fading out when you scroll down. 

    .site-branding-wrapper {
    opacity: 1 !important;
}
.site-branding {
    background: rgba(0, 0, 0, 0);
}

    See if that is what you are wanting and let me know if you need additional help on this.

  • Unknown's avatar
    thejasonwatts · Member ·

    Hi, thesacredpath!

    I appreciate the assistance! I think I explained what I was wanting to do poorly, but I figured out how to achieve what I wanted.

    I do have one further question, though.

    Is there any way to enlarge the display of my “JASON WATTS COMPOSER/PRODUCER text image on desktop/laptop monitors without adjusting how large it displays on mobile?

    It looks great on mobile, but on my widescreen laptop monitor, it appears much smaller in proportion to the header image.

    I’m guessing there’s no way to adjust the size it displays at on desktop versus mobile, but thought I would ask instead of going with my assumption.

    Thanks again!

    Jason

  • Unknown's avatar
    thesacredpath · Member ·

    Hi Jason, glad you got the other issue resolved to your satisfaction. Let’s add a Media Query to adjust the width on the logo image for screens 800px and wider. Below that it pretty much fills the screen as it is. See what you think. 

    @media screen and (min-width: 800px) {
.site-branding {
	max-width: 800px;
	width: 100%
}
}
  • Unknown's avatar
    thejasonwatts · Member ·

    Perfect!!! Happiness Engineer indeed! Thank you so much! :D

  • Unknown's avatar
    thesacredpath · Member ·

    Hooray and you are welcome!

  • The topic ‘Altering My Header Image, Site Title, etc.’ is closed to new replies.