Tinted Tiles and Building Blocks themes

The Tinted Tiles and Building Blocks theme sets are built around the flat design trend and sliding puzzle design approach – plenty of squares and rectangles. The general idea is to build page design around simple shapes and customize the appearance by applying different theme colors to section headings and gadget backgrounds, and setting the margins between gadgets.

Both theme sets are fully responsive and mobile friendly, and include a condensed mobile panel.

The Tinted Tiles theme set provides an excellent starting point for designers and others who want to quickly build a flat and modern site.

The Building Blocks theme set combines inverted typography and dark backgrounds with colorful titles and accents for an improved reading experience.

To build an effective site page using themes from either theme set, you just spread your content among the various blocks, then choose the margin you want between the blocks. To set blocks off from one another, you can choose layout and gadget backgrounds.

Themes within the Tinted Tiles theme set

The Tinted Tiles theme set consists of the following website themes:

Azure

Cappuccino

Partly Cloudy

Skyfall

Themes within the Building Blocks theme set

The Building Blocks theme set consists of the following website themes:

Black Light Poster

Black Light Wallpaper

Board Game

Duotone

Responsiveness

By default, responsiveness is enabled in all Tinted Tiles and Building Block 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 Tinted Tiles and Building Blocks themes, follow these steps:

1. Enable theme overrides (if you have not done so already).
2. Click the link to download the theme files.
3. Unzip the theme files to a location of your choice on your computer or network.
4. Using a text editor, open the layout.less file from the Styles folder.
5. Replace the following lines...
   @Device-M-MaxWidth: 991px; /* 768 - 991 */ @Container-M-MaxWidth: 970px; @Device-S-MaxWidth: 767px; /* 480 - 767 */ @Container-S-MaxWidth: 750px; @Device-XS-MaxWidth: 479px; /* 320 - 479 */
   with...
   @Device-M-MaxWidth: 0px; /* 768 - 991 */ @Container-M-MaxWidth: 970px; @Device-S-MaxWidth: 0px; /* 480 - 767 */ @Container-S-MaxWidth: 750px; @Device-XS-MaxWidth: 0px; /* 320 - 479 */ body { min-width: 1230px; }
6. Upload the modified layout.less file to the Styles theme folder on your site via File management or WebDAV.
7. Click the Rebuild theme button on the Theme overrides screen.

The site will now appear the same regardless of device size.

Design elements

Tinted Tiles and Building Blocks themes consist of a series of blocks, displayed using monochrome palettes that combine a primary color with a contrast color to highlight important information.

For a modern look, we chose Ubuntu as the base font for this theme set. This modern combination makes for clear designs and readable site content, complimenting overall flat design trend.

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.

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.

Theme-specific functionality

Tinted Tiles and Building Blocks themes provide theme-specific functionality, including:

• Mobile panel that replaces the menu bar and login options when the width of the browser window is 768 pixels or less
  
  For important instructions on displaying this panel after switching from an existing website theme, see Switching to a Tinted Tiles theme from another theme (below).
  
• Dropdown login form
  
• Alignment option for vertical menus
• Secondary menu gadget with animated sliding panel that can be expanded or collapsed (collapsed by default).
• Gadgets design based on transparent backgrounds with styles specialized for light or dark backgrounds.
• Expandable control panels for blogs, forums, events, and photo albums.
  
• Styled slideshow with new preview panel, new navigation, and a themed style.
• Advanced colors and styles customization with three typography sets: basic, typography for dark backgrounds, and typography for light backgrounds.
• Alignment option 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
• Font Awesome iconic font set for adding icons you can easily size and color

Switching to a Tinted Tiles or Building Blocks theme from another theme

When you switch to a Tinted Tiles or Building Blocks 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 Tinted Tiles and Building Blocks themes

From the Colors and styles screen, you can customize the colors, fonts, styles, and backgrounds of various elements that appear throughout your site.

You can also customize your theme using CSS and theme overrides.