Changing the background-color of a...

User 91713 Photo


Registered User
83 posts

Mansour, thanks for joining. I implemented the code you provided, but the result is the same. The button still is gray.
The odd thing is we have tried several combinations by now and the button seems to be a tuff one. It doesn't allow us to change it. There is a solution. I can delete the button and craft my own. But that feels like surrendering.
The perfection isn't reached in one pass.
User 434929 Photo


Ambassador
938 posts

First watch this clip and see how I do my troubleshooting
http://www.youtube.com/watch?v=TximrN-IuX0

Then read following

In my opinion the problem the background color properties and value for button-submit selector in coffeegrinder.css document for submit-button does not take effect unless we apply the following ;

button[type=submit].button-submit-1 {
color: #33FF66;
background-color: #CC785E;
border-color: #FF0066;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #5CC3FF), color-stop(1, #5CC3FF));
background-image: -ms-linear-gradient(left, #5CC3FF, #5CC3FF);
background-image: -o-linear-gradient(left, #5CC3FF, #5CC3FF);
background-image: -moz-linear-gradient(left, #5CC3FF, #5CC3FF);
background-image: -webkit-linear-gradient(left, #5CC3FF, #5CC3FF);
background-image: linear-gradient(to right, #5CC3FF, #5CC3FF);
}
--------------------------------------------------------------------------------------------------------------------------------
Submit button properties in CSS document.
input[type="submit"], button, .link-button {display: inline; padding:10px 0 10px 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:1em; color:rgb(70,70,70); -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; font-size:0.875em; border: 1px solid #919191; -moz-text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.3); -webkit-text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.3); text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.3); background-color: #c2c2c2; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, gainsboro), color-stop(1, #c2c2c2)); background-image: -webkit-linear-gradient(top, gainsboro, #c2c2c2); background-image: -moz-linear-gradient(top, gainsboro, #c2c2c2); background-image: -ms-linear-gradient(top, gainsboro, #c2c2c2); background-image: -o-linear-gradient(top, gainsboro, #c2c2c2); background-image: linear-gradient(top, bottom, gainsboro, #c2c2c2); }

That's why you can not change the background color only and you have to apply the following.

button[type=submit].button-submit-1 {
color: #33FF66;
background-color: #CC785E;
border-color: #FF0066;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #5CC3FF), color-stop(1, #5CC3FF));
background-image: -ms-linear-gradient(left, #5CC3FF, #5CC3FF);
background-image: -o-linear-gradient(left, #5CC3FF, #5CC3FF);
background-image: -moz-linear-gradient(left, #5CC3FF, #5CC3FF);
background-image: -webkit-linear-gradient(left, #5CC3FF, #5CC3FF);
background-image: linear-gradient(to right, #5CC3FF, #5CC3FF);
}

By applying above code it works perfectly here in my side and as you see in video clip too and off course you can change the color of your choice the above code is just an example
Guys at coffeecup are awesometacular.
User 434929 Photo


Ambassador
938 posts

If I understand right this code provided in coffeegrinder.css and as you see below we have no background properties and value for it, all we have addressing to -webkit-appearance.
That's why your custom.css does not take effect unless you use what it has been addressed in wireframe-theme.css to use
these properties and value provided by { -webkit-appearance: button; cursor: pointer; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }


and addressing to use webkit-appearance and webkit-appearance provided in wireframe-theme.css and those properties and value to submit and reset buttons coming from wireframe-theme.css not coffeegrinder.css

Guys at coffeecup are awesometacular.
User 434929 Photo


Ambassador
938 posts

I figure it out what is wrong :

in your custom.css document your selector is; button.button-submit-1

button.button-submit-1{
background-color:black;
color:white;
}


Go and replace your selector to this ; button[type=submit].button-submit-1
then your background color should takes effect.

button[type=submit].button-submit-1{
background: #3333FF;
color:white;
}


Note : some how background-color:black; does not work and change it to background:#color value here ;

background-color:black; to background: #000000;


Guys at coffeecup are awesometacular.
User 91713 Photo


Registered User
83 posts

Mansour, I admire your perseverance and in-depth knowlodge. I drop just a quick note here to let you know that I read all your coments, and for me it means "homework". I had to switch to Firefox and thanks to your video I found my way around in that webdeveloper tool. I paused regularly and replicated your steps (at least I like to think so), but in your case at 38'' the button turns blue and mine doesn't. I have to puzzle some more.
The perfection isn't reached in one pass.
User 434929 Photo


Ambassador
938 posts

The problem is your selector button.button-submit-1 you have chosen wrong ID / Class , RLM produce this class button[type=submit].button-submit-1 for Submit button, all you have to do go back to to your custom css and change it to button[type=submit].button-submit-1


next time before you make any custom.CSS document go to main.css document first and see what RLM produced as class or ID then copy and paste the given class into into your custom css document.

Note; My way of doing custom CSS document is:
I make a copy of main CSS and rename to custom css and delete and add or change properties and values only I don't mess up with selectors .


http://en.support.files.wordpress.com/2011/09/css-selectors-lrg.png
Guys at coffeecup are awesometacular.
User 91713 Photo


Registered User
83 posts

That made sense. Hurray I now have a blue button :cool:. The problem was that Iwas all the time stuggling with the css and forgot that I adusted the classes in the from in the html. I exported the site again and went through all the steps you advised. Now I have a custom button. Thanks so much.
The perfection isn't reached in one pass.
User 434929 Photo


Ambassador
938 posts

Hurray! :D

Another good extension / add on for Firefox is Firebug http://getfirebug.com/

Watch the Introduction to Firebug video the get the idea
Guys at coffeecup are awesometacular.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.