The Homestead theme set is part of a series of themes designed for business and trade associations. Though designed with home building and homeowner associations in mind, Homestead themes can be used by any type of organization, particularly if you want to take advantage of its responsiveness, its theme colors, or its theme-specific functionality (see below).
Themes within the theme set
The Homestead theme set consists of the following website themes:
Roman Bricks
Beechwood
Painted Hills
Country Lane
Responsiveness
By default, responsiveness is enabled in all Homestead 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 Homestead 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 layout.less file from the Styles folder.
- Replace the following lines...
@state2-minwidth: 600px; @state2-maxwidth: 959px; @state3-maxwidth: 616px;
with...@state2-minwidth: 0px; @state2-maxwidth: 0px; @state3-maxwidth: 0px; - Replace the following lines...
.zoneInner, .zoneWrap { max-width: 960px; margin: 0 auto; width: 100%; }
with....zoneInner, .zoneWrap { margin: 0 auto; width: 960px; } - Upload the modified layout.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
A defining element of the Homestead theme set is its static background which does not move as your visitors scroll up and down the page. Some of the Homestead themes use a single large background image, while others use a repeated background pattern.
You can change the site background from the Colors & styles screen. We recommend using backgrounds with neutral or watercolor palettes to complement the theme colors.
The theme also features a sticky placeholder that you can use within a page template to create a non-scrolling area at the top of your page, perfect for sticky menus. Sticky placeholders are identified in Homestead themes by a HTML ID value of id_Header1, which you can view within the Advanced section of the placeholder settings.
The typography of the Homestead theme set is based on Roboto font headings with neutral colors, and Open Sans base text for better reading experience. An expanded set of headings styles, along with a special Quoted paragraph style, provides a number of options for attractive page designs.
As well, Font Awesome – a font consisting entirely of icons – has been added to the theme. You can add these icons to a content gadget, and modify their color and size directly from the content editor. 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.
Large, rectangular button styles are available for link buttons. A new style has been added to the social profile icon styles, featuring a hand-drawn style and hover effects.
Theme-specific functionality
Homestead themes provide theme-specific functionality, including:
- Static background that doesn't move as visitors scroll up and down the page
- Sticky placeholder to create a non-scrolling area at the top of the page – perfect for sticky menus
- 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
- Alignment options for secondary menu, log in button, and log in form gadgets
- Font Awesome iconic font set for adding icons you can easily size and color
- New link button styles
- New social profile icon styles
Customizing Homestead 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 Homestead themes, you can customize elements within each gadget.
You can also customize Homestead themes using CSS and theme overrides.
