Identify a CSS element on a Magellan website

Customizing a Magellan website to suit a brand and audience's needs involves creating themes and updating CSS. There are multiple ways to identify the Magellan CSS elements that require updating, including directly reading the CSS files and using a browser.

Related video: Use browser consoles to identify Magellan & Honeycomb CSS elements

• To use the browser inspector:

  Note: This procedure is for Chrome, but it will be very similar for other browsers.

1. (Optional) Read about the Magellan site structure and CSS file structure.

   Reading about these structures will make it easier to understand what the browser inspector shows.

2. Open the Magellan page that contains the item you want to change.

3. Press F12 to open the inspector.

4. Select the Inspector icon on the toolbar.

   

5. Hover over the object on the Magellan site that you want to inspect. For example, hovering over the language selector shows the element name, with the corresponding CSS information highlighted in the inspector console.

   

6. Search the Magellan CSS file(s) for the same element.