The Terra and Firma themes were designed for ecological and environmental organizations, but can be used by any type of organization that wants to take advantage of their responsiveness, their color schemes, or their theme-specific functionality (see below) , particularly organizations with a connection to nature. The two theme sets offer the same basic functionality, but differ in one significant respect: backgrounds on sites that use Terra themes move up and down as the viewer scrolls through the page.
On sites using Firma themes, the background remains fixed as the viewer scrolls through the page.
The two theme sets also offer different color and image combinations.
Themes within the Terra theme set
The Terra theme set consists of the following website themes:
Alpine Adventure
Amber Creek
Evening's End
Field of Dreams
Misty Mountain
Morning Glory
Oyster Cove
Painted Skies
Pebble Beach
Rocky Lake
Squirrel's Paradise
Tropical Blue
Themes within the Firma theme set
The Firma theme set consists of the following website themes:
Above the Clouds
Berry Burst
Cherry Blossom
Cloud Burst 
Hawaiian Breeze 
Lazy Harvest
Make a Wish
Orange Grove 
Rustic Deck 
Sandy Shore 
Stand Tall 
Wheatfield
Responsiveness
By default, responsiveness is enabled in all Terra and Firma themes. You can, however, disable the responsive behavior using theme overrides.
With responsiveness enabled, gadgets will be stacked within a single column on mobile devices, and resized to match the device's screen width. A mobile version of the site menu will be displayed, with a limit of 3 levels in total (main menu plus 2 submenu levels). Only horizontal menus are available for responsive themes.
To disable responsive behavior within Terra and Firma themes, follow these steps:
- Enable theme overrides (if you have not done so already).
- Click the link to download the theme files.
- Unzip the theme files to a location of your choice on your computer or network.
- Using a text editor, open the basic.responsive.grid.less file from the Styles folder.
- Replaces the following lines...
@state2-minwidth: 600px; @state2-maxwidth: 959px; @state3-minwidth: 320px; @state3-maxwidth: 616px;
with...@state2-minwidth: 0px; @state2-maxwidth: 0px; @state3-minwidth: 0px; @state3-maxwidth: 0px; - Upload the modified basic.responsive.grid.less file to the Styles theme folder on your site via File management or WebDAV.
- Click the Rebuild theme button on the Theme overrides screen.
The site will now appear the same regardless of device size.
Design elements
The Terra and Firma theme sets were built around large backgrounds.
The typographical elements were designed to work with a wide range of background colors, and the Opacity 60% gadget style – available for content gadgets among others – produces a semi-transparent gadget that allows the background image to show through. You can replace the current background image from the Colors and Styles screen with any good quality image at least 2560 pixels wide.
For an enhanced mobile experience, these theme sets feature a special mobile panel that replaces the menu bar and login options on mobile devices. If you don't want a mobile panel, you can choose a master layout without the panel. A new option for content gadgets automatically hides pictures in mobile view.
For a modern look, we chose PT Sans as the base font for this theme set, and Roboto for theme headings. This modern combination makes for clear designs and more readable site content, even when using complex backgrounds.
As well, Font Awesome – a font consisting entirely of icons – has been added to the theme. You can copy and paste icons from the Theme icons page, which appears as a sample page when you create a site using this theme, or switch to it. To keep the icons readily available, you might want to keep this page as an admin-only non-menu page. For more information, see Using Font Awesome icons.
Theme-specific functionality
Terra and Firma themes provide theme-specific functionality, including:
- Mobile panel that replaces the menu bar and login options when the width of the browser window is 600 pixels or less
For important instructions on displaying this panel after switching from an existing website theme, see Switching to Terra or Firma from an existing theme (below). - Content gadget setting to hide pictures in mobile view
- Sticky menu style which causes the menu to stick to the top of the page once it reaches the top of the browser. For example, as you begin scrolling a page, the standard menu...
becomes a sticky, non-scrolling menu...
- Fixed position setting for social profile gadgets, allowing your social icons to appear on the outer right edge of the placeholder and remain in position as the viewer scrolls the page.
- Gadget style option – Opacity 60% – that results in a semi-transparent gadget background.
Available for content gadgets, upcoming events gadgets, recent blog post gadgets, and forum updates gadgets. - Dropdown login form
- Alignment options for login gadgets
- Orientation option – horizontal and vertical – for log in form gadgets
- Ability to hide the Remember me and Forgot password labels within log in form gadgets, and control whether the email and password labels appear within the entry fields, or outside them
- Secondary menu gadget, with alignment option
- Font Awesome iconic font set for adding icons you can easily size and color
Switching to Terra or Firma from an existing theme
When you switch to a Terra or Firma theme from another Wild Apricot website theme, your existing page templates may not be capable of displaying the mobile panel, which replaces the menu bar and login options in mobile view.
To display the mobile panel in mobile view, you need to use one of the following as the basis for your site pages:
- A new page template based on the Main layout with mobile panel master layout.
- One of page templates that was copied along with the demo pages while switching to the new theme.
You cannot make your existing page templates work by changing their master layout to the Main layout with mobile panel layout.
If you do not want to display the mobile panel in mobile view, you need to edit your current page template(s) and change the master layout to Secondary layout without mobile panel. Otherwise, your menu and login gadgets may not appear at all in mobile view.
Customizing Terra and Firma themes
From the Colors and styles screen, you can customize the colors, fonts, styles, and backgrounds of various elements that appear throughout your site. When customizing the colors and styles of Terra and Firma themes, you can customize elements within each gadget.
You can also customize Terra and Firma themes using CSS and theme overrides.
