The Kaleidoscope theme set was designed as a general purpose theme. It provides an excellent starting point for designers and others who want to quickly build a modern-looking site.

Using content gadgets as building blocks, the Kaleidoscope theme set delivers a flat, modern look. This theme applies different theme colors to section headings and gadget backgrounds, highlighting different elements and drawing attention to important calls to action.

This theme set is fully responsive and mobile friendly, and includes a condensed mobile panel.

Themes within the Kaleidoscope theme set

The Kaleidoscope theme set consists of the following website themes:

Cornucopia

Jelly Beans

Mulberry Jam

Muskoka

Neon

Overcast

Redwood

Wild Berries

Responsiveness

By default, responsiveness is enabled in all Kaleidoscope 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 Kaleidoscope 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.

Theme-specific functionality

Kaleidoscope themes provide theme-specific functionality, including:

  • A new headline gadget designed to display titles and headings for sections or other gadgets
  • 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 Kaleidoscope 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 Kaleidoscope theme from another theme

When you switch to a Kaleidoscope 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 Kaleidoscope 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.