Honeycomb CSS files

Author-it Honeycomb User Guide

CSS files control the look and feel of Honeycomb. They're located in your Honeycomb templates folder, under \\Templates > Honeycomb > hv_src > css > common.

The most important CSS file is themes.css. You'll use it to customise the appearance of Honeycomb.

Honeycomb has the following CSS files:

  • components: Contains all default styles for Honeycomb components.
  • Fontstyle: Determines the font Honeycomb uses, and which characters or symbols (from that font) Honeycomb uses for its icons (for example, the next icon).
  • Global_styles and Shell: Controls the look and feel of Honeycomb, such as its primary colour. You'll override this CSS by editing themes.css
  • ie-9: A fallback style sheet required for IE9 compatibility.
  • jstree-custom: Defines icons and colors for the table of contents tree, for example  'visited' color.
  • reset: Ensures consistency across browsers
  • themes: Update this file to customise the appearance of Honeycomb. Any CSS styles you enter into this file will override the CSS in Global_styles and Shell.
  • xtend-custom: if you want to add your own paragraph or character styles that are not defined natively in Honeycomb, you can add them in this file. Xtend-custom is the last css file Honeycomb applies, and overrides other settings.

    Note: When saving css files, be sure to save them with UTF-8 encoding, by adding @charset "utf-8"; as the document's firsts element.