7 replies to this topic

[frygurl]

I would like a site I'm working on to have a simple linear gradient that scales. I found CSS gradient generators online, but when I paste the custom CSS - nothing changes. Here is an example of the code I am using:

 

 

background: linear-gradient(to bottom,  #ffffff 0%,#91e9e2 100%);

 

Site URL is here: http://www.msbeautyp...om/wp.php/home/

 

I would appreciate help with this! Thanks so much.

 

 

[batman]

Hi

First you try with

background: linear-gradient {YOUR CODE;}

This is the format 

[frygurl]

Thanks for pointing that out. I changed the code, but it still doesn't work. Has anyone done this successfully? 

[James B]

Which area are you apply the code to? What is the gradient being used to color? You'd need to use firebug to find the selector of the item you're intending to adjust and apply your code. Such as below, #nav is the item being adjusted.

 

 
#nav {background:#ffffff;} 

If you need more info on css check out http://www.w3schools...css/default.asp

 

You can download firebug from www.getfirebug.com

[frygurl]

I want to apply the gradient to the main page background. I've used firebug and tried this, but no luck:

 

#page-canvas {background: linear-gradient{to bottom,  #ffffff 0%,#91e9e2 100%;}

[James B]

Hi there, depending on the setup of your site it will either be .canvas or .page-canvas (not #page-canvas as its a class so needs a .before).

 

Also gradients have different codes for different browsers, so you'll need to make sure you accommodate them all

 

 
.gradient-bg {
   /* fallback/image non-cover color */
   background-color: #1a82f7; 

   /* fallback image */
   background-image: url(images/fallback-gradient.png); 

   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));

   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}

More info can be found here - http://css-tricks.com/css3-gradients/

[frygurl]

Thank you. I'm still having trouble with this, but I think I'm on the right track. I'll keep working on it. 

[Rob]

I think the issue is that PlatformPro doesn't use CSS3 or HTML5.  As a result, style code in CSS3 will likely not work properly. Legacy products using gradients such as iBlogPro4 used graphic backgrounds, not CSS.