Customizing the appearance of Magellan creates a website that reflects branding and suits audience needs. The appearance of Magellan is controlled by the CSS files for each theme, which are fully customizable.
Related video: Copy CSS changes into Magellan or Honeycomb
Tip: Our Knowledge Centre has lots of examples of specific CSS you can use to customize Magellan.
-
Choose the Magellan theme you want to edit, or create a new one.
-
Publish the Magellan website, or one of the ACME example courses, using the theme you want to edit.
-
Create a local copy of the website.
-
Open the course using a local web server.
Opening the course on a local web server ensures you can safely test changes before copying them into the Magellan theme folder.
-
Identify the CSS elements you want to edit.
For example, by using the inspect function of a browser, or opening the CSS files and reading the element descriptions.
-
Go to {your downloaded Magellan website}\CSS.
-
Copy any theme CSS elements you want to edit (such as the website's primary colour) into themestyles.css
-
Copy any content CSS elements you want to edit (such as the styling for tables) into contentstyles.css
Tip: Only adding the elements and parts of the element you've changed makes it easier to identify and troubleshoot changes.
For example, if you changed the primary colour to red but didn't change any other element, you would add the following to themestyles.css:
html {
--primary-color: #red;
} -
Close and reopen the Magellan website to confirm the CSS changes were successful.
-
In Author-it Cloud, go to Files > Common > CompanyShare > Templates > Magellan Themes > {Theme name} > css
-
Upload the modified themestyles.css and contentstyles.css files.
-
Republish the Magellan website to confirm the CSS changes were successful.