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

In the example on the right, the theme is using the Cyborg colour scheme, which is one of many different colour schemes available.

Overview

The Bootstrap theme has 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.

The theme has lots of configuration options allowing you to customise the layout to suit your tastes.

The theme is built on the Bootstrap CSS framework, so you can use any CSS styles defined by Bootstrap in your pages. It uses colour schemes provided by Bootswatch. Have a look on the Bootswatch site to see all the different colour schemes available. You can select the colour scheme you want to use from the Theme Options. Advanced users can override the bootstrap.css used by the theme to allow more control of the look and feel of the site.

This theme supports the Slider includelet, which you can place anywhere on your site to create a scrolling carousel of images and text.

Description

The theme has a top navbar always present, which contains the search box, login/logout/register links and, if your site's Membership Policy allows members, a link for visitors to join your site.

Immediately under this is a banner area containing your site's name and logo. You can set a background image in the banner which will resize itself appropriately based on the screen size. If you don't upload a logo then a Voice "trumpeting man" will be superimposed on the left side of the banner area. You can also choose whether to have the current page title in the banner, or to have it below the breadcrumb in the page content.

You can configure the theme to have a horizontal navbar for your main menu items, which will appear below the banner and have popup menus for sub-items. Or you can configure it to have a vertical menu in the left column. Note that on small screens the theme always uses a collapsible menu with a "hamburger" button to expand the menu options.

Options

The Bootstrap theme has lots of 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. Default is the standard colour scheme used by Bootstrap. Default 3D adds graduated fills to buttons and navbars rather than having flat colours. The other colour schemes are provided by Bootswatch, and you can see a preview of them on that site.

Navigation Style - You can choose from a navbar in one of two colours (which depend on the colour scheme in use). Tabs will show a horizontal tabset of links with popdown menus for sub links. Pills shows a horizontal bar with buttons in it, Pills in a Well uses smaller buttons and wraps them all in a darker coloured box. These horizontal styles work best when you don't have too many links in your navigation. If you want lots of links then you will be better off with one of the vertical menus - Left Column List or Left Column List in a Well.

Page Title Position - You can choose to have the page title in the banner (below your site name) or in the content (more inkeeping with other themes).

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.

Banner Image - Select an image from your Assets Library as the background for the banner area. If none is selected then a solid block of colour is used. Any shape/size of image is OK here, as the system will resize it to make it fit.

Banner Image Positioning - Stretch to Fit is usually the best here as it'll resize your image dynamically to fit the space in the best way. Though you might prefer to Centre or Tile the image.

Alter Banner Image - This will lighten or darken the image if you wish, to increase contrast between it and the text overlaid upon it.

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

Use Custom Bootstrap - You can create your own bootstrap.css (e.g., with a different colour scheme) using one of several tools on the web. See below for further details. Lavish Bootstrap, PaintStrap, and the main Bootstrap site. You can then upload this into your Assets library and use it in place of the theme's standard bootstrap.css.

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.

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 and then pick and choose on a per-page basis which columns have content.

Creating a custom Bootstrap colour scheme

The Bootstrap theme allows you to use standard Bootstrap 3 (not Bootstrap 4) style sheets with your Voice site.

Sites such as Bootstrap Live Customiser, Bootstrap Magic, bootstrap.build, and the main Bootstrap site make it reasonably easy to create your own Bootstrap 3 style sheet without having to know too many technical details.

You can try a web search for other bootstrap theming tools. However, note that you need to use Bootstrap 3 not Bootstrap 4 with your Voice site.

The general steps are:

  1. Use the tool to customise the look and feel until you're as happy as you hope to be.
  2. Download the bootstrap.css (or minimized css) to your computer.
  3. Add the style sheet to your assets library.
  4. Go to the admin pages for your site, click on the look and feel tab and then the options button next to the Bootstrap theme.
  5. Click on the use custom Bootstrap checkbox on the theme's options page.
  6. Click the select from assets library button that appears and select the stylesheet that you just added to the library.