Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 16, 2016 at 11:20 pm #599287
    ping-pong

    Hello,
    how can I change the bar over the header into a gradient from white to yellow in Quick CSS?
    I already changed the header and the title container but I don’t know how this one is called in CSS. I am only able to change the “Alternate Background Colour” but I don’t want to have it plain-colored.
    I’m working offline, so here’s a quick screenshot:

    The pink bar should be the same gradient as the header and title bar below.

    Thanks in advance!
    Greetings.

    March 17, 2016 at 2:51 am #599356
    Vinay

    Hey ping-pong!

    We cannot see the screenshot you uploaded.

    Please use the below css in Quick CSS

    add !important before ; to the gradient property.

    #header {
background: -moz-linear-gradient(top,  #fefcea 0%, #f1da36 100%)!important; /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%)!important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fefcea 0%,#f1da36 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 )!important; /* IE6-9 */
}

    If the above don’t work for you please upload the screenshot to dropbox and share the link here.

    Regards,
    Vinay Kashyap

    March 18, 2016 at 5:19 pm #600421
    ping-pong

    Hey.

    Sadly it isn’t working – the bar stays pink…

    • This reply was modified 8 years, 7 months ago by ping-pong.
    March 18, 2016 at 5:24 pm #600429
    Yigit

    Hi!

    Please try changing the code to following one

    .header_bg {
background: -moz-linear-gradient(top,  #fefcea 0%, #f1da36 100%)!important; /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%)!important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fefcea 0%,#f1da36 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 )!important; /* IE6-9 */
}

    Best regards,
    Yigit

    March 18, 2016 at 6:10 pm #600478
    ping-pong

    Hi!
    There isn’t happening anything. The color only changes when I’m changing the “Alternate Background Color” in “Logo Area”, but there I can’t create a gradient.

    Regards.

    March 18, 2016 at 6:38 pm #600486
    Yigit

    Hi!

    Do you mind creating a temporary admin login and posting it here privately?

    Cheers!
    Yigit

    March 18, 2016 at 8:26 pm #600541
    ping-pong

    I first had to bring the webside online, but here it is.

    March 19, 2016 at 3:35 am #600617
    Vinay

    Hey!

    The code we provided works fine the issue is you have multiple css rules applied for header

    Remove the css blocks that you are not using and only use the one we have added below at the bottom

    /* WORKING GRADIENT BACKGROUND*/

    #header_main { 
background: #DC2424; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #DC2424 , #4A569D); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #DC2424 , #4A569D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */        
}

    Check this site for some nice gradients http://uigradients.com/#DayTripper

    Regards,
    Vinay Kashyap

    March 19, 2016 at 1:56 pm #600688
    ping-pong

    Hey,
    thank you. But that’s the code I already had and which also was working. But I also want to have a gradient in the bar over the header (the white one in your screenshot that’s pink in mine), that one you can change the color in “Logo Area”, “Alternate Background Color”.

    Is it possible to have a gradient there, too?
    Regards.

    March 19, 2016 at 7:15 pm #600730
    ping-pong

    Hey.
    I fixed it in simply removing the upper bar with following code and making my header higher.

    #header_meta {
display: none;
}

    Thank you for your support.
    Regards.

    March 19, 2016 at 10:38 pm #600766
    Basilis

    Hi!

    Happy we could help you out.
    Btw, If you have a moment, I would very much appreciate if you could quickly rate our theme, which wiII heIp us keep the deveIopment.

    We really appreciate your feedback and input and again, thanks a lot for using our theme!

    Best regards,
    Basilis

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.