Button Color Change [#1635794]

Hi,
I'm not a programmer and having hard time to find out how can I use different color buttons on the webform with this theme.
There is a lot of button styles defined in the Documentation (http://wiki.morethanthemes.com/index.php?title=Skeleton:Demonstration_Co...) but I couldn't find anywhere how to use different buttons this theme has on all or any particular webform. Where and how should I call "a.button.darkred" for example. I suppose it's somewhere on style.css, but which line?
Could anyone please help me here as I believe there are more newbies like me in Drupal community :)
Thanks!

Comment	File	Size	Author
#7	skeleton-webform-1.jpg	295.94 KB	gtsopour
#7	skeleton-webform-2.jpg	345.35 KB	gtsopour

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

gtsopour CreditAttribution: gtsopour commented 15 June 2012 at 01:08

Assigned:

Unassigned

» gtsopour

Comment #2

netikseo CreditAttribution: netikseo commented 4 July 2012 at 07:54

Hmmm, according to your letter:
"Since Skeleton theme is a Drupal community asset, I would kindly ask you to post your questions and thoughts in the Project's issue tracking system at drupal.org (http://drupal.org/project/issues/skeletontheme). Doing that your issue will remain there, public accessible and may help other community member too. This will also be your contribution to the community :-). Our staff is monitoring the project pages so you will get an answer there. "

3 weeks after posting and still no answer to what seems and easy question especially for creators. Is this how you handle support? What happens if someone has bigger issue? Shame...

Anyone more experienced than me could you please look into the code and let me know how should I change the color of the button on the webform using one of the button styles available with this theme?

Thanks!

Comment #3

gtsopour CreditAttribution: gtsopour commented 4 July 2012 at 10:34

Hello netikSEO,
thank you for this issue report and really sorry for the delay. We would like you to know that we do our best to support all the open issues on all our drupal.org projects, but in certain periods our time is very limited.

In any case, i will help you directly. Do you want to change the color only to a specific system button or do you want to change the background color to all system buttons? Is your Drupal installation online in order to point me to this button?

For your info and for any custom (not system) button, you are able to use this markup http://wiki.morethanthemes.com/index.php?title=Skeleton:Demonstration_Co.... You are able to see these button styles here http://demo.drupalizing.com/skeleton/node/8

Thanks
George

Comment #4

netikseo CreditAttribution: netikseo commented 4 July 2012 at 12:36

Hi George,

Yes, I understand that you have priorities and free themes are not the main ones, but to wait for a response for 3 weeks...

I checked all your documentation, but it doesn't explain how to change color of the button on the webform (http://drupal.org/project/webform). I have your theme installed on my local machine, so can't provide a link.

I really like you theme and was going to put it on the live site, but I want to use different color on "submit" buttons and don't know how to do it. You have a lot of button styles which is nice, so my understanding is, that I just need to edit a code somewhere so the default button would be a.button.darkred for example. If you could help with that - that would be great!

Thanks in advance!

Comment #5

gtsopour CreditAttribution: gtsopour commented 4 July 2012 at 13:06

Hello netikSEO,
thank you for your reply. You can find bellow some extra info regarding your request.

This brief guide will demonstrate how to setup Skeleton theme to support a local.css file where custom CSS rules and modifications could be placed. Following this practise, there is no worry if the next theme update will override all your custom changes.
This can be done in the follwong simple steps:

1. Create an empty .css file under the /sites/all/themes/skeletontheme/css path and name it as you wish. local.css is always a good choice.

2. Edit the skeletontheme.info file and add a line like stylesheets[all][] = css/local.css after stylesheets[all][] = color/colors.css

3. Clear all cached data.
This step is important in order to force your template to be informed for the changes you have made in the template files. To do this go to Administer » Site configuration » Performance » Clear cached data

4. Copy the button style rules (normal and hover state) which you want from css/style.css to css/local.css.
For example and for Dark Red Button copy the following code to local.css:

/* Dark Red Button */
a.button.darkred {
/* IE10 */ 
background-image: -ms-linear-gradient(top, #981010 0%, #6b0606 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #981010 0%, #6b0606 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #981010 0%, #6b0606 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #981010), color-stop(1, #6b0606));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #981010 0%, #6b0606 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #981010 0%, #6b0606 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#981010', endColorstr='#6b0606');

border: 1px solid #6f0606;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
-ms-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 1px 0 0 #c41717;
-webkit-box-shadow: inset 0 1px 0 0 #c41717;
-o-box-shadow: inset 0 1px 0 0 #c41717;
box-shadow: inset 0 1px 0 0 #c41717;
color: white;
text-shadow: 0 1px 0 #4b0202;
position: relative;
}

a.button.darkred:hover {
/* IE10 */ 
background-image: -ms-linear-gradient(top, #5c0505 0%, #7e1010 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #5c0505 0%, #7e1010 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #5c0505 0%, #7e1010 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5c0505), color-stop(1, #7e1010));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #5c0505 0%, #7e1010 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #5c0505 0%, #7e1010 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c0505', endColorstr='#7e1010');

-moz-box-shadow: inset 0 1px 0 0 #a91919;
-webkit-box-shadow: inset 0 1px 0 0 #a91919;
-o-box-shadow: inset 0 1px 0 0 #a91919;
box-shadow: inset 0 1px 0 0 #a91919;
cursor: pointer;
}

5. Add these styles to all theme buttons.
Finally, your local.css will contain the following code

/* Dark Red Button */
a.button.darkred, 
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
/* IE10 */ 
background-image: -ms-linear-gradient(top, #981010 0%, #6b0606 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #981010 0%, #6b0606 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #981010 0%, #6b0606 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #981010), color-stop(1, #6b0606));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #981010 0%, #6b0606 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #981010 0%, #6b0606 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#981010', endColorstr='#6b0606');

border: 1px solid #6f0606;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
-ms-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 1px 0 0 #c41717;
-webkit-box-shadow: inset 0 1px 0 0 #c41717;
-o-box-shadow: inset 0 1px 0 0 #c41717;
box-shadow: inset 0 1px 0 0 #c41717;
color: white;
text-shadow: 0 1px 0 #4b0202;
position: relative;
}

a.button.darkred:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
/* IE10 */ 
background-image: -ms-linear-gradient(top, #5c0505 0%, #7e1010 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #5c0505 0%, #7e1010 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #5c0505 0%, #7e1010 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5c0505), color-stop(1, #7e1010));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #5c0505 0%, #7e1010 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #5c0505 0%, #7e1010 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c0505', endColorstr='#7e1010');

-moz-box-shadow: inset 0 1px 0 0 #a91919;
-webkit-box-shadow: inset 0 1px 0 0 #a91919;
-o-box-shadow: inset 0 1px 0 0 #a91919;
box-shadow: inset 0 1px 0 0 #a91919;
cursor: pointer;
}

Hope my answer will help you.

Thanks
George

Comment #6

netikseo CreditAttribution: netikseo commented 5 July 2012 at 01:38

Thanks George! Very nice and detailed instructions, but... it doesn't work. My webform buttons still have default color. I cleared the cache after all steps as well. Didn't help. Have you tested this with the webform module on your site? It seems that webform button uses this css (line 480):

/* Form Buttons */

button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #E3E3E3));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E3E3E3');

border: 1px solid #dbdbdb;
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
-o-border-radius: 6px; 
-ms-border-radius: 6px; 
-khtml-border-radius: 6px; 
border-radius: 6px;
-moz-box-shadow: inset 0 1px 0 0 white; 
-webkit-box-shadow: inset 0 1px 0 0 white; 
-o-box-shadow: inset 0 1px 0 0 white; 
box-shadow: inset 0 1px 0 0 white;
color: #333333; 
text-shadow: 0 1px 0 white; 
position: relative; font-weight:bold; padding: 8px 1em 9px 1em; }

button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
/* IE10 */ 
background-image: -ms-linear-gradient(top, #DBDBDB 0%, #F2F2F2 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #DBDBDB 0%, #F2F2F2 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #DBDBDB 0%, #F2F2F2 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DBDBDB), color-stop(1, #F2F2F2));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #DBDBDB 0%, #F2F2F2 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #DBDBDB 0%, #F2F2F2 100%);
/* IE6-9 */ 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#DBDBDB', endColorstr='#F2F2F2');

-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
-o-border-radius: 6px; 
-ms-border-radius: 6px; 
-khtml-border-radius: 6px; border-radius: 6px;
-moz-box-shadow: inset 0 1px 0 0 white;
-webkit-box-shadow: inset 0 1px 0 0 white;
-o-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
cursor: pointer; 
}

So to change the button I need to copy darkred values here? Sure it's not right and there is better way to do this...

Comment #7

gtsopour CreditAttribution: gtsopour commented 5 July 2012 at 10:34

File	Size
skeleton-webform-2.jpg	345.35 KB
skeleton-webform-1.jpg	295.94 KB

Hello netikSEO,
you can see my final result on the attachments. Yes, I have installed the webform module. Have you followed exactly all my instructions with all steps and local.css - skeletontheme.info changes?

Thanks
George

Comment #8

netikseo CreditAttribution: netikseo commented 6 July 2012 at 10:07

Status:

Active

» Closed (fixed)

OK, I figured out what I missed. Your instructions were not clear for me with step 5:
"5. Add these styles to all theme buttons."
I missed these lines in local css:

button,
input[type="submit"],
input[type="reset"],
input[type="button"]

So this is why it didn't work. Of course for you it's obvious, but I'm not a coder :))

Thanks for explaining everything in such a detail. I learned how to use local css. :) You might want to add this on your wiki, because your theme is awesome and more people might want to use different color buttons on their forms...

Cheers!