change button colour with css

Tue Jan 29, 2013 6:22 pm

Hi,
I have this css file to change the colour of a button, I have uploaded it to new css.
Do I need to reference it somewhere?

Hrers the code

codediv.BlackBtnTheme .ui-btn-up-a{
background: rgb(76,76,76); /* Old browsers /
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); / Opera 11.10+ /
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); / IE10+ /
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); / IE6-9 */

}

div.BlackBtnTheme .ui-btn-hover-a{
background: rgb(181,189,200); /* Old browsers /
background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,189,200,1)), color-stop(36%,rgba(130,140,149,1)), color-stop(100%,rgba(40,52,59,1))); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); / Opera 11.10+ /
background: -ms-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); / IE10+ /
background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); / IE6-9 */

}

div.BlackBtnTheme .ui-btn-down-a{
background: rgb(180,221,180); /* Old browsers /
background: -moz-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(33%,rgba(82,177,82,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); / Opera 11.10+ /
background: -ms-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); / IE10+ /
background: linear-gradient(to bottom, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); / IE6-9 */

}/code

Tue Jan 29, 2013 7:17 pm

Hello Michael!

In your CSS, replace:codediv.BlackBtnTheme .ui-btn-up-a/codewithcodea.BlackBtnTheme.ui-btn-up-a/code
Then replace:codediv.BlackBtnTheme .ui-btn-hover-a/codewithcodea.BlackBtnTheme.ui-btn-hover-a/code
And finally, replace:codediv.BlackBtnTheme .ui-btn-down-a/codewithcodea.BlackBtnTheme.ui-btn-down-a/code
After replacing button color would be changed.

Tue Jan 29, 2013 7:45 pm

Hi Katya,
didn't work for me, I deleted button and I made the changes you suggested, no change to button, app is called "csstest" I have shared if this helps.

Cheers

Tue Jan 29, 2013 8:00 pm

You should change Class name property to "BlackBtnTheme".
CSS style will be applied to the button.

Tue Jan 29, 2013 8:39 pm

Katya,
you are a star!

This is getting very, very cool, exthemely cool, NO! its freezing! lol
button now works perfectly.

so I can now change the colour and gradient to any component?

As a suggestion,

a tutorial on how to do this with a .png or sprite would be great as some of the jquery components are very old fashioned, almost windows 95ish
This ability to manipulate themeroller makes designing an eye appealing app now possible within Tiggzi.
I am a very happy pixy

Tue Jan 29, 2013 8:52 pm

If you want to set style to other component you'll have to change these CSS class names (they're for button component only):code.ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a/code

Wed Jan 30, 2013 3:29 pm

Hi Katya,
I am trying to attach the same style to selectmenus, when I inspect in ff I get the same component name ".ui-btn-up_a,

is there a list of components names?

is selectmenu something like .ui_selectmenu_up-a ?

Wed Jan 30, 2013 4:35 pm

Hi Michael,

I was a bit wrong.
The following components have CSS classes .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a:

Button
Toggle
Select Menu
Navigation Bar
Radio Button
Checkbox
List
Collapsible block header

Which means you can use rules for these classes in CSS, and so stylize features listed above.

Wed Jan 30, 2013 5:16 pm

Cheers Katya,

I have tried selectmenu component, I entered the class "BlackBtnTheme" which is the css file name, works great with Buttons, but not selectmenu, also I have noticed that the class is not saved in properties,
What I mean is I put the class in properities after selecting selectmenu, save app, click anywhere on page and then click back on selectmenu and the class box is empty, colour effect on button displays in browser, but not the selectmenu

Wed Jan 30, 2013 10:06 pm

Michael,

There is a bug in editor, we will fix it as soon as possible.