Home

Download this help site
(PDF 82MB)

Download

Kaleidoscope theme set

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:

 Read more/less
Theme nameThumbnail
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.

 Read more/less

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...

    with...

  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:  

 Read more/less
  • 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

    Icon

    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.

 Read more/less

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.
Icon

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. For details, see Color and style settings for Kaleidoscope themes.

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

On this page:

See also:


  • No labels