Magellan CSS file structure

Magellan user guide

There are two default CSS files that control the appearance of Magellan. Understanding their structure is useful for identifying Magellan CSS elements and creating custom Magellan themes.

The mainstyles.css file

mainstyles.css is divided into sections that match the Magellan site structure. Any CSS customizations for this file should be put in themestyles.css, which has a higher CSS priority than mainstyles.css

Magellan - mainstyles css sections

  • The DEFAULTS and LAYOUT sections contain basic CSS elements that apply across the whole site.

  • The HEADER, LANDING, NAVBAR, LEFTNAV, CONTENTBLOCK and RIGHTNAV sections contain CSS elements related to these sections of the site structure.

Each section is commented to describe how it is laid out, the content element structure, and whether it applies to the Magellan desktop or mobile view. In addition, each individual CSS element within a section is commented for what it is and how it works. This all provides a good reference for finding CSS elements.

The contentstyles.css file

contentstyles.css has sections that relate to the content you've created in Author-it and published to Magellan. The default file contains TABLES, LINKS and CONTENT sections, but you could add other sections to customize topics, videos, images, for example.

Magellan - Conteentstylse css sections