How do i change the button color?
63,452pages on
this wiki
this wiki
Forum page
Forums: Index → Support Requests → How do i change the button color?
Wikia's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.
To contact staff directly or to report bugs, please use Special:Contact.
Note: This topic has been unedited for 648 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.
How do I change the color of the wiki buttons?
WifiShadow 23:38, August 10, 2010 (UTC)
- cb=250...r=notIE (line 352)
- a.wikia-button:active, span.wikia-button a:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active, button:active { background-image:-moz-linear-gradient(center top , #006722 20%, #009933 70%); color:#FFFFFF; }
- cb=250...r=notIE (line 287)
- a.wikia-button, span.wikia-button a, input[type="submit"], input[type="reset"], input[type="button"], button { -moz-border-radius:7px 7px 7px 7px; -moz-box-shadow:0 0 0 1px #2C802C; background-color:#009933; background image:-moz-linear-gradient(center top , #009933 20%, #006722 70%); border:1px solid #BEDDBE; color:#FFFFFF; cursor:pointer; display:inline-block; font:bold 12px/17px "Lucida Grande",sans-serif; height:17px; margin:0; padding:0 7px; text-decoration:none; white-space:nowrap; }
Edit the "@group BUTTONS" section in the Monaco.css, below is from the Wikia Obsession.
The IE color gradients are a little different and have a "FF" in front of the normal 6 digit hex for the color.
/* @group BUTTONS */
a.wikia-button,
a.wikia-button:visited,
span.wikia-button a,
span.wikia-button a:visited,
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
background-color: #0C710A;
background-image: -moz-linear-gradient(top, #0F910D 20%, #0C710A 70%);
background-image: -webkit-gradient(linear, 0% 20%, 0% 70%, from(#0F910D), to(#0C710A));
border-color: #FFFFFF;
box-shadow: 0 1px 0 #0C6B0A, 0 -1px 0 #0C6B0A, 1px 0 0 #0C6B0A, -1px 0 0 #0C6B0A;
color: #FFFFFF;
-moz-box-shadow: 0 0 0 1px #0C6B0A;
-webkit-box-shadow: 0 1px 0 #0C6B0A, 0 -1px 0 #0C6B0A, 1px 0 0 #0C6B0A, -1px 0 0 #0C6B0A;
}
/* IE Styles */
a.wikia-button,
span.wikia-button a,
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#FF0F910D", EndColorStr="#FF0C710A");
outline: 1px solid #0C6B0A\9;
}
/* Hover and Active states */
a.wikia-button:hover,
span.wikia-button a:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
text-shadow: #000 0 1px 1px;
}
a.wikia-button:active,
span.wikia-button a:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active {
color: #FFF;
background-image: -moz-linear-gradient(top, #0C710A 20%, #0F910D 70%);
background-image: -webkit-gradient(linear, 0% 20%, 0% 70%, from(#0C710A), to(#0F910D));
}
There are some specific colors in the Stock Themes section of the Logo Creation Wiki, just copy the "@group BUTTONS".
- --Sxerks 00:15, August 11, 2010 (UTC)
Thanks you both for the reply's. It turned out that this line
background-image: -moz-linear-gradient(top, #0F910D 20%, #0C710A 70%);
I had it
background-image: -moz-linear-gradient(top, #0F910D 20%, #0C710A70%);
Changing it worked, but ended up following the later suggestion of copying the buttons part of the stock them. WifiShadow 00:55, August 11, 2010 (UTC)
- Awesome find, worked great and got the exact colors I wanted. WifiShadow 11:44, August 11, 2010 (UTC)