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.
Access a theme
You can edit a theme's elements in the Theme Editor, which is accessible in the Dashboard. If you use:
- Sunset themes, navigate to Settings > Themes, and 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, and then click Copy for the theme you want to customize.
Theme elements overview
The sections that follow describe each of these elements.
Header
The Header is at the top of the page. 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 located at the top of every page of your community, giving users easy access to some of its most important features, like its main navigation links and user-profile options.
📝 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 or background 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.
