Docs

[Simon T]

Hi Guys,

Can someone please tell me why the navbar and footer in the navbar and footer on snaposweb.com.au are blank?
They are meant to be a gradient. Will post login details below:

[Simon T]

This reply has been marked as private.

[Christopher]

Hi there,

Please see the attachment, the gradient background displays fine.

Hope it helps.

[Simon T]

Hi,

It displays fine on chrome and on Safari, but not on firefox or IE.

[Joao]

Hi Simon

Gradient color are not interpreted the same way for all browsers, so in order that it works you need to add a bit more code than what you are using right now.

Please use this code instead inside the header and footer brackets and adjust the color according to your wishes.

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

This way you will be sure your background colors will work on every browser.

Hope that helps.

Joao

[Simon T]

That worked for the header, but the footer is still white. This is what I have under CSS:

footer.x-colophon {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#4878af’, endColorstr=’#0f0f47′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#4878af), to(#0f0f47)); /* for webkit browsers */
background: -moz-linear-gradient(top, #4878af, #0f0f47); /* for firefox 3.6+ */
}

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

footer.x-colophon.bottom {
    background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

}

Hope this helps – thanks!

[Simon T]

Nope, still white!

[Nabeel A]

Hey Simon,

It looks like CSS has not been added to your Customizer, please check your Customizer for any syntax error that could be preventing the CSS to work.

Thanks!

[Simon T]

Hi Nabeel,

Code is in there now – still not working.

Cheers.

[John Ezra]

Hi there,

Thanks for updating the thread! Like mentioned before there could be a syntax error that is preventing CSS below it from working. Upon checking your CSS in the customizer, indeed, you are missing a “}” closing curly bracket on your first snippet.

See the image below to know where you need to insert it. Please do so and all should work.

Let us know how that goes. Hope this helps – thanks!

[Simon T]

Apologies, thanks for your help!!!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Simon T]

Hi guys, help please! This website is now live at domainshadesails.com.au and the gradient works on firefox but not on IE. My CSS code is:

.x-navbar {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#4878af’, endColorstr=’#0f0f47′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#4878af), to(#0f0f47)); /* for webkit browsers */
background: -moz-linear-gradient(top, #4878af, #0f0f47); /* for firefox 3.6+ */
}

footer.x-colophon.bottom {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#4878af’, endColorstr=’#0f0f47′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#4878af), to(#0f0f47)); /* for webkit browsers */
background: -moz-linear-gradient(top, #4878af, #0f0f47); /* for firefox 3.6+ */
}

[Paul R]

Hi,

May I know which version of IE did you check.

You can try linear gradient.

https://msdn.microsoft.com/library/jj152126(v=vs.85).aspx

Hope that helps.

[Author]

Posts