[Resolved] Solid Gradient Background for Page Headers?

Home Forums Support [Resolved] Solid Gradient Background for Page Headers?

Home Forums Support Solid Gradient Background for Page Headers?

Viewing 10 posts - 16 through 25 (of 25 total)
  • Author
    Posts
  • #398789
    Leo
    Staff
    Customer Support

    Shouldn’t the CSS be something like this from the site?

    background: #B3FFAB;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #12FFF7, #B3FFAB);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #12FFF7, #B3FFAB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    and not using background-image?

    #398794
    David
    Staff
    Customer Support

    Hi Leo, any background you add to the .generate-content-header is going to overwrite the header image. I have noticed that the colour overlay and the image is written in the same background image property. Better still i notice that Tom has added the color as a linear gradient, but no option in the header panel to select gradient – so must of been planning ahead.

    Ha ha if you guys can see the amount of edits on this post you will die laughing. Here’s the final code:

    .generate-inside-page-header-content  {
    position: relative;
    z-index: 0;
    }
    .generate-inside-page-header-content:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #B3FFAB);
    visibility: visible;
    z-index: -1;
    }

    EDIT: I Just found a strange bug. If you add another comma separated RGBA colour to the Header Background image, although it gets rejected back to a transparent background it doesnt. It actually writes in a third gradient colour to what was there before, so you get a three step gradient – which is crazy lol

    #490645
    Dan

    Just to add to this discussion, the CSS applied as a color layer on top of the bg image is a linear gradient (with 2 exact values), is there a way in the wp-admin of the page header to set different values to the 2 gradient stops?
    I would prefer that to using the pseudo element.

    See screenshot:
    https://www.dropbox.com/s/x4et200lfeprq74/gp-gradient-ui.png?dl=0

    Thanks
    Dan

    #490968
    Tom
    Lead Developer
    Lead Developer

    Hi Dan,

    Currently there’s no way to do this from within the admin, but I’ll look into it πŸ™‚

    #490972
    Dan

    Thanks Tom!
    Much appreciated.

    Dan

    #523569
    BeeLady11

    Hi – I’ve tried putting this css into the child theme’s style.css but it’s had no effect. Any suggestions?

    .generate-inside-page-header-content {
    position: relative;
    z-index: 0;
    }
    .generate-inside-page-header-content:after {
    content: “”;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #B3FFAB);
    visibility: visible;
    z-index: -1;
    }

    Thanks very much!
    A πŸ™‚

    #523572
    BeeLady11

    Also tried:

    .blog .page-header-content {
    background: #03001e; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fdeff9, #ec38bc, #7303c0, #03001e); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fdeff9, #ec38bc, #7303c0, #03001e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    }

    (once I’ve got the gradient working, I’ll fiddle around with the colours )

    #523588
    BeeLady11

    Found out how to do this. For anyone else struggling with this, I’ve used the following CSS (I used colorzilla to create the gradient very easily and left it as solid in mobile, as it looked a bit funky as a gradient. Filter line commented out as it produces an error and I’m not too fussed about any IE below 10 πŸ™‚


    @media
    (min-width:769px) {
    .inside-header{
    /* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b14995+1,b14995+28,c85ec7+54,ffffff+86 */
    background: #b14995; /* Old browsers */
    background: -moz-linear-gradient(left, #b14995 1%, #b14995 28%, #c85ec7 54%, #ffffff 86%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #b14995 1%,#b14995 28%,#c85ec7 54%,#ffffff 86%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #b14995 1%,#b14995 28%,#c85ec7 54%,#ffffff 86%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#b14995′, endColorstr=’#ffffff’,GradientType=1 ); IE6-9 */
    }
    } /* End @media */

    #523770
    Leo
    Staff
    Customer Support
    #523860
    BeeLady11

    In action: https://essenceofhealing.co.uk/ (site still being built, but I do love Generatepress!)

Viewing 10 posts - 16 through 25 (of 25 total)
  • You must be logged in to reply to this topic.