(solved) How to change the colour of the Impact Button?

• kimberley

  said

  Currently I am using skin 6 and the default impact button colour is green. How do I change this to a dark grey colour #3b4046?

  Within the code on style-Skin-6.css there are many colours. Which ones do I change? I have changed 2. Line 3 and line 12 from the code below:

  /* Impact Button */
  .impactBtn, .impactBtn:visited {
  background: #3b4046; /* fallback bg (set same as outer border color) */
  /* shadow */
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, .37);
  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, .37);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .37); }
  .impactBtn span, .impactBtn:visited span, input.impactBtn, input.impactBtn:visited { /* inner border and button color */
  color: #fff;
  border-color: #64D0D9 #4CBAC3 #3B969E;
  background: #3b4046;
  background: -webkit-gradient(linear, left top, left bottom, from(#51C5CE), to(#378D95));
  background: -moz-linear-gradient(top, #51C5CE, #378D95);
  background: linear-gradient(#51C5CE, #378D95);
  -pie-background: linear-gradient(#51C5CE, #378D95);}
  .impactBtn, .impactBtn:visited, input.impactBtn, input.impactBtn:visited { /* outer border */
  border-color: #44AAB2 #378E96 #235A5F; }

  But it has made no difference.

  Are any of the other impact buttons dark grey from the other skins? Could I copy that code?

  Please help

  Kim

• Trevor

  said

  Kim -

  Lines 12-14 from the above code block you posted should look something like this:

  background: -webkit-gradient(linear, left top, left bottom, from(#3b4046), to(#8f9194));
  background: -moz-linear-gradient(top, #3b4046, #8f9194);
  background: linear-gradient(#3b4046, #8f9194);

  If that doesn’t work or you need further help styling the button please let us know!

• kimberley

  said

  Thats fantastic – all done Thankyou

• hallsy

  said

  why when i click on style-skin-1.css i only get the following?

  /*
  Skin Name: Skin 1
  */

• andy

  said

  Because the styles for Skin 1 are the defaults found in “style-default.css“. If you wanted to make updates to Skin 1 you can do it in “style-skin-1.css” without messing up the other skins.

• hallsy

  said

  thx andy

• mindblend

  said

  Hi, just bought this and have spent ages trying to change the button colour to a bright red. Even in Firebug I can only seem to get the borders to change – any chance you can help?

  Thanks

• jeffw

  said

  Hi, mindblend. Look in the stylesheet associated with whatever skin you are using underneath the /* Impact Button */ comment. There are 40 lines or so of code that define the style of the impact button; the background styles are the ones that affect the colour of the button.