A theme comprises several customizable elements. You can configure these theme elements individually in order to design and manage the appearance of your Higher Logic Vanilla (Vanilla) community pages.
Before we begin…
Right out of the box, Vanilla's latest theme, Foundation, provides an excellent mobile experience, without the need for custom CSS work on your part.
- Check out Cloudflare Image Resize to learn how images are automatically scaled to the most appropriate size based on the device someone is using (phone, tablet, or desktop).
- If more granular control is needed, Foundation provides built-in tools that allow you to set specific responsive breakpoints for certain theme images.
Manage a theme
You can edit a theme's elements in the Theme Editor, which is accessible in the Dashboard.
- Sunset themes: navigate to Settings > Themes, then click Copy for the theme you want to customize.
📝 NOTE: If you're planning to switch from a sunset (or legacy) theme to Foundation, we recommend reviewing this article.
- Foundation theme: navigate to Appearance > Style Guides, then click Copy for the theme you want to customize.
Theme elements example
The sections that follow describe each of these elements.
Header
The Header is at the top of the site. It should match your brand, and is a great place for your brand links, such as Contact Us and About information, keeping this information distinct from your community navigation.
The Header isn't necessary for all community sites, but it's available if needed.
✔️ TIP: In the Theme Editor, click the Header and CSS tabs to customize the Header with your own HTML/CSS code.
Title Bar
The Title Bar is below the header; it displays on all of your Vanilla community pages. Use it for your Vanilla community navigation and common application components.
📝 NOTE: Some community sites find that just a Title Bar (without a header) is ideal.
Learn how to add branding and navigation to your Title Bar in:
Banner
The Banner displays on many of your pages. It has a customizable Search bar and accommodates a large image to showcase your brand. You can set a default background color and enable Responsive Breakpoints to ensure the best rendering on various devices (desktops, tablets, smartphones).
Learn how to customize your Banner in:
Main Content
The Main Content element displays on all of your pages. It's where the bulk of user interaction with your Vanilla community occurs. The content in this section changes depending on the current page.
You can customize the Main Content element by:
Footer
The Footer displays at the bottom of every page. It could be used for nothing more than your copyright notice -- or have topic-specific columns of links to important documentation, online resources, and social media sites.
✔️ TIP: In the Theme Editor, click the Footer and CSS tabs to customize the Footer with your own HTML/CSS code.
