Themes and Layouts
If you currently have a site using old style themes and layouts then please get in touch if you'd like to upgrade to a new responsive template. The new templates will resize depending on the device they are being used on, making them much easier to view on a tablet or mobile phone. There are a number of templates available, many are free, so if you'd like to choose one from this page churchinsight.com/templates and get in touch by emailing email@example.com we can apply this for you.
The themes and layouts area allows you to change the appearance of your website. As well as defining how your home page will look, this allows you to create completely different styles for sub-groups within your website. For example, you may wish to give a charitable trust associated with your organisation a completely different appearance to distinguish it from other groups.
This document explains how themes and layouts are combined to create a visually appealing website 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 website. You can pick from a range of themes available in the 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 website 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 website 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 website 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, located at the bottom of the categories on the left-hand navigation pane.
Settings area not available? You must have one of the settings permissions in order to access this area; see you local website 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, Shareinsight, has both a theme and layout applied, whereas the Get Started group has a layout only.
The Design files
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 gallery, and the styles you currently have created for your own website.
Click on a theme to copy it to your website.
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 website click the button in the appropriate row, then click OK to confirm your choice. The icon will then change to .
The new theme will automatically be applied to every group below the current one – in the example given above the entire website 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 website:
Click the group you wish to apply a different layout to in the navigation pane.
The layout currently in use is indicated by the in the layouts area. If no specific layout has been applied then the default layout will be used.
To add a new layout click the Add a new layout button to display a gallery of new layouts to select from.
You can copy a layout from the gallery of pre-defined layouts or copy one that already exists on your website by selecting the other tab, titled with the abbreviated name of your organisation.
Most of the pre-defined themes require the corresponding layouts to achieve the intended look. For example if you've selected to use the Aldan blue theme then you should use the appropriate Aldan layout; if applying it to a group folder then the Aldan - groups layout should be selected.
Each page in the gallery displays 15 layouts, you can view other layouts in the gallery using the alphabetical navigation at the bottom of the gallery pane.
Once you have found the layout you wish to copy click on a thumbnail to select it, 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 commit your changes to the layout, you will return to the page displaying the themes and layouts selected for your group. Note:If the standard layout is used click the Select/Edit button to display the layouts available on your website for selection.
Before applying the new layout you can preview how the site will look by clicking on the button next to the new layout.
To apply the layout to a group homepage click the button in the Group column for the appropriate row, then click OK to confirm your choice. If you wish to apply a layout to all the articles in a group select the button in the Articles column.
The new layout will automatically be applied to every group below the current one unless the sub-group has a layout specifically applied to it – the exception to this rule is the home page; the layout applied to this group is never automatically applied to any other groups.
You can apply your new layout to other areas by first selecting the appropriate group folder and then by clicking button in the appropriate row to apply the chosen layout.
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:
Step 1 - launch the theme editor
First select the group where you wish to apply your new theme then click the appropriate icon that corresponds to the theme you wish to edit, the theme editor will load shortly afterwards.
Step 2 - modifying the colour scheme of a theme
The colour palette on the left-hand side of the screen shows the colours used by the theme:
Changing any of the colours in this palette will replace the corresponding colours on all pages which use this theme. You can change a colour as follows:
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.
Step 3 - modifying the style elements of a theme
The Styles area of the theme editor is made up of a large number of elements contributing to the appearance of your website. 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 (the capture clicks option will need to be on). For example to change the size of the text at the top of each component:
Click on the link as illustrated below:
The Links option in the text 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 (located on the right-hand side of the preview pane) you can navigate throughout the website to see the effect of the changes you have made if necessary.
Step 4 - Save your changes
Once you have made the appropriate changes to your theme click the save button. Your changes will be saved and the theme editor will be closed.
See the applying a new theme above for more information on applying this theme to your website.
Note: You may wish to give the modified theme a different name and description before saving to help you identify it in future.
Modifying a Layout
You can customise the components and modify a layout as follows: