How to change shortcode button color

• tandan

  said

  Hi there, I’d like to make the call to action button color different. How do I change it? Also, how do I change the box behind it if needed? Thanks!!

  [call_to_action title="Call to Action Title" tag_line='Call to action tag line text' arrow="yes" button="Button Text"]

• airwhale

  said

  Yeah – I’d like to know that too. The CSS behind those color definitions are quite hairy and I have not been able to figure out the logic behind them.

  What I did as a quick workaround was to activate different skins and looking at how the buttons looked there. I found one that would be better suited (not perfect, but quite acceptable, given my color scheme) and then I just copied in and replaced the CSS for the button in question from that specific skin’s CSS-file.

• andy

  said

  The best place to make this change is in your skin specific CSS file. If you are using Skin 1 you should copy this code from “style-default.css” into “style-skin-1.css” and make the change. Below are the styles:

  /* Impact Button */
  .impactBtn, .impactBtn:visited { 
    background: #970026;  /* 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;
    text-shadow: -1px -1px 3px rgba(0, 0, 0, .6);
    border: solid 1px #E22B85;
    border-color: #E94B90 #E22B85 #CC005A;
    background: #B50834;
    background: -webkit-gradient(linear, left top, left bottom, from(#D71854), to(#A50025));
    background: -moz-linear-gradient(top, #D71854,  #A50025);
    background: linear-gradient(#D71854, #A50025);
    -pie-background: linear-gradient(#D71854, #A50025);}
  .impactBtn, .impactBtn:visited, input.impactBtn, input.impactBtn:visited { /* outer border */
    border: solid 1px #970026;
    border-color: #970026 #970026 #79001F; }
  .impactBtn:hover span, input.impactBtn.btn:hover { /* inner border and button color - hover */
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,.6);
    border-color: #E94B90 #E22B85 #CC005A;
    background: #CA0E41;
    background: -webkit-gradient(linear, left top, left bottom, from(#EA1A58), to(#A50025));
    background: -moz-linear-gradient(top, #EA1A58,  #A50025);
    background: linear-gradient(#EA1A58, #A50025);
    -pie-background: linear-gradient(#EA1A58, #A50025); }
  .impactBtn.btn:hover { background: #386D9E; } /* outer border and glow - hover */
  .impactBtn.btn:hover, input.impactBtn.btn:hover { /* input outer border and glow - hover (same as previous...)*/
    border-color: #386D9E;
    background: #386D9E;
      -webkit-box-shadow: 0 0 10px rgba(0, 125, 230, .95); 
      -moz-box-shadow: 0 0 10px rgba(0, 125, 230, .95); 
    box-shadow: 0 0 10px rgba(0, 125, 230, .95); }
  .impactBtn:active span, input.impactBtn:active {
    color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#A50025), to(#EA1A58));
    background: -moz-linear-gradient(top, #A50025,  #EA1A58);
    background: linear-gradient(#A50025, #EA1A58);
    -pie-background: linear-gradient(#A50025, #EA1A58); }

  Most of what needs to be changed is labeled and explained. For example at the beginning you’ll see this:
  background: #970026;  /* fallback bg (set same as outer border color) */

  Which as it states means you should set this color to the same as your outer border color which is:
  border-color: #970026 #970026 #79001F;

  Finding this is easy because it’s the only color that matches the same color “#970026″ in the code.

  Some other details that may help, the first sections, “.impactBtn, .impactBtn:visited” and “.impactBtn span, .impactBtn:visited span, input.impactBtn, input.impactBtn:visited” are the color when not active. That second item is labeled “inner border and button color” so you know that this is the gradient color you see. The less obvious information as that the border on this part is the “inner border” which is a slight highlight color.

  The background colors are set to a gradient. In the case where you see code like that shown below you set the first color to the top color, the second to the bottom. A gradient is produced from these settings. The standard “background: #B50834;” shown first is a fallback for browsers without gradient support. The color is the same as what is at the absolute middle of the gradient. You’ll have to figure this color out with a color picker or other method.

    background: #B50834;
    background: -webkit-gradient(linear, left top, left bottom, from(#D71854), to(#A50025));
    background: -moz-linear-gradient(top, #D71854,  #A50025);
    background: linear-gradient(#D71854, #A50025);
    -pie-background: linear-gradient(#D71854, #A50025);}

  The rest of the code going forward explains it’s purpose in the selectors:

  .impactBtn:hover span, input.impactBtn.btn:hover This is the hover state.

  .impactBtn:active span, input.impactBtn:active This is the active or “mouse click” state.

• airwhale

  said

  Thanks a lot Andy – I guess it’s easy once you get the hang of it, but I sure find it quite complex. Then again, it produces a very polished and professional looking result, so I’d really like to get this right.

  I will experiment some with this and your additional explanation above will be most helpful. I’m thinking that I could just dabble with colors and gradients in Photoshop to get an approximation of the effect I aim to produce.

  One last question: do you have knowledge of a color picker where you can selectively choose to trigger the :visited, :hover and :active states? I tested the ones I use on Win and Mac, and both did trigger the :hover state when placed above the button, leaving me without a reading on the other states.

  Thanks!

• andy

  said

  You might try “pixie” which lets you test colors for anything on your screen. The “zoom” feature can be used to get snapshots of small areas during mouse over, click, etc.

  http://www.nattyware.com/pixie.php

  I’ve used this for years and can’t imagine not having it.

• Unstuck

  said

  Is there a way to change the <em> setting? For instance, on the skin 1 home page (lower half).

  Many thanks.

• andy

  said

  @Unstuck

  All styles can be edited with CSS.

• Unstuck

  said

  My fault for not being more specific. On the skin 1, on the Home – Right page there is a h1> header with tags. I’ve tried everything to see where the color is coming from and I can’t find the specific CSS code related to it.

  I changed the pink button from the home page with CSS from another forum post. But I can’t find it despite the numerous variations I’ve tried.

  em, em.h1, h1.em { color: #E31837; }

  The tags work on other instances throughout the site but just not that one.

• andy

  said

  This is in the CSS. The code will look like this:

  h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
      color: #e54560;
      font-weight: bold;
  }

  Look inside “style-default.css” and if you use a skin (or want to edit the color) do it in the skin specific CSS file, such as “style-skin-1.css“

• dschulzjackson

  said

  Thanks for the fix. I assume that based on what Andy’s saying that there’s no solution that uses “Custom CSS” addition in Design Settings >> Default Design Settings >> Custom CSS?

  Thanks,

• jeffw

  said

  Depending on what you are changing, it might be a lot to put in the Custom CSS box. Keep in mind that stylesheets are cached by the browser, but styles declared in the HTML page will need to be loaded every time. So if you are making lots of chages it makes sense to use a custom stylesheet or child theme. But if you are making just a few little changes then it may be more convenient to use the Custom CSS box.