Web Office Quick Start - Themes and Layouts

The themes and layouts area allows you to change the appearance of your web site to create a complete visual style which reflects the life of your church.  As well as defining how your home page will look, this powerful new tool allows you to create completely different styles for sub-groups within the church.  For example, you may wish to give a charitable trust associated with your church a completely different appearance to distinguish it from other groups. 

This document explains how themes and layouts are combined to create a visually appealing web site that welcomes both visitors and regular members.

We’ll begin by defining what these terms mean:

• Themes are the colours, fonts, and background images making up the style of your web site.  You can pick from a range of themes available in the ChurchInsight gallery and, if required, modify them to suit your requirements.
• A layout is the arrangement of the various elements making up a web page.  For example, your homepage may feature recent contributions to the discussion forums, a list of new articles, and a calendar of upcoming events whereas the “about us” section of your web site may contain just one article on each page.  Each of these elements is represented by a component, and the arrangement of these components may vary from group to group.

Both themes and layouts can be applied to your entire web site or just a small part of it.  More information on this subject is given below.

Applying a new Theme or Layout

• If you haven’t logged into the web site already, do so now.  Click the Login link at the top of the home page and enter the login name and password as supplied.
• Once you have successfully logged in click the web office link at the top of the home page.
• Click on the Settings tab in the task pane at the top of the window.
• Select the Themes and Layouts option.

Settings area not available? You must have one of the settings permissions in order to access this area; see you local web site administrator for more information.

The navigation pane on the left hand side of the window shows where existing themes and layouts have been applied:

The   symbol indicates that this group has a theme applied, the  symbol indicates that a layout has been applied.  So for example the root group, my church, has both a theme and layout applied, whereas the church life group has a layout only. 

The Womens Conference group is a mini-site with a different graphical style; the theme applied to this group creates a colour-coded area in the navigation pane to illustrate that the groups below have a different appearance.

The following example shows how to change the theme used by the root group.

To apply a new theme

• Click on the root group, (My church in the example above) to see the themes and layout settings for this group.

The theme in current use is highlighted as illustrated below:

To apply a different theme:

• Click the Add a new theme button to display the themes gallery.  The theme park is divided into two areas: a collection of styles available in the ChurchInsight gallery, and the styles you currently have created for your own church web site.
• Click on a theme in the gallery to copy it to your church web site.
• The new theme will appear in your list of available themes as illustrated below:

Before applying the new theme you can preview how the site will look by clicking on the   button next to the new theme.

• To apply the theme to your web site click the button   in the appropriate row, then click OK to confirm your choice.

The new theme will automatically be applied to every group below the current one – in the example given above the entire web site will be given the selected theme.

To apply a new layout

The following example explains how to apply a different layout to one of the groups in your web site:

• Click one of the groups in the navigation pane.

The layout currently in use is indicated in the layouts area as illustrated below:

The default layout for a group is illustrated below:

Note: if you have already selected a layout for your group the layouts area will indicate this.  You will need to remove the existing layout before you can select a new one.

• Click the change button to display a gallery of pre-defined layouts.
• Click on a thumbnail to select a new layout for the group.  Once the new layout has been selected you will be taken to the layout editor to make further changes if required.  For more information on using the layout editor see Modifying a layout below.
• Click the Save button to apply the layout to your group.  You can apply the new layout to any sub-groups by checking the apply to sub-groups option in the layout area.

Modifying a Theme

You can customise a theme to produce a new graphical style using the theme editor.  Each theme is made up of a large number of elements such as background images, fonts, colours, and margins; to reduce the amount of time you spend creating your own graphical style you should select a theme from the gallery which closely matches your requirements then make any necessary modifications as follows:

To modify the colour scheme of a theme

The following example explains how to modify the palette of a theme to create a new colour scheme.

• Click on the group where you wish to apply the new theme.
• If this group does not already have a theme applied click the change button in the themes area to display theme options. The themes currently in use on your web site will be displayed alongside the groups where they have been used:

• Click the Add a new theme button to display the theme park.
• Click on the theme you wish to copy; this may be a theme from the ChurchInsight gallery or the gallery from your own church.  The new theme will be added to the list (with a “(2)” appended to the title if this name has already been taken).  To edit this theme:
• Click the  button to display the theme editor.
• The colour palette on the left-hand side of the screen shows the colours used by this theme: 

Changing any of the colours in this palette will replace the corresponding colours on all pages which use this theme.

• Click on a colour to display the colour selector; pick a new colour either by clicking on the colour map, or by entering a colour value in the space provided.
• Once you have selected a new colour the preview pane will be updated accordingly.  Repeat this process for the other colours in the palette if required.
• Click the Save button to commit any changes.

See applying a new theme or layout above for more information on applying the modified theme to your web site.

To modify the style elements of a theme

The following example explains how to change other aspects of a theme to customise the look of your web site.  You may wish to amend a copy of an existing theme using the method described above to retain the old version for future reference.

• Click the   button next to the theme you wish to modify.

The Styles area of the theme editor is made up of a large number of elements contributing  to the appearance of your web site.  Many of these elements are grouped together.  For example, under the content group the text element controls the appearance of text in this theme:

Inside the text group other elements describe the appearance of specific types of text, for example, the appearance of headings and hyperlinks.  Properties for each of these elements are cascading; this means that if you select, for example, the verdana font for the text element all elements below will also use the verdana font unless another font is specifically selected.

The properties for each element are displayed on the right-hand side whenever an element is selected.  The text element, for example, has the following properties:

indicating that all elements below will use the verdana font and will be 10 pixels high (unless they have been altered specifically). Properties which have been set for this element can be removed by clicking the   button.

In many cases you can locate a particular element for editing by clicking on the item in the preview pane.  For example to change the size of the text at the top of each component:

• Click on the header as illustrated below:

The Middle element of the title bar group will be selected automatically.

• In the font/alignment properties enter a new font size: 

• The preview pane will be updated shortly afterwards.  By turning off the capture clicks feature you can navigate throughout the web site to see the effect of the changes you have made if necessary.
• Once you have made the appropriate changes to your theme click the save button.  See the applying a new theme or layout chapter above for more information on applying this theme to your web site.

Note: you may wish to give the modified theme a different name before saving to help you identify it in future.

Modifying a Layout

Once you have applied a layout to a group you can customise the components and modify the layout as follows:

• Click on the group where you wish to modify the layout (an existing layout is indicated by the  symbol).
• Click on the Edit button to display the layout editor.  The current layout is divided into three areas: