Change button colors

[TechCov]

Anyone who can assist me how can i change the following button colors, i have marked them with RED ARROW signs.

 

I have tried to change using global.css but it is just changing the border (top, bottom, left, right) but not the main background color of buttons

 

Any advices how can i achieve the required colors changing these default ones

 

thanks

[Leap-IT]

Hi id look in global.css in the themes folder.

 

look for something 

 

button-medium exclusive for the yellow button and

button-medium for the green

[vekia]

  On 11/12/2014 at 12:56 PM, TechCov said:

Anyone who can assist me how can i change the following button colors, i have marked them with RED ARROW signs.

 

I have tried to change using global.css but it is just changing the border (top, bottom, left, right) but not the main background color of buttons

 

Any advices how can i achieve the required colors changing these default ones

 

thanks

 

 

1) order breadcrumbs:

global.css line 6687

ul.step li.step_current span {
color: white;
text-shadow: 1px 1px #208931;
border: 1px solid;
border-color: #73ca77 #74c776 #74c175 #74c776;
position: relative;
}

+ line 6678

ul.step li.step_current {
font-weight: bold;
background: #42b856;
background: -moz-linear-gradient(top, #42b856 0%, #43ab54 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #42b856), color-stop(100%, #43ab54));
background: -webkit-linear-gradient(top, #42b856 0%, #43ab54 100%);
background: -o-linear-gradient(top, #42b856 0%, #43ab54 100%);
background: -ms-linear-gradient(top, #42b856 0%, #43ab54 100%);
background: linear-gradient(to bottom, #42b856 0%, #43ab54 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#42b856', endColorstr='#43ab54',GradientType=0);
border-color: #399b49 #51ae5c #208931 #369946;
}

[Leap-IT]

as you can see the button has a gradient effect on it so its not a single color statment that you will find in the css but a few lines that look like this

 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdaa02), color-stop(100%, #fe9702));
  background-image: -webkit-linear-gradient(top, #fdaa02, #fe9702);
  background-image: -moz-linear-gradient(top, #fdaa02, #fe9702);
  background-image: -o-linear-gradient(top, #fdaa02, #fe9702);
  background-image: linear-gradient(top, #fdaa02, #fe9702); }

a quick way to override this would be to add a background-color value to the appropriate element

 

for the yellow button you could change this line: (you will lose the gradient style but the background color will change)

lets just make it red for example

  .button.button-medium.exclusive span {
    border-color: #fec133 #febc33 #feb233 #febc33; }

to this

  .button.button-medium.exclusive span {
    border-color: red red red red ;background-color:red; }

for the green button look for this

.button.button-medium span {
    display: block;
    padding: 10px 10px 10px 14px;
    border: 1px solid;
    border-color: #74d578; }

change to  this

.button.button-medium span {
    display: block;
    padding: 10px 10px 10px 14px;
    border: 1px solid;
    border-color: red; 
    background-color:red;}

play also with the following for mouse over

 

.button.button-medium.exclusive:hover (yellow button)

 

and  

 

.button.button-medium:hover (green button)

 

hope this is helpfull

Edited November 18, 2014 by Leap-IT (see edit history)

[Leap-IT]

Ok i just played around and you could also do the following:

 

look for

.button.button-medium {
  font-size: 17px;
  line-height: 21px;
  color: white;
  padding: 0;
  font-weight: bold;
  background: #43b754;
  background: -moz-linear-gradient(top, #43b754 0%, #41b757 2%, #41b854 4%, #43b756 6%, #41b354 38%, #44b355 40%, #45af55 66%, #41ae53 74%, #42ac52 91%, #41ae55 94%, #43ab54 96%, #42ac52 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #43b754), color-stop(2%, #41b757), color-stop(4%, #41b854), color-stop(6%, #43b756), color-stop(38%, #41b354), color-stop(40%, #44b355), color-stop(66%, #45af55), color-stop(74%, #41ae53), color-stop(91%, #42ac52), color-stop(94%, #41ae55), color-stop(96%, #43ab54), color-stop(100%, #42ac52));
  background: -webkit-linear-gradient(top, #43b754 0%, #41b757 2%, #41b854 4%, #43b756 6%, #41b354 38%, #44b355 40%, #45af55 66%, #41ae53 74%, #42ac52 91%, #41ae55 94%, #43ab54 96%, #42ac52 100%);
  background: -o-linear-gradient(top, #43b754 0%, #41b757 2%, #41b854 4%, #43b756 6%, #41b354 38%, #44b355 40%, #45af55 66%, #41ae53 74%, #42ac52 91%, #41ae55 94%, #43ab54 96%, #42ac52 100%);
  background: -ms-linear-gradient(top, #43b754 0%, #41b757 2%, #41b854 4%, #43b756 6%, #41b354 38%, #44b355 40%, #45af55 66%, #41ae53 74%, #42ac52 91%, #41ae55 94%, #43ab54 96%, #42ac52 100%);
  background: linear-gradient(to bottom, #43b754 0%, #41b757 2%, #41b854 4%, #43b756 6%, #41b354 38%, #44b355 40%, #45af55 66%, #41ae53 74%, #42ac52 91%, #41ae55 94%, #43ab54 96%, #42ac52 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#43b754', endColorstr='#42ac52',GradientType=0 );
  border: 1px solid;
  border-color: #399a49 #247f32 #1a6d27 #399a49;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0; }

then go to this site 

 

http://www.colorzilla.com/gradient-editor/

 

just replace the code in red with the one copied  from the generator to the css element

 

do this for 

 

.button.button-medium { ...........

.button.button-medium:hover { ...........

 

.button.button-medium.exclusive { ...........

.button.button-medium.exclusive:hover {

 

notice the not all buttons change the color on hover sometimes just the border so look at the code 

have fun

[TechCov]

Thanks a lot vekia and Leap-it.

Leap-it Thanks dude I Really appreciate your concerns.