custom widhet color

hueskye
November 12, 2012 at 9:56 am #6197

Hi;

I would like to ask if there is a way to make only one of the widgets box in different color?

all the widgets i have are blue by default. Now i want them to be blue still, just i want to make one of them in orange.

any ideas?

Prasanna SP
November 12, 2012 at 1:34 pm #33647

Like the Categories widget in my test site? – http://test.prasannasp.net/

Please provide link to your site

hueskye
November 12, 2012 at 1:51 pm #33648

hi;

Almost:)

i need to recolor the header of the widget with gradient

so my site is Serwis narciarski;

and now the header of widget having “Newsletter”, should be recolored into orange-black gradient.
Prasanna SP
November 12, 2012 at 2:09 pm #33649
Can you give HEX colour code for orange? I assume it as #FFA500. You can choose colour code from here – http://www.colorpicker.com/

Top orange, bottom black,
```
#alo-easymail-widget-2 h3 {

background: linear-gradient(#FFA500, #000000) repeat scroll 0 0 transparent;

background: -moz-linear-gradient(#FFA500, #000000) repeat scroll 0 0 transparent;

background: -o-linear-gradient(#FFA500, #000000) repeat scroll 0 0 transparent;

background: -webkit-linear-gradient(#FFA500, #000000) repeat scroll 0 0 transparent;

background: -ms-linear-gradient(#FFA500, #000000) repeat scroll 0 0 transparent;

}
```
Top black, bottom orange,
```
#alo-easymail-widget-2 h3 {

background: linear-gradient(#000000, #FFA500) repeat scroll 0 0 transparent;

background: -moz-linear-gradient(#000000, #FFA500) repeat scroll 0 0 transparent;

background: -o-linear-gradient(#000000, #FFA500) repeat scroll 0 0 transparent;

background: -webkit-linear-gradient(#000000, #FFA500) repeat scroll 0 0 transparent;

background: -ms-linear-gradient(#000000, #FFA500) repeat scroll 0 0 transparent;

}
```
hueskye
November 12, 2012 at 2:16 pm #33650

thanx 🙂

I presume, I should insert this inside my child theme CSS?

Prasanna SP
November 12, 2012 at 2:18 pm #33651

Yes, in child-theme style.css or in Graphene Options –> Display –> Custom CSS

hueskye
November 12, 2012 at 2:21 pm #33652

thanx Prasanna, you re the best as always;)

Prasanna SP
November 14, 2012 at 7:40 am #33653

Marking thread as resolved. You can do this yourself as well.