Navigation steps
Navigate to CMS → Site Options → Theme Tab → Elements → Sidebar/Footer Tab.
Styling
- Logo - Set a different logo for cases where the default logo does not contrast well against the selected background colour.
- Background Colour - Choose a background colour for the sidebar and footer using the drop-down list, selecting from the site theme settings.
- Text Colour - Set the text colour for the sidebar and footer. Ensure appropriate contrast against the background colour for WCAG accessibility compliance.
- Accent Colour - Define the colour for the text on the collapse button.
- Active Colour - Choose the highlight colour for the ‘active’ state, which appears behind a selected section title in the sidebar or an active footer item.
- Active Text Colour - Select the text colour for section titles in the sidebar and footer when they are ‘active’ (selected). Ensure proper contrast for accessibility.
- Call-to-Action (CTA) Placement - CTAs can be displayed at either the top or bottom of the sidebar.
Accessibility Mode
As Accessibility Mode is toggled within the sidebar and footer, its background and text colour are also set here.
Managing Footer Items
- The default footer includes the following items at the bottom of the screen:
- Menu - Expands to show links to various sections, overflow footer items (e.g., Chat, Sign In/My Account), the first two CTAs, social links, and legal links.
- Map
- Events
- Personalise
- Checklist
- Footer items can be disabled in two ways:
- Vepple CMS - Disable default features within the settings.
- URL Query Parameters - Add query parameters to the URL to hide specific items.
- If the Chat or Sign In/My Account buttons remain enabled, they will take up available space in the footer.
Best Practices & Use Cases
Styling & Accessibility
- Ensure text colours contrast well with background colours to comply with WCAG accessibility standards.
- Choose an accent colour that aligns with your brand while maintaining visibility.
- Use the active colour to create a clear distinction for selected items without overwhelming the design.
Comments
0 comments
Please sign in to leave a comment.