Magellan CSS files

Magellan user guide

CSS files control the look and feel of Magellan. Magellan can have multiple themes, and each of those themes can have their own CSS files. To update your Magellan website's appearance, you'll upload customized CSS files to Files > Common > CompanyShare > Templates > Magellan Themes > {theme name} > css.

Customizable files

Use the following files to customize the appearance of Magellan:

Note: To get copies of these CSS files to customize, publish your Magellan website, download it, then open its CSS folder.

CSS file

Explanation

contentstyles.css

contentstyles.css controls the appearance and behavior of Author-it generated content, such as text styles, tables, and links.

This file's overrides every other Magellan CSS file.

Place a copy of this file in {theme name}\css folder and make changes.

themestyles.css

themestyles.css controls the appearance and behavior of Magellan generated content, such as its header navigation icons. By default these behaviours are controlled by a different file, mainstyles.css, which themestyles.css overrides.

Place a copy of this file in {theme name}\css folder and make changes.

Tip: Keep themestyles.css as simple as possible. Just copy the rules you want to change from mainstyles.css as you need to change them.

Non-customizable files

These files contain the default CSS for Magellan. These files have a lower priority than contentstyles.css and themestyles.css, and should never be edited.

CSS file

Explanation

allcss.min.css

Controls the appearance and behavior of Magellan generated content, and provides fallback styles for mainstyles.css.

bootstrap-rtl.min.css

Provides styles that convert the interface of Magellan websites to one suitable for right to left languages. Magellan websites use this CSS automatically whenever they're displaying a language configured as right to left.

font-awesome.min.css

Provides styling for Font Awesome icons. These icons are used throughout Magellan websites.

jquery.rateyo.min

Styles for the RateYo rating panel. This panel is no longer used by Magellan.

mainstyles.css

Controls the appearance and behavior of Magellan generated content, such as its header navigation icons. themestyles.css overrides mainstyles.css.

primeng.min.css

Styles for PrimeNG components.

PrimeNG is the user interface component library used by Magellan. It provides the layout and navigation elements (such as panels, popups, and menus) as well as input components (such as the search box and landing page rotator).