Jump to content

Archived

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

Dominik

Background gradient options

Recommended Posts

Dominik

Will there be Background gradient options for all the section backgrounds?

or the page?

Share this post


Link to post
Share on other sites
Andrew

Could probably be added via an extension at some point 

Share this post


Link to post
Share on other sites
Simon

The WordPress color-picker does not natively support rgba and they have no intention of adding it unfortunately.

Would be nice to add a little slider under the color picker and the background image controls though and make the switch to rgba 

Share this post


Link to post
Share on other sites
Gavin_

Divi page builder uses RGBA on background elements - couldn't tell you how they do it.

Share this post


Link to post
Share on other sites
chrisayers

I use colorzilla for this. I make my gradient or transparency layer and call it .myfadedareawhite  .myfadedareablack  ect. then anytime I need the gradient I just call the class. Is this something your average client can do? No but it works well. For instance, this client wanted all his columns to be a faded white gradient with rounded edges.  I created "Guts" so I can apply this effect anywhere.

.guts {-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;-khtml-border-radius: 10px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */}

 

Also if you just create a big CSS stylesheet and host in on your main server with all these cheats you can then just import that into your head tags and you have your own mini bootstrap. Now when River Mist says "lets go pink this month" I can just open my dreamweaver and save changes without even logging into sites. Essentially I create my own bootstrap.

 

 

 

rm.png

Share this post


Link to post
Share on other sites
janpeeters

Hi @chrisayers I've tried to reproduce your columns with rounded edged just to get the workings of what you describe. What I do is copy your .guts css into my child theme custom CSS. I then put the .guts id into Advanced/Additional Section Classes of the section that I want to target. I must be overlooking something. Could you help out?

Share this post


Link to post
Share on other sites
chrisayers
13 minutes ago, janpeeters said:

Hi @chrisayers I've tried to reproduce your columns with rounded edged just to get the workings of what you describe. What I do is copy your .guts css into my child theme custom CSS. I then put the .guts id into Advanced/Additional Section Classes of the section that I want to target. I must be overlooking something. Could you help out?

This should get you an 80% white gradient with rounded edges on anything you put it on.

.transwhite{

  -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;-khtml-border-radius: 10px;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100&0.8+0,0.8+100;White+3D */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.8) 0%, rgba(229,229,229,0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(229,229,229,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0.8) 0%,rgba(229,229,229,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#cce5e5e5',GradientType=0 ); /* IE6-9 */
}

 

*I do leave colorzilla credited for my gradients. Anyone smart enough to read note text will enjoy it.

 

guts.png

Share this post


Link to post
Share on other sites
janpeeters

Thanks @chrisayers I me put a '.' Before the class in the Custom Section Classes box. Your screenshot cleared it all up. Thanks! All working now!

Share this post


Link to post
Share on other sites

×