The Foundation theming system is Higher Logic Vanilla's (Vanilla) best and most flexible way of theming your community. Here are a few benefits to switching to Foundation:
- With Foundation's intuitive Theme Editor, customizing your community is easier than ever.
- You have access to Vanilla's latest features as we implement them. New Vanilla features are built to be compatible with Foundation.
- Foundation has an improved mobile experience and better mobile responsiveness, resulting in better SEO performance.
Ultimately, Foundation makes it easier for you to build and maintain your community, which leads to a better experience for your users.
✔️ TIP: Test the new theme and any changes in your Staging site before committing them to your Production site.
Read
Watch
Check out this webinar on moving to Foundation:
How to move to Foundation
1. Access the Dashboard.
2. Navigate to Appearance > Branding & Assets > Style Guides.
3. In the Templates section, hover over Foundation and click Copy.
📝 NOTE: Completing this process will not affect your legacy theme, and you can switch back to it at any time.
4. You're now editing the Foundation theme copy in the Theme Editor. Use the Theme Editor to customize the theme as needed.
Learn more about the Theme Editor in the article below:
Can’t find an option?
Is there a specific element you were able to customize in your legacy theme but cannot find a corresponding setting or theme variable in Foundation? Talk to your CSM so we can see if we can find an option for you, or we may need to submit a feature request.
Copy the header
✔️ TIP: The Foundation Theme Editor includes a Title Bar that may render the need to copy your existing header unnecessary. We recommend testing the Title Bar before proceeding. An example Title Bar is shown below; as you can see, it provides access to some of the community's most important options, and is "sticky" to ensure they're always accessible to users.
Copy your legacy header into Foundation
If want to copy your custom header into your Foundation theme, you can do so by copying and pasting the header code into the Theme Editor's Header and CSS tabs.
For example, let’s say you have a basic link-based header (like the one in blue below).
First, your technical resource should locate and copy the header's HTML code and paste it into the Theme Editor's Header tab:
If your custom header has corresponding CSS, it's important to also copy it over to the Theme Editor's CSS tab (this only applies to header and footer elements).
📝 NOTE: Sometimes, this code is well-labelled and easy to copy over; in other cases, it may be mixed in with other CSS code. If you're unsure, contact the technical resource who created the original theme or another resource experienced in HTML and CSS to isolate the appropriate code.
Copy the footer
Unlike the Header tab, the Footer tab includes some default code, and looks like this:
You have a few options when working with this default code:
- add your footer code in addition to it,
- keep some of it,
- or replace this code completely.
Just like with the header, simply copy your footer HTML code to the Footer tab, and add any relevant CSS to the CSS tab.
Test your header and footer
To test your header/footer, save your theme by clicking Save at the top right of the editor. The theme is saved but is not yet applied.
On the Appearance > Branding & Assets > Style Guides page, in the Custom Themes section, hover over your theme and click Apply or Preview.
Once applied, these elements should look just like they did in your legacy theme. If something looks off, you may be missing some CSS and may require a technical resource to be sure you have all necessary CSS in place.
JavaScript
If you have important JavaScript code (Google Analytics, etc.), you'll want to add this to the JavaScript tab in the Theme Editor. Typically, just like the header and footer, this should be as simple as copying and pasting code, but if you're unsure, consult with your technical resource.
📝 NOTE: You can also use JavaScript with Pockets.
Replicate legacy features in Foundation
Many of the features and modules that you may have in your legacy themes are available in Foundation. Most legacy modules are available as Widgets.
Hero Banner
The Hero Banner has been replaced by the Banner, which is highly configurable in Foundation and comes with a similar but modernized generic background.
For example, here is a legacy Hero Banner:
Here's an example of a Foundation Banner:
Check out the article below to learn more about the Banner.
Modules
Modules are now Widgets. Learn more below:
Additional considerations
Custom work
If you have had custom work, a similar default feature may have been implemented in Vanilla Core and you may be able to switch over and use this feature with Foundation. For custom work that has not been added to core, speak with your CSM about your options.
Pockets
Most Pockets should work by default, but it's still recommended to test them out to ensure compatibility with location and CSS code.
Most non-themed Pockets, such as Google Analytics and Google Tag Manager, work seamlessly.
Mobile experience
Foundation provides an excellent mobile experience by default, and for most customers this represents a significant upgrade from older themes.
When moving your header and/or footer to Foundation, it's important to consider whether their associated CSS is mobile responsive. Many customers with older themes historically may have used one theme for desktop and a standard theme for mobile. It will be important to ensure you test your theme on a variety of screen sizes and devices before launching.
