How To Add Gradient Color To Oceanwp Header Background

March 16, 2016 at eleven:20 pm #599287

Hello,
how can I modify the bar over the header into a slope from white to yellow in Quick CSS?
I already inverse the header and the title container but I don't know how this i is chosen in CSS. I am just able to change the "Alternate Background Colour" but I don't want to have it evidently-colored.
I'thousand working offline, then hither'south a quick screenshot:

The pink bar should exist the same gradient as the header and championship bar below.

Thank you in advance!
Greetings.

March 17, 2016 at 2:51 am #599356

Hey ping-pong!

We cannot come across the screenshot y'all 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%)!of import; /* FF3.6-15 */ groundwork: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%)!important; /* Chrome10-25,Safari5.1-half dozen */ background: linear-slope(to bottom,  #fefcea 0%,#f1da36 100%)!of import; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 )!important; /* IE6-ix */ }

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

Regards,
Vinay Kashyap

March 18, 2016 at v:xix pm #600421

Hey.

Sadly information technology isn't working – the bar stays pinkish…

This reply was modified 6 years, 2 months ago past ping-pong.

March xviii, 2016 at 5:24 pm #600429

Hi!

Please endeavor changing the code to post-obit one

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

Best regards,
Yigit

March 18, 2016 at 6:x pm #600478

Hi!
There isn't happening anything. The color but changes when I'g changing the "Alternate Background Colour" in "Logo Area", only there I can't create a gradient.

Regards.

March 18, 2016 at 6:38 pm #600486

Hi!

Practice you mind creating a temporary admin login and posting information technology here privately?

Cheers!
Yigit

March 18, 2016 at viii:26 pm #600541

I outset had to bring the webside online, merely here it is.

March nineteen, 2016 at 3:35 am #600617

Hey!

The code we provided works fine the issue is yous take multiple css rules applied for header

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

/* WORKING GRADIENT Groundwork*/

            #header_main {  groundwork: #DC2424; /* fallback for former browsers */ background: -webkit-linear-gradient(to left, #DC2424 , #4A569D); /* Chrome x-25, Safari 5.ane-half dozen */ background: linear-gradient(to left, #DC2424 , #4A569D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari seven+ */         }

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

Regards,
Vinay Kashyap

March 19, 2016 at 1:56 pm #600688

Hey,
thank yous. Simply that's the lawmaking I already had and which also was working. Only I also want to have a gradient in the bar over the header (the white i in your screenshot that's pink in mine), that one you can change the color in "Logo Area", "Alternate Groundwork Colour".

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

March xix, 2016 at 7:fifteen pm #600730

Hey.
I stock-still information technology in simply removing the upper bar with following code and making my header college.

            #header_meta { display: none; }

Cheers for your support.
Regards.

March 19, 2016 at ten:38 pm #600766

Hi!

Happy we could assistance you out.
Btw, If you take a moment, I would very much capeesh if you could chop-chop rate our theme, which wiII heIp the states keep the deveIopment.

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

Best regards,
Basilis