Common CSS

Follow

This article will provide the most common CSS selectors along with a common property as an example for each widget.

  1. Schedule Widget
  2. Enrollments Widget
  3. Appointments Widget
  4. Class List Widget
  5. Staff List Widget
  6. Prospect Widget
  7. Registration Widget
  8. Other common CSS selectors

 

If you need to make a color change, you can likely use our color pickers. Instructions here.

 

1. Schedule Widget

Header

  1. div.healcode .header h1 {
    border: 0 !important;
    }
  2. div.healcode .header h1 span {
    font-weight: normal !important;
    }
  3. span.action_text.my_account_text {
    text-transform: uppercase;
    }
  4. .checkboxes {
    color: #000;
    }
  5. div.healcode .week_links a {
    font-size: 14px !important;
    }

Schedule Listings

  1.  div.healcode tr.schedule_header th {
    font-size: 14px !important;
    }
  2. div.healcode td {
    padding: 1em !important;
    }
  3. div.healcode .classname a {
    text-decoration: none !important;
    }
  4. div.healcode .trainer a {
    font-weight: bold;
    }

 

2. Enrollments Widget

Header

  1. div.healcode .header h1 {
    border: 0 !important;
    }
  2. div.healcode .header h1 span {
    font-weight: normal !important;
    }
  3. span.action_text.my_account_text {
    text-transform: uppercase;
    }
  4. .checkboxes {
    color: #000;
    }
  5. div.healcode .week_links a {
    font-size: 14px !important;
    }

 

Enrollment Listings 

  1. h2.healcode-enrollment-name>a {
    font-size: 22px;
    }
  2. span.healcode-trainer-name .trainer a {
    color: #000;
    }
  3. .healcode-date-area>span {
    background: #444 !important;
    color: #fff !important;
    }
  4. .healcode-description-area, .healcode-description-area * {
    font-size: 14px;
    line-height: 1.4;
    }
  5. .healcode-image-area img {
    width: 225px;

 

3. Appointments Widget

  1. span.healcode-title-text {
    color: #444;
    }
  2. select#options_staff_ids_ {
    display: none;
    }
  3. .ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
    width: 100%;
    }
  4. h1.healcode-date-label {
    border-bottom: 2px solid #444 !important;
    }
  5. .hc-button {
    font-size: 14px !important;

 

4. Class List Widget

Description

  1. h1.class_name {
    text-transform: uppercase;
    }
  2. .class_description, .class_description * {
    font-size: 13px;
    }
  3. span.class_offered_link {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    }
  4. .healcode-image-area img {
    width: 250px;
    }

 

Schedule Listing

  1.  .back_link a {
    font-size: 14px;
    }
  2. div.healcode h1 span {
    font-size: 24px;
    }
  3. tr.schedule_header th {
    background: #444 !important;
    color: #fff !important;
    }
  4. div.healcode .filterable td {
    background: #fff !important;
    }

 

5. Staff List Widget

 Staff Bio

  1. h1.trainer_name {
    font-size: 20px !important;
    }
  2. .trainer_bio, .trainer_bio * {
    line-height: 1.4 !important;
    }
  3. span.trainer_teaches_link {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    }
  4. .healcode-image-area img {
    width: 250px;
    }

 

Schedule Listing

  1. .back_link a {
    font-size: 14px;
    }
  2. div.healcode h1 span {
    font-size: 24px;
    }
  3. tr.schedule_header th {
    background: #444 !important;
    color:#fff !important;
    }
  4. div.healcode .filterable td {
    background: #fff !important;
    }

 

6. Prospect Widget

 

  1. div.healcode input, div.healcode textarea, div.healcode select {
    width:100%;
    }
  2. .hc-actions .submit.hc-prospect-submit {
    width: initial !important;
    background: #444;
    color: #fff;
    }

 

7. Registration Widget

  1. .hc-label {
    font-size: 22px !important;
    }
  2. div.healcode select, div.healcode input, div.healcode textarea {
    width:30%;
    }
    .hc-birth-date select, .hc-prospect-email-opt_in input, .hc-liability input {
    width:initial !important;
    }
  3. div.healcode .liability {
    height: 300px !important;
    }
  4. input#hc-register {
    padding:1em !important;
    }

 

8. Other common CSS selectors

Font family of a widget

div.healcode * {
font-family:Arial, sans-serif;
}

The website header is appearing above the Cart

section#modal-iframe {
z-index: 99999;
}

 

Questions? Need help adding CSS to your widget? Please submit a technical support ticket here.

Have more questions? Submit a request

Comments

Powered by Zendesk