Background color different in real life

Support
#1

Hey there,
I noticed that the background color of my site is not the one I choosed.
You can see the difference in the 2 screenshots :
What I see in Pro (and what I’d like to have) :

What I have on my website :

#2

Hi There,

It could be the default CSS overrides your custom CSS.

Please update your custom CSS to this:


.grad1 {
	background: -moz-linear-gradient(top,rgba(244,244,244,1) 0%,rgba(255,255,255,0) 100%) !important;
	background: -webkit-linear-gradient(top,rgba(244,244,244,1) 0%,rgba(255,255,255,0) 100%) !important;
	background: linear-gradient(to bottom,rgba(244,244,244,1) 0%,rgba(255,255,255,0) 100%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4',endColorstr='#00ffffff',GradientType=0 );
}

.grad2 {
	background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(244,244,244,1) 100%) !important;
	background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(244,244,244,1) 100%) !important;
	background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(244,244,244,1) 100%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff',endColorstr='#f4f4f4',GradientType=0 );
}

.grad3 {
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(136,188,211,1) 100%) !important;
	background: -webkit-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(136,188,211,1) 100%) !important;
	background: linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(136,188,211,1) 100%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#88bcd3',GradientType=0 );
}

.grad4 {
	background: -moz-linear-gradient(top,rgba(137,255,231,0) 0%,rgba(196,255,243,1) 50%,rgba(255,255,255,0) 100%) !important;
	background: -webkit-linear-gradient(top,rgba(137,255,231,0) 0%,rgba(196,255,243,1) 50%,rgba(255,255,255,0) 100%) !important;
	background: linear-gradient(to bottom,rgba(137,255,231,0) 0%,rgba(196,255,243,1) 50%,rgba(255,255,255,0) 100%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089ffe7',endColorstr='#00ffffff',GradientType=0 );
}

.graddiag {
	background: -moz-linear-gradient(top,rgba(254,252,234,0.01) 0%,rgba(191,199,255,1) 100%) !important;
	background: -webkit-linear-gradient(top,rgba(254,252,234,0.01) 0%,rgba(191,199,255,1) 100%) !important;
	background: linear-gradient(to bottom,rgba(254,252,234,0.01) 0%,rgba(191,199,255,1) 100%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03fefcea',endColorstr='#bfc7ff',GradientType=0 );
}
#3

I changed it, but it doesn’t solve my problem.
This problem is site wide whereas the custom css you reworked is only applied to the home page.

#4

Hi there,

First of all, in the Javascript custom code section of the Pro > Launch > Theme Options > JS you added PHP code which throws an error.

You can not add the PHP code below there:

<?php if( is_single() ) { ?>
<link rel="amphtml" href="https://mercury.postlight.com/amp?url=<?php echo urlencode(get_the_permalink()); ?>">
<?php } ?>
  

add_action('wp_print_styles', 'load_fonts');

I removed that code. You should add that to the Child Theme functions.php file. For more information:

Regarding the background color, it seems that an additional color is in the CSS portion of the Pro Editor. Kindly go to Pro > Launch > Theme Options > Layout and Design > Background Options and set your desired color there for the background of the website.

Thank you.

#5

Perfect, thanks ! :thumbsup:

#6

You’re most welcome.