Skyline themes

The Skyline theme set is part of a series of themes designed for business and trade associations. Though designed with real estate organizations in mind, Skyline themes can be used by any type of organization, particularly if you want to take advantage of its responsiveness and its theme-specific functionality (see below).

Themes within the theme set

The Skyline theme set consists of the following variations:

Downtown

Suburbia

Uptown

Midtown

Responsiveness

By default, responsiveness is enabled in all Skyline 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 Skyline 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 basic.responsive.grid.less file from the Styles folder.
5. Replace the following lines...
   @state2-minwidth: 600px; @state2-maxwidth: 959px; @state3-minwidth: 320px; @state3-maxwidth: 616px;
   with...
   @state2-minwidth: 0px; @state2-maxwidth: 0px; @state3-minwidth: 0px; @state3-maxwidth: 0px;
6. Upload the modified basic.responsive.grid.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

The Skyline theme set makes great use of spacing with clear white content areas and complex static backgrounds.

Colors are soft, providing a comfortable environment for visitors who want to spend more time exploring your site's content.

A defining element of the Skyline theme set is its static background which does not move as your visitors scroll up and down the page. This allows for complex background images. You can change the site background from the Colors & styles screen.

The theme also features special placeholders – used to define the areas within page templates where content can be placed – with drop shadows to make your site look less flat. The placeholders with drop shadows are identified by HTML IDs of id_Header1 and id_Footer. If you want your site to appear more flat, simply leave these placeholders empty and the drop shadows will not appear on your pages.

For a modern look, we chose OpenSans as the base font for this theme set, and Roboto Condensed for theme headings. This modern combination makes for clear designs and more readable site content, even when using complex backgrounds.

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.

The gadget styles in this theme are simpler, with fewer styles to choose from, while the Colors & styles settings – particularly those for gadget elements – have been greatly expanded.

Theme-specific functionality

Skyline themes provide theme-specific functionality, including:

• Static background that doesn't move as visitors scroll up and down the page
• Dropdown login box
• 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
• New donation goal styles
• New round featured member styles
• Secondary menu gadget
• Font Awesome iconic font set for adding icons you can easily size and color

Customizing Skyline 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 Skyline themes, you can customize elements within each gadget.

You can also customize Skyline themes using CSS and theme overrides.