CSS Styling Guide on Skinning

Overriding Default Styles

Start by styling the default appearance of elements, such as buttons and input fields, to set a consistent base for any additional customization.

default-skin.css

.wg-body {
    button:not(.skin){
      background: #979797;
      color: white;
      border:0;
      padding: 0.3rem 1rem;
    }
    dialog button:not(.skin){
      background: #e4e4e4;
      color: #272727;
      border:0;
      padding: 0.3rem 1rem;
    }
}

For every button that will be customized later, add the skin class. This allows the button to use the default styling unless a custom skin is specified.

<button data-onclick="add-activity" class="wg-btn-new-activity skin">
  <span class="icon-mate-o">add</span>
</button>