WordPress.com

1. mylesformby
   Member
   Apr 25, 2012, 4:09 AM

   Hi I'm trying to change the color of the gradient button but no colors I put in seem to change anything. I've isolated the button (I think) but nothing seems to work.
   Any ideas?
   http://pavementportraits.com
   This appears to be the code for the button:
   <br /> input[type="submit"] {<br /> background: -moz-linear-gradient(center top , #76AEE8, #2E6EB0) repeat scroll 0 0 transparent;<br /> border: 1px solid #2E6EB0;<br /> border-radius: 6px 6px 6px 6px;<br /> box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);<br /> color: #FFFFFF;<br /> cursor: pointer;<br /> display: inline-block;<br /> font-weight: bold;<br /> margin: 0 2px;<br /> padding: 5px;<br /> text-align: center;<br /> text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);<br /> vertical-align: baseline;<br /> }<br />

   The blog I need help with is pavementportraits.com.

2. mylesformby
   Member
   Apr 25, 2012, 4:15 AM

   ps I want to make the button a light grey gradient.

3. jackiedana
   Happiness Engineer
   Apr 25, 2012, 4:29 AM

   You were close! If you have the custom design upgrade, you can add this to your CSS:

   input[type="submit"]
   {
   background: -moz-linear-gradient(center top , #F2F2F2, #808080) repeat scroll 0pt 0pt transparent;
   }

   I picked some greys from the list at http://www.december.com/html/spec/color0.html, but you could substitute the two numbers that I changed (#F2F2F2, #808080) with any other greys on that list.

4. mylesformby
   Member
   Apr 25, 2012, 4:43 AM

   Thanks, but that didn't work. No colors I put in seem to change it.

5. joshidaniel
   Member
   Apr 25, 2012, 6:22 AM

   try this:

   input[type=submit] {<br /> background: #777;<br /> border: solid 1px #777;<br /> color: #fff;<br /> cursor: hand;<br /> cursor: pointer;<br /> display: inline-block;<br /> font-weight: bold;<br /> margin: 0 2px;<br /> padding: 5px;<br /> text-align: center;<br /> text-shadow: 0 1px 1px #000;<br /> text-shadow: 0 1px 1px rgba(0,0,0,.3);<br /> vertical-align: baseline;<br /> }

6. designsimply
   Happiness Engineer
   Apr 25, 2012, 2:36 PM

   The code you first posted seems to have some properties missing. To see what I mean, open the Blaskan original stylesheet:
   https://s-ssl.wordpress.com/wp-content/themes/pub/blaskan/style.css?m=1333592456g&minify=false

   And look for the "input[type=submit]" rule.

   Here it is for reference:

   input[type=submit] {
   	background: #2e6eb0;
   	background: -moz-linear-gradient(top, #76aee8, #2e6eb0);
   	background: -o-linear-gradient(top, #76aee8, #2e6eb0);
   	background: -webkit-gradient(linear, left top, left bottom, from(#76aee8), to(#2e6eb0));
   	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#76aee8', endColorstr='#2e6eb0' );
   	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#76aee8, endColorstr=#2e6eb0)";
   	border: solid 1px #2e6eb0;
   	-webkit-border-radius: 6px;
   	-moz-border-radius: 6px;
   	border-radius: 6px;
   	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3);
   	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.3);
   	box-shadow: 0 1px 2px #000;
   	box-shadow: 0 1px 2px rgba(0,0,0,.3);
   	color: #fff;
   	cursor: hand;
   	cursor: pointer;
   	display: inline-block;
   	font-weight: bold;
   	margin: 0 2px;
   	padding: 5px;
   	text-align: center;
   	text-shadow: 0 1px 1px #000;
   	text-shadow: 0 1px 1px rgba(0,0,0,.3);
   	vertical-align: baseline;
   }

   There are some vendor specific rules in there that will affect different browsers in different ways. You should also note that gradients are new in CSS and not all browsers support them—some older browsers don't support them at all in fact. In that case, the fall back solid color is used and so you should set that as well.

   To change the gradients for the submit button (not including the hover, focus, or active states), you could start with the CSS from the original stylesheet and just topye the color values and update those. Here is an example:

   input[type=submit] {
   	background: #808080;
   	background: -moz-linear-gradient(top, #F2F2F2, #808080);
   	background: -o-linear-gradient(top, #F2F2F2, #808080);
   	background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#808080));
   	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#808080' );
   	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#F2F2F2, endColorstr=#808080)";
   	border: solid 1px #808080;
   }

   To also change out the hover, focus, and active states, you would need to repeat the code with different colors you pick out for each of those states just like you can see in the original stylesheet. Here is an example to get you started:

   input[type=submit]:hover,
   input[type=submit]:focus {
   	background: #f43059;
   	background: -moz-linear-gradient(top, #fba2b5, #f43059);
   	background: -o-linear-gradient(top, #fba2b5, #fba2b5);
   	background: -webkit-gradient(linear, left top, left bottom, from(#fba2b5), to(#f43059));
   	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fba2b5', endColorstr='#f43059');
   	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fba2b5, endColorstr=#f43059)";
   	border-color: #f43059;
   }
   
   input[type=submit]:active {
   	background: #fba2b5;
   	background: -moz-linear-gradient(top, #f43059, #fba2b5);
   	background: -o-linear-gradient(top, #f43059, #fba2b5);
   	background: -webkit-gradient(linear, left top, left bottom, from(#f43059), to(#fba2b5));
   	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f43059', endColorstr='#fba2b5');
   	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f43059, endColorstr=#fba2b5)";
   	border-color: #f43059;
   	color: #fba2b5;
   }

   Adjust the color codes as necessary.

Topic Closed

This topic has been closed to new replies.