Knowledge Base/Official Insight Help/Graphic Design (Themes & Layouts)

Themes & Layouts Introduction

Insight Support
posted this on September 30, 2010 10:30

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 powerful new tool 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:

 

themes navigation

 

The  theme icon small symbol indicates that this group has a theme applied, the layout icon small symbol indicates that a layout has been applied.  So for example the root group, ?, has both a theme and layout applied, whereas the ? group has a layout only. 

The ? 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:

    selected theme

    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:

    selected layout

    Before applying the new theme you can preview how the site will look by clicking on the  magnifying glass  button next to the new theme.
  • To apply the theme to your website click the button apply 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 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 RadioButtonOn 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 magnifier.gif  button next to the new layout.
    To apply the layout to an area of the site click the apply button button in the Group column for the appropriate row, then click OK to confirm your choice. This will apply the layout to the group homepage. If you wish to apply a layout to all the articles in a group select the apply button 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 centraldatabase home page; the layout applied to this group is never applied to any other groups.

    You can apply your new layout to other areas by first selecting the appropriate usergroup group folder and then by clicking apply button 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 edit-largeicon 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:

    colourpalette

    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:

     

    styles text

    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:

    styles 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 DeleteSmallbutton.

    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 header as illustrated below:

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

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

      text 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:

  • Step 1 - launching the layout editor

    Click on the group where you wish to modify the layout (if an existing layout is applied to a group the RadioButtonOn symbol is displayed). Click the Edit button edit-large for the layout you wish to edit; the layout editor will be displayed shortly afterwards. 

    The page layout area itself is divided into these three areas:
    • Header – the header area is displayed at the top of every page in this group - this includes the group homepage, the contents of an article and the contents of a forum. Note: the header could be different for articles in the group if a different layout is applied to articles in the group. In most cases this area will contain an image component containing the logo of your organisation, the status bar component allowing members to login, and the drop-down menus component allowing users to navigate around the website.
    • Contents – this area is used to display the selected content.
    • Footer – as with the header section, this area is displayed at the bottom of every page. You must include the footer bar component in this area as it contains links to ‘terms and conditions’ documents.

  • Step 2- Changing the layout structure

    Components
    are inserted into the cells of a table; new cells can be added using the buttons in the insert toolbar options and removed by merging them with neighbouring cells. For example:

    layout cells

     

    The appearance toolbar allows you to set a maximum width for any cell by specifying a maximum number of pixels or by specifying a percentage of the table width.  If you wish to change the width of your entire website see the Changing your page width article.

    You can also allocate a style code to a particular cell and set properties for all cells with that code (such as background image and colour) in the theme.

  • Step 3 - Adding Components
    Components are used to display the different information on your web site where and how you wish. A new component can be added as follows:

    • Navigate to the 'Components' area of the toolbar on the left-hand side and locate the appropriate component you wish to add. The Components currently available are as follows:

     

 

'Content' components
 
Adverts Displays banner adverts.  If this component is added to the web site home page it will display adverts from all groups in rotation.  If this component is added to a group homepage it will still display all adverts added to the site i.e.not only adverts in that group.  The advert component must be the same size for all layouts on your website. Only one advert component can be added to each layout.
Article Displays the contents of a single article. This can be the group homepage article, another article on your site or raw HTML code.
Directory Displays a list of organisations in a directory or a specific organisation’s details. Can also plot the organisations on a map and add a find my nearest search.
Image or Flash Displays a static image, a random image from a collection, or a Macromedia ‘Flash’ movie file.
Map Plots locations on a map. Useful for plotting a meeting/office location.
Media Player Embeds video and audio into your page.
Polls Displays voting polls located in the current group.
Signup Sheet Displays a graphical link to a sign-up sheet rota.

 

'Lists and Feeds' components

 

Articles list A component displaying a list of published articles. If this component is added to the website home page it will display the most recent articles with the “Feature on web site front page” option checked by default. If this component is added to a group home page it will display the most recent articles published in that group. These options can be changed however.
Blog Displays a list of articles in a Blog format. Therefore similar to the article list but displays in a format more appropriate for a Blog. The article entries will display in full, rather than a link to the article as in the article list component.
Calendar Displays upcoming events. If this component is added to the website home page it will display, by default, upcoming events in all groups which are visible to the user.
Forums A component containing recent posts in forums. If this component is added to the website home page it will display the most recent additions to all forums visible to the user.  If this component is added to the a group home page it will display recent additions to forums located in that group.
Media List Displays a list of recent published recordings or/and the most recent published document files e.g. PDF, Word, Spreadsheet files.
RSS Reader Enables you to feature content from a variety of other websites. Select from a range of inbuilt RSS feeds e.g. BBC News, or add your own RSS source to a scrolling or static display.
Rotas Displays the users next Rota task and when published on on a group homepage will also display links to any Rotas in that Group.

 

'Navigation' components

 

Breadcrumbs
Displays a trail of the groups navigated through to reach the current one – a kind of ‘where am I’. Not applicable to the home page layout but useful on group layouts to help users locate where they currently are in the site structure.
Drop-down menus A component containing the drop-down menus found at the top of most pages to allow you to navigate around the site.
Group Navigation The group navigation module displays the title of the current group with links to any sub-groups beneath. This component will not be visible on the website home page.
Search A component which allows users to search for keywords across your website or across the internet (using one of a range of popular search engines).
Social Bookmarking Adding this component makes it easy for your visitors to bookmark and share content on your site with others. e.g. Facebook, Digg etc.
Tag Cloud Displays a visual depiction of tags that have been added to content within a group.

 

'User Account' components

 

Join Group Adds links to apply to join or leave the current group's membership.
Login Box
Explicit login area that can be added to your home page making it clearer how members can login.
Profile Editor Can be used to capture information from new users or capture extra information from users who already have a login account on your site.
Status Bar A component found at the top of most of our sites allowing visitors to log in and containing links to the web office for administrators. 

 

'User Details' components (these components are primarily designed for use on a cogs.gif'user' layout which customises the look of the address book user profile page)

 

 Address  Displays the user or family's address
Connection Status
Connections , are relationships that be set up between users, similar to friends in Facebook. They allow a user to potentially share more information with those connected to them. This component displays to a user whether they are connected to the person's profile being viewed and gives them the opportunity to get connected to that user.
Email Address
 Displays the user's email address
Name  Displays the user or family name
Profile Image
 Displays the user or family's uploaded photograph.
Send Message
 Link to send a new private message.
Telephone Number
User or family telephone number
User List Displays links to a list of people. The people could be the current user's family members or the members of a particular group.

  • To add a new component to your home page:

    • Using Internet Explorer Browser: Click and drag a component from the components list into the appropriate cell in the table.
    • Using Mozilla Firefox browser: Select the cell you wish to add the component to by clicking within it, and then click on a component to add it to the selected cell.
      You can add more than one component to a single cell if required.
    Once the component has been added to your layout you can reposition it at any time by dragging the component to a new location.

    Double-click on the component to set additional options for this item.  Alternatively click the edit button to open the same window.

    If you wish to delete a component click the DeleteSmall button.

  • Step 4 - Save changes
    At any time you can see the effect of the changes you have made by clicking the Preview button in the top-right corner of the layout editor. You can use the show drop-down options to preview the layout for logged-in and non-logged in visitors. 

    Once you have finished making changes to the layout click the Save button to commit these changes. 

    Changes to your layout not displaying on your website? Make sure you've applied your layout to the content you are viewing on the website and that you've refreshed the page in your browser. See the applying layouts section of this article for further details on applying a layout to a group or articles in a group.
 

Comments

User photo
Andi Northrop

Is there a way to remove the 'Register' link from the status bar? I've noticed that a couple of sites have managed it (www.cck.org.uk being one of them).

Would be very useful if we could disable this feature.

Ta.

March 25, 2011 19:24
User photo
Insight Support
ShareInsight

Yes, you can hide the 'Register' link See this article for instructions:http://help.shareinsight.info/entries/372267-turning-off-site-group-registrations

March 29, 2011 11:38
User photo
Andi Northrop

Perfect, thanks.

March 29, 2011 12:16
User photo
Suzi Allen

is there somewhere I can find the RGB colour of our layout as we want to replicate the colour in some "buttons" we will put on the front page.

May 13, 2011 10:56
User photo
Steve Pendray

You say "For example, you may wish to give a charitable trust associated with your organisation a completely different appearance to distinguish it from other groups. "  Does that mean that the charitable trust's web site could look like an entirely separate website, with its own URL and it's own home page and a separate menu structure?

June 25, 2011 21:59
User photo
Insight Support
ShareInsight

Yes. You can create an entirely different look and layout through applying a different theme ad layout to the group folder you wish to look different.

In the drop-down menu component in the layout you can set your separate folder/group as the root so the menus only display it's subgroups.

The url can be forwarded via a http redirect to the relevant group but that does mean once the group is displayed it'll show the full url of that area of the site in the address bar.

June 28, 2011 10:31
User photo
Daniel Goodman

I would like to make more of our 'Footer' and it give it its own background image to make it stand out. Is it possible give it a background image in the same way that you can with the main page area. Specifically I want something that can reach from side to side of the screen no matter the size/resolution of screen.

Examples are www.plan-uk.org and www.endis.com.

August 05, 2011 15:26
User photo
Daniel Goodman

Can you use TypeKit fonts on ChurchInsight?

August 31, 2011 18:12
User photo
Grant Harrison

I have been trying to change the default background banner image for the theme I am using Pleoine and have manged to navigate to get to the replace image boxes. I select my new image and upload it but nothing happenbs and the old image is still in place.....any clues? btw the new image is the same dimensions as the old one

March 09, 2012 11:54
User photo
Paul Hickman

I am trying to extend the colour of the background of the website to cover the whole width of the screen ie to the edge of the monitor screen. I can't find an article telling me how - any help please?

May 28, 2012 14:13
User photo
Richard Hartnell

I have a problem applying the theme I edited.

The edited theme applies when I am logged in but not when I log out. 

Please help.

 

June 05, 2012 17:29
User photo
Paul Tostevin
Endis

Hi Richard

Please email support (support@endis.com) with the details of the theme you are having this issue with and whether it is for a particular layout?

Paul

June 18, 2012 14:04
User photo
Jennie Cloherty

When building a new section to our website or a fresh look, is it possible to do a mock version that can be previewed with full capabilities to follow links for internal use before going live with this?

November 26, 2012 15:15
User photo
Paul Tostevin
Endis

yes it is - generally I create a test group structure in the web office with sample content and apply the new theme and layouts to these. Set the security of the groups to be only visible to members of the test groups and then only add those members of the site to these groups who need access to create/review the new design. You can link to the pages directly - to get the link go to Summary > Advanced options > Tasks >  'Edit the page title and meta tags....'  or they can be made visible in the user menu (they will only be visible to users who are members of the test groups)

November 28, 2012 17:47
User photo
Ben Van Driel

Hi, I ma trying to upload an image for the background of the website. What is the measurement. On here you say 750 pixel yet when i go onto themes it says 960 pixels. could i get some clarification. 

 

January 16, 2013 10:08
User photo
Paul Tostevin
Endis

The size of the image will depend on the specific site and if you want the image to repeat or not. If it is to not repeat and match the width of the site  then the image should be the same as the width of the page.

January 16, 2013 10:21
User photo
Ben Van Driel

How do i find the width of the page?

January 16, 2013 10:24
User photo
Paul Tostevin
Endis

Normally Page layout > Contents region > Size > Width  but also best to check  that Content > Page header panel > Size > Width 

January 16, 2013 10:28
User photo
Ben Van Driel

that only tells me the size of the contexts region though, not entire page. 

January 16, 2013 10:44
User photo
Paul Tostevin
Endis

Depends what you mean by 'page' - if you are referring to what is viewable in the browser then this is obviously variable depending on how you size the browser. You can apply an image to the Page layout which applies to the body of the HTML.

January 17, 2013 09:30