Jump to content

Archived

This topic is now archived and is closed to further replies.

menefegr

How do I make the background a gradient with CSS?

Recommended Posts

menefegr

I can't seem to do this with the body selector.  Furthermore, I see that the editor seems to change the config with and id called #pl_core_less, and uses something called @pl-base to set the color.

 

 

Here's an example of the CSS I would need to implement.  Can you please tell me what I need to do?

 

background: rgb(230,240,163); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(230,240,163) 0%, rgb(210,230,56) 50%, rgb(195,216,37) 51%, rgb(219,240,67) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(230,240,163)), color-stop(50%,rgb(210,230,56)), color-stop(51%,rgb(195,216,37)), color-stop(100%,rgb(219,240,67))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(230,240,163) 0%,rgb(210,230,56) 50%,rgb(195,216,37) 51%,rgb(219,240,67) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(230,240,163) 0%,rgb(210,230,56) 50%,rgb(195,216,37) 51%,rgb(219,240,67) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(230,240,163) 0%,rgb(210,230,56) 50%,rgb(195,216,37) 51%,rgb(219,240,67) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgb(230,240,163) 0%,rgb(210,230,56) 50%,rgb(195,216,37) 51%,rgb(219,240,67) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */

 

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

The code you have there should apply a gradient background when you add the class to the code. 
 

Also not sure what you mean by this "Furthermore, I see that the editor seems to change the config with and id called #pl_core_less, and uses something called @pl-base to set the color"


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
beardedavenger

That is a big mess of code. You don't need to do all that stuff. Let the compiler do it for you:

body {
  #gradient > .vertical (@red, @blue);
}

Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
menefegr

Danny/Bear, I tried your solutions and it appears the content base color (global options) is applying a color over body.  I couldn't seem to get rid of the content base color, do you have any workarounds?

Share this post


Link to post
Share on other sites
Danny
Hi, Can you provide a link to your site, as well as include two screenshots one showing what you have and the other showing us what you want. Once we have this information, we will be able to assist you further.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
beardedavenger

That image you linked to, is a radial gradient.

#gradient > .radial ( blue, @red);

Or you can get all ninja:

#gradient > .radialAdvanced ( blue, @red, 50%, 50px, 250px);

Translated

.radialAdvanced( innerColor | outerColor | horizontal | vertical | innerStop | outerStop ) 


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
menefegr

thanks bear, I tried applying that in the CSS editor, and even applying to body { }, but still the 'content base color' is still in the foreground.  This is what I've currently applied to my site http://209.236.72.17/~carebuil/

 

body {
#gradient > .radialAdvanced ( blue, @red, 50%, 50px, 250px);
}

Share this post


Link to post
Share on other sites
Rob

Hi,

 

I know the shortened, LESS CSS is preferable in many ways.  I'm an old-fashioned guy, and found this website really helpful with the gradient code I needed:

http://www.colorzilla.com/gradient-editor/

 

My reason is that not every browser uses LESS or generic background gradient CSS code.  The code provided by the link above will help you establish the changes you really desire. The code in the link includes all  browser variations.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
beardedavenger

"My reason is that not every browser uses LESS or generic background gradient CSS code. "

The browser doesnt read LESS. PageLines compiles it into CSS.

 

It compiles it, into the very thing you just posted.

 

You can see the mixin here, and what the browser sees when PageLines compiles it:

https://github.com/pagelines/DMS/blob/Dev/less/mixins.less#L435


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
menefegr

rob, that's funny you mention that site b/c that's exactly where I got my code from in the original post.

 

however, my problem is that I can't apply that code to the body { } because the "content base color" is always in the foreground, which sits above the body.

 

In a nutshell, getting the gradient code isn't my problem, getting it set to the right CSS selector, is.

Share this post


Link to post
Share on other sites

×