• Themes within the theme set
• Design elements
• Theme-specific functionality
• Customizing Treehouse themes
The themes in the new Treehouse theme set are fully responsive and mobile friendly.
This theme has been deprecated, meaning that we are no longer supporting it or making it available when switching themes.
Though designed for organizations that address the needs of children, the Treehouse theme can be used by any type of organization, particularly if you want to take advantage of its color schemes, its responsiveness, and its theme-specific functionality (see below).
Themes within the theme set
The Treehouse theme set consists of the following website themes:
By default, responsiveness is enabled in all Treehouse themes (excluding the deprecated Treehouse 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 Treehouse 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.
- Replace the following lines...
@state2-minwidth: 600px; @state2-maxwidth: 959px; @state3-maxwidth: 616px;
@state2-minwidth: 0px; @state2-maxwidth: 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.
Bearing a signature of light and simple design, this theme set offers a lot of different color variations, from classic white and blues, to country style with wooden patterns, and finally even pink and purple variations.
Plain Arial font makes the sites readable on any device, and is familiar to many users. The sample picture on the home page can be used or replaced as you wish.
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.
Treehouse themes provide theme-specific functionality, including:
- Alignment options for social profile, log in button, and log in form 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
- Font Awesome iconic font set for adding icons you can easily size and color
Customizing Treehouse themes
One of the most noticeable aspects of the Treehouse theme is its customization options. The Colors & styles settings are limited – providing no method for changing gadget titles or button colors – but the individual gadget style choices are immense, and include:
- 9 different menu styles for both vertical and horizontal layouts
- 18 pre-designed gadget styles to choose from – for gadgets other than system gadgets and singular gadgets
- 35 link button styles
These styles, combined with the ability to change the background color or image of any placeholder or layout, result in almost infinite number of possible design combinations.
You can also customize Treehouse themes using CSS and theme overrides.