Site Styling

The Site Styling module is where Admins can configure several general settings related to the look and feel of the front-end Site like the accent color, font, and browser icon.

[Screenshot of Site Styling page]

Accent Color

Use the color picker or enter a hex code in the provided field to select an accent color for the front-end Site. This accent color will be used for some elements and graphics on the Site like the line below the Site header and various buttons. 

[Detail Screenshot of Accent Color block]

[Screenshot of front-end Dashboard Overview tab (Including Points), perhaps calling out the accent color in various places?]

Because the accent color is used for buttons, use the toggle to select a button text color that will contrast with your selected accent color. If your accent color is darker, select Light. If your accent color is lighter, select Dark.

Site Font

Use the dropdown and search function to select a font for the front-end Site. Your selected font will be used for both paragraph and display copy, so choose a font that works well in both contexts.

[Detail Screenshot of Site Font block]

Browser Icon

The browser icon or favicon will appear in the browser URL field. Click the upload icon to upload a .PNG, .JPG, or .ICO file in the popup. Drag and drop a file into the uploader or click the Browse Files button to choose a file from your computer. Replace an uploaded logo by clicking the X button in the top right corner and uploading another.

[Detail Screenshot of Browser Icon block]

Amplified Accessibility

By default, all Agora Sites meet the Web Content Accessibility Guideline (WCAG) 2.1 criteria for the AA level. Use the Amplified Accessibility toggle to add additional features to your Site that will impact its look and feel, but will make it even more accessible for Users with disabilities. In most cases, Amplified Accessibility can remain disabled.

[Detail Screenshot of Browser Icon block]

[Screenshot of front-end Home Page (eCommerce Template) with amplified accessibility, perhaps calling out the various changes?]

When you’ve finished making your changes, click the Save button at the top or bottom right-hand side of the page.

Updated on March 6, 2023

Was this article helpful?