The appearance of Honeycomb is controlled by its CSS files. If you want to change how Honeycomb looks, such as its colors, size, shape, or borders, edit these CSS files, then copy your changes into themes.css inside your Honeycomb template folder.
-
Publish your Honeycomb course, or one of the ACME example courses.
-
Download the course.
-
Open the course using a local web server.
Opening the course on a local web server ensures you can safely test your changes before copying them into the Honeycomb templates folder.
-
Identify the CSS elements you want to edit.
For example, you could use your browser's inspect function, or open the CSS files and read the element's description. If you want to open the files directly, they're located in css/common.
-
Open your course folder and go to css > common > themes.css.
-
Copy the CSS elements you want to edit into themes.css.
Honeycomb applies the CSS in themes.css last. That means its styling overwrites the styling in other files. Making your changes in themes.css, and only adding the parts of the element you've changed, makes it easier for you to identify and troubleshoot your changes.
For example, if you changed the primary colour to red but didn't change any other :root elements, you'd add the following to themes.css:
:root {
--primary-color: #red;
} -
Close and reopen your course to confirm your CSS changes were successful.
-
In Author-it Cloud, go to Files > Common > CompanyShare > Templates > Honeycomb > hv_src > css > common.
-
Upload your modified themes.css file.
-
Republish your course to confirm your CSS changes were successful.