Customizing your widgets (colors, fonts, etc.)

Follow

For instructions on how to customize your widgets using our color pickers, please check out this video.

Want to do a little more editing to the look and feel?

On each of your widgets, you'll see a "Custom CSS" box where you can add CSS to change fonts, colors, etc.

We also encourage you to check out the CSS Reference Guide, which will give you a great overview of some of the things you can do with CSS.

  1. If you've added custom CSS to HealCode, you should always keep a backup of the CSS on your computer.
  2. In order to know what elements to change, you will need to use one of many "Inspectors," which is available on most browsers. A CSS element is something like the h1 tag we used in our example above. We knew it was an h1 because we inspected the schedule widget to find out. Firefox: http://getfirebug.com, Safari http://www.apple.com/safari/features.html#developer, etc.
  3. You can add CSS to elements in the Custom CSS text box in the control panel of each widget. Then, click "Save widget."

Want an example?

If you want a new font for your widget, put the following CSS into the Custom CSS text box. Change the font-family to suit your needs. Remember that some fonts are "web-safe" (check here for a web-safe font) and some fonts need to be installed on your website, such as Google Fonts.

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

Have more questions? Submit a request

Comments

Powered by Zendesk