Wikia

Community Central

How do i change the button color?

97,288pages on
this wiki

Forum page

This Forum has been archived

Visit the new Forums
Forums: Index Community Central Forum 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.
Note: This topic has been unedited for 1592 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? Wikibutton 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; }
That is how it's currently set --  Roguebfl   talk    contribs    email   00:02, August 11, 2010 (UTC)

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)

There is a button generator here. —Manyman (talk) 07:30, August 11, 2010 (UTC)
Awesome find, worked great and got the exact colors I wanted. WifiShadow 11:44, August 11, 2010 (UTC)

Around Wikia's network

Random Wiki