Overview
The Foundation theming system is Vanilla’s greatest and most flexible way of theming of your community. There are many benefits to switching over to Foundation. First, customizing your community is easier than ever, because Foundation provides an easy-to-use graphic user interface, where you see the results of your theming immediately.
Being on Foundation also gives you access to Vanilla’s latest features as we create them. All new Vanilla features are built with our newest theme in mind. Finally, Foundation has much better SEO performance, thanks in part to an improved mobile experience and better mobile responsiveness. All in all, a better experience for you in building and maintaining your community, and a better experience for your end-users.
It is recommended to test out any new theme or changes in Staging before applying them to production.
Read more about foundation here
You can also check out this awesome webinar on moving to foundation:
How to move over to Foundation
Clone Foundation in the dashboard by navigating to your Dashboard, then Settings, then click on Themes on the left. In that menu, scroll down to Foundation, and hover over the tile to select the Copy option:
Don’t worry your original theme will be saved and you can always switch back!
From here you can begin to amend the base foundation theme to match your branding. You may have some of these set in your existing CSS files, though many communities will use this as an opportunity to reconsider and modernize their theme.
You can find information on amending the Styles Tab and setting up your Styles here:
https://success.vanillaforums.com/kb/articles/279-theme-editor-overview
Can’t find an option?
If there is a particular element you were able to theme in your legacy theme but cannot find a corresponding setting or theme variable in Foundation in our documentation? 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.
Copying over the Header & Footer
Header
Of note, the Foundation theme editor has a great title bar feature that may suit your needs out of the box and render copying over an old header unnecessary. You may want to test out Foundation on its own and try out the title bar before proceeding.
If your community has a custom header, you can add this to your foundation theme by copying and pasting the header code into the Header tab of Foundation.
For example, let’s say I have this basic link based header (in blue below):
First, your technical resource should locate the header HTML and CSS code and copy it over:
If your custom header has corresponding CSS, it will be important to make sure that it is also copied over to the CSS tab of the Foundation editor (NB: this only applies to header and footer elements).
Sometimes this is well labelled and ready to go, in other situations it may be mixed in with other CSS code. If you are unsure, contact the technical resource who created the original theme or another resource experienced in HTML and CSS to isolate the appropriate code.
Footer
Unlike the header tab, the footer tab will have some code to begin with:
Out of the box, it looks like this in foundation:
You can choose to add your footer in addition to this, keep some of it or replace this code completely.
Similarly to the header, simply copy your footer HTML code to the Footer tab, and add any relevant CSS to the CSS tab of Foundation.
Testing out the Header and Footer changes
To test this out, hit ‘Save’ -- this will save the foundation file but does not apply it immediately.
You can now choose to apply or preview the theme by going to the themes tab and hovering over your newly saved file:
Once applied, this should look just like it did on the old theme:
If there are visual tweaks needed, you may be missing some additional CSS and may require a technical resource to be sure you have all necessary CSS.
JavaScript
If you have important javascript code (Google Analytics, etc), you will want to add this to the JS section of the foundation editor. Typically this will once again just be cutting and pasting code, but if you are unsure consult with your technical resource.
Of note, you can also use Javascript with Pockets.
Replicating 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
Here is a legacy deflector version of a hero banner:
Here is a preview of a foundation version:
To see additional options review the docs on the Title Bar and the Banner
https://success.vanillaforums.com/kb/articles/397-customizing-the-title-bar
https://success.vanillaforums.com/kb/articles/402-customizing-the-banner
Modules
Modules are now Widgets
https://success.vanillaforums.com/kb/articles/366-using-pockets-widgets-to-enhance-your-theme
Missing Widget? Submit an idea here!
https://success.vanillaforums.com/categories/product-ideas
Additional Considerations & Caveats
Custom Work
If you have had custom work, a similar feature may have been implemented in Vanilla Core and you may be able to switch over and use this feature with Foundation out of the box. For custom work that has not been added to core, speak with your CSM about your options.
Pockets
Most pockets should work out of the box, but it is 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 has an excellent mobile experience out of the box, and for most clients this represents a significant upgrade from older themes
When moving your header and footer over to Foundation it will be important to consider if their associated CSS is mobile responsive, as many clients 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.
