Modern Theme

Modern ThemeTogether with the Bootstrap theme, this Modern theme is the most recent addition to dotCommunity, and we recommend it for all sites that want to be accessible from mobiles and iPads as well as desktops.

See the Voice Demo Site for an example of it in use.

Note that the theme requires a relatively recent browser. If you particularly need to support old browsers then we recommend you use the Playtime or DarkTones themes instead. Modern is tested in recent versions of Internet Explorer (version 8 onwards), Firefox, Chrome, and Safari, as well as on Android mobiles and tablets, iPhone and iPad.

Overview

The Modern theme is the first for dotCommunity which has been designed with a responsive layout that changes depending on the size of the screen it is being viewed on.

For example, when using this theme the Photo Album will show three columns of pictures on a wide screen, two columns on a medium screen, and one column on narrow screens. When using a layout with several columns, on narrower screens the columns are shown stacked on top of each other rather than side by side.

This theme supports the Slider includelet, which you can place anywere on your site to create a scrolling carousel of images and text. In this screenshot the Slider includelet is in the Highlight area of the page (see Layouts below).

Description

The top area of the page is used for your site's name and logo, and search box. If you have set your site's Membership Policy to allow members then the login/logout buttons will be shown here too, though if you have configured your site to be Private then the login buttons are put in the site footer, and the Social Links are shown in the header area instead.

If you select not to show your site's name (from the Display Options of your site) then a larger space is available for your logo, otherwise the space is shared between your logo and the name.

There is a button in the top right in which you can pop-down a box which displays the description and contact details for your site - the content in this area is taken from your Website Settings.

The navbar at the top shows the top level items of your site, with popup menus for any sub pages you have created. When viewing a page which has sub pages then a secondary menu is shown in the left column. The theme doesn't currently show menu items for pages more than two levels deep, so you'll have to link to these pages explicitly in your content.

Options

The Modern theme has several configuration options which are accessed by clicking the Options button next to the theme on the Look & Feel page.

Colour Scheme - Selects the overall scheme for the site. You can select from a few preset favourites, or choose your own custom colour which will be used in links and includelet headers.

Navbar Colour - You can choose from a bold dark bar, or a lighter more subtle one.

Navbar Text Style - Choose to have navigation items shown in CAPITALS depending on how bold you are feeling!

Show Secondary Navigation - Whether or not the theme should use the left column to show a menu of sub-items when viewing a CMS page which has pages beneath it.

Show Social Sharing Buttons - When enabled, a toolbar will appear on the right of the page to allow your visitors to easily share the page on social media. On mobile devices this appears at the bottom instead of the side.

Fonts - If desired, you can override the font used for headers and body text.

Social Links - Add links to any social media sites you might have related to your group. Links to these are shown in the page header on every page.

Extra CSS File - Advanced users can add a CSS file of extra tweaks for the layout of their site. Any CSS file selected is added after all the standard theme CSS files allowing you to override the layout of any part of the site. You can upload your custom CSS file into the Assets Library then select it from here.

Extra Footer HTML - You can use this to add extra text or links into the page footer. Or use it for embeddable scripts that you want to appear on every page, such as that for Google Analytics.

Layouts

The theme works well with a standard single column layout, or you can get more adventurous by choosing to have more columns. You can select the layout individually for each page, or if you set it for the site's homepage it will be used for all pages of your site unless you specify otherwise. The available layouts are:

One column - a single large content area

Two column left - a second column is shown on the left side of the page. If you're in a subsection of a site which has more content pages then this left column is also used to show a secondary navigation menu.

Two column right - a second column is shown on the right of the page.

Three column - both left and right columns are visible as well as a wider central column.

Five area - as well as the three columns also makes available an area above and below these columns which you can use to place an includelet which fills the full page width.

Five area highlight - the same as Five Area, though with another extra top Highlight area. Includelets placed in this area will be styled to match the header rather than the body of the page.

Regardless of which layout you choose, if you leave an area empty then it will not be shown on the page. Thus you are safe to select Five Area Highlight and then pick and choose on a per-page basis which columns have content.