Customize the appearance of Magellan

Publishing

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.

  1. Choose the Magellan theme you want to edit, or create a new one.

  2. Publish your Magellan website, or one of the ACME example courses, using the theme you want to edit.

  3. Create a local copy of the website.

  4. 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 Magellan theme folder.

  5. 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.

  6. Go to {your downloaded Magellan website}\CSS.

  7. Copy any theme CSS elements you want to edit (such as the website's primary colour) into themestyles.css

  8. 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 for you to identify and troubleshoot your changes.

    For example, if you changed the primary colour to red but didn't change any other elements, you'd add the following to themestyles.css:

    html {
    --primary-color: #red;
    }

  9. Close and reopen your course to confirm your CSS changes were successful.

  10. Go to \\Templates\Magellan Themes\{Theme name}\css

  11. Upload your modified themestyles.css and contentstyles.css files.

  12. Republish your Magellan website to confirm your CSS changes were successful.