Fandom

Community Central

How do i change the button color?

Forum page

18,993pages on
this wiki
Add New Page
Share

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

This Forum has been archived

Visit the new Forums
Forums: Index Community Central Forum How do i change the button color?
Fandom'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 2292 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)

Also on Fandom

Random Wiki