Goran theme site header shading css

  • Unknown's avatar
    isabelashdown · Member ·

    Hi there
    Does anyone know if it’s possible to increase the depth of colour on the shaded area on the site header for Goran. So I want a slightly darker version of transparency ie not a solid colour.
    Many thanks!

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

  • staff-jeanpierreac · Staff ·

    Hi.

    If I understand, you would like to change the transparency value of the shaded area in which there is a picture, the main menu (home, about Isabel, books…). This transparency is customized with a parameter called opacity. Opacity should have a value from 0 –completely transparent- to 1 –completely opaque-.

    You can use the following code to set the background. The last parameter, starting by rgba, fixes background color with the first 3 values (using rgb notation), and the opacity with the last one. That means that currently (I copied the code with the current values) your blog title has a black background (rgb(0,0,0)) with a 0.224 value for opacity, that means ‘quite transparent’. You could use, for instance, 0.5 instead of 0.224 for a darker version…

    @media screen and (min-width: 1020px) {
.hero-image .site-header {
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.224);
}
}

    Your blog theme behave different with different screen width, so this customization will apply only to wider than 1020px navigator windows. As you know, there is another configuration for thinner windows (as tablets or smartphones).

    I hope it was clear. :)

    PS: If you would like to change background color and you need help with rgb notation, you can try this page.

  • Unknown's avatar
    isabelashdown · Member ·

    Thanks staff-jeanpierreac – that did the trick perfectly! Really appreciate your help :)

  • staff-jeanpierreac · Staff ·

    @isabelashdown, glad to read that :)

    Enjoy blogging!

  • The topic ‘Goran theme site header shading css’ is closed to new replies.