Design and layout. Snippets and special functionality in layouts Printer-friendly layouts. See also

Transcription

1 Design and layout This user guide provides you with basic guidance on the use of the various layout tools in Tangora Portal CMS and Tangora Mini including examples of and checklists covering the various layout types: Visual Designer and Table Designer Colour palettes and typographies Images and image rotators Site layouts, page layouts, and section layouts Overview (item list/table/block list) and details view of pages with dynamic content Snippets and special functionality in layouts Printer-friendly layouts See also Tangora Software A/S. All rights reserved. This manual, as well as the software described herein, is furnished under license and may be used or copied only in accordance with the terms of such license. The content of this manual is furnished for information only and is subject to change without notice. The content of this manual should not be construed as a commitment by Tangora Software A/S, and Tangora Software A/S assumes no responsibility or liability for any errors or inaccuracies that may appear herein. Except as permitted by such license, no part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording or otherwise, without the prior written permission of Tangora Software A/S. All trademarks used in this manual remain the property of their respective owners.

2 Page 2 of 85 Table of Contents Introduction... 4 Various Layout Tools/Methods... 5 Which Layout Tool shall I Choose?... 5 The Basics of Visual Designer... 6 The Basics of Table Designer... 9 Switching between Layout Tools General Tips and Recommendations Site Layouts What is a Site Layout? Images Show Images in a Rotator Colours Create Colours from an Image Navigation Typographies Reuse Stylesheet from another Layout Include Browser-Specific Style Sheets Global Typographies can be used Across Site Layouts Create Global Typography How to Create a Site Layout with Visual Designer Check list: Create a Site Layout with Visual Designer Re: 1. Upload images Re: 2. Create colour palette Re: 3. Create the site layout, choose colour palette, etc Re: 4. Insert columns, images, navigation, page contents, etc Automatic or Manual Column Balancing? Re: 5. Set up padding, formatting, accent colour, etc Re: 6. Test with preview Re: 7. Publish Visual Designer Tips URL Syntax URL Syntax and Search Engines Integrate Functions in (site) Layouts Snippets = Tangora "Functional Packets" Example: 'Image rotator' snippet Create an Image Rotator Snippet... 35

3 Page 3 of 85 More about Image Rotators, Effects and Transitions More about Snippets in general Printer-friendly Layouts Printer-friendly Table Designer Master Layout Printer-friendly Layout via CSS Page Layouts Select a Default Page Layout Detailed Control of Usage of the Page Layout Site Layout and Page Layouts must Fit Together Create a Full-page Page Layout Page Layouts with Locked Content Create Page Layout with locked Content Automatic Display of i.e. Last Edited Date via Merge Field Page Layouts with Portal Functionality Do not Apply Cache or Page Layouts to Pages to be embedded Create a Page Layout with Portal Functionality Different Page Layouts for Overview/Details View Section Layouts Select Default Section Layout for each Site Create a Section Layout Picture Rules in Section Layouts Delete or Substitute a Section Layout Layout of Pages with Dynamic Content Display Overview as Bullet list, Table, or Block list Bullet List Table Block List Internal Navigation in Overviews Details View Making lines using border properties Layout Tips to Form pages and other Input pages Example 1: Set up Contact Form with Visual Designer Example 2: Placing more than one field in one line Example 3: Set up Form page with Table Designer... 85

4 Page 4 of 85 Introduction In Tangora Portal CMS and Tangora Mini layout can be controlled at various levels with four different types of layout: Site layouts Page layouts Pages with dynamic content Section layouts The site layout is the "template" determining the main layout of the website, including position of logo, menus, and page content ("main"). The page layout is the "template" determining the position of content on the pages (the "main" area of the site layout). Content may be taken from the page itself or the page layout/other pages. The pages with dynamic content have a number of settings options for presenting the dynamic content of the page. Pages with dynamic content displaying structured data (refer to section on structured content in Tangora User Guide) may also apply a layout template that has been specified centrally for the module in question (e.g. News). The section layout is the "template" determining the position of various types of section elements (e.g. heading, short text, long text, and image) and text formatting. It may be used for special functionality and/or visual "wrapping" of content, too. Main menu Submenu(s) Breadcrumb Page content Common to these types of layout is that they can be created freely you are not bound by fixed design templates. Site layouts, page layouts, and section layouts are created and administered from the Design & layout menu. Here you can also define colour palettes, typographies, and mini calendars:

5 Page 5 of 85 NOTE: Access to the Design & layout menu requires as a minimum Administrator and Design access rights. Various Layout Tools/Methods In Tangora Portal CMS and Tangora Mini you can work with layouts in three different ways: Visual Designer: Technically, layouts consist of DIV elements Table Designer: Technically, layouts consist of HTML tables Custom HTML code Visual Designer is the world's first visual browser based design tool for setting up advanced DIV based layouts using simple point-and-click. A DIV based layout is characterised by a clear-cut separation between content and presentation ensuring accessibility and making it easy for search engines etc. to identify relevant content on the page. Both Visual Designer and Table Designer allow you to use point-and-click and therefore require no or limited coding skills. Which Layout Tool shall I Choose? It is possible to create many layouts with both Visual Designer and Table Designer, but generally we recommend Visual Designer as layout tool, as it technically has a number of advantages in terms of Performance Search engines Accessibility

6 Page 6 of 85 Moreover, Visual Designer has a number of user-friendly advantages: Visual Designer Table Designer Internal display of layout WYSIWYG Table with merge fields Help with troubleshooting X Embedded layouts Unlimited 2 levels 1 Integrated design templates for navigation (e.g. tabs) X Number of navigation levels Up to 10 2 Max. 3 3 Snippets Image rotator Search Newsletter subscription External login HTML Flash Silverlight Image rotator Search Newsletter subscription External login HTML Flash Form Mini basket NOTE: If you choose Visual Designer for creating page layouts, the site layout must also be built with this tool (or with Table Designer together with the "HTML 4.01 Standards Mode" setting). Cases where Table Designer is the Best Choice Currently, Table Designer is best when setting up HTML mails. In connection with setting up pages with dynamic content in columns, however, Table Designer will in some cases be the best choice see "Block List" on page 65. The Basics of Visual Designer The structure of the layout is built up by means of columns that may contain one or more elements (images, navigation, page content, etc.) or other columns. The individual elements do not need to be inserted in a column, but can also be inserted directly in the layout. Both layout and column may contain an unlimited number of elements. If a column is marked when an element is inserted, the element will be placed in the column in question; otherwise the element will be inserted in the layout directly. Both elements and columns can be moved by using the arrow keys on the keyboard and removed from the layout via the Delete key. 1 A cell in the main HTML table of the layout can hold a separate HTML table. NOTE Tangora Mini does not support embedded layouts. 2 Requires the Unlimited navigation levels 3 The 3rd level requires Unlimited navigation levels

7 Page 7 of 85 Columns Columns are always inserted in column sets consisting of 1 to 5 columns. All columns in a set of columns belong together and will always have the same height as the column containing the most content, unless the layout has been set up to manual column balancing. See also "Automatic or Manual Column Balancing?" on page 25. The height and width of a column can be changed by using the functions on the Ribbon, i.e. the context-sensitive tool tabs, or via the mouse; the height is changed by dragging the "handle" at the bottom of a marked column. The width can be changed by dragging the "handle" on the right-hand side of a marked column. NOTE: Widths are changed from left to right in a column set, that is, the last column in a set cannot be changed; its width will be automatically adjusted when the next to last column is changed. Space In CSS, and thus also in Visual Designer, there is a distinction between two kinds of space; Margin, which is space around an element, and Padding, which is space inside an element. If, for instance, a text box has been inserted in the layout, padding is the distance between the border of the box and its content (the text), while margin is the distance between the border of the box and the surrounding elements. Margin space will not be displayed with background colour and/or background graphics. Use as Few Columns as Necessary It is seldom necessary to insert extra columns and the like to create the required space in a layout it can almost always be done by adding padding and margin to the elements. Extra columns will only enlarge the underlying code and make the layout less flexible. In general we recommend the usage of columns when you for example want to have graphics in layers (background image logo) or wish to place vertical navigation next to page contents. Element Inspector In practise, formatting of navigation, columns, merge fields, and other elements in the site layout is handled by means of so-called CSS (Cascading Style Sheets). This means that the formatting options on the various tabs in fact enable you to edit the CSS rules/typographies affecting a given element, but in an easy and user-friendly way. The integrated Element Inspector (F2) provides you with all the typography rules affecting the currently marked element. In this way you can quickly and effectively get an overview of the formatting affecting a given element.

8 Page 8 of 85 Look and Feel of Visual Designer When working with layouts in Visual Designer, the layout is displayed in WYSIWYG mode with sample content in navigation, breadcrumb path and 'page content'. You can set up properties and formatting of a selected element by using the buttons and options on the ribbon at the top: Preview Function with Live Content With the integrated preview function of Visual designer you can view the layout with the actual contents of a specific page: Learn more about Visual Designer in "How to Create a Site Layout with Visual DesignerFejl! Henvisningskilde ikke fundet." on page 20.

9 Page 9 of 85 The Basics of Table Designer In Table Designer the layout is displayed as a table, and the various elements (for example navigation, breadcrumb, page content, etc.) are represented by merge fields. You can drag the merge fields with the mouse from the overview below the layout table to a given cell. You can specify any number of table rows and columns and set the column widths, table margins and borders (optional) in the table properties (right click in the table). Each cell can be adjusted individually (text alignment, borders and text before/after the content of the cell) You can merge two or more cells, which may be useful when you for instance want to position text and images in relation to each other. You can only have one field and/or image in each cell. You can add images from the central image archive of the website to the table cells. You can insert text before and/or after the content of a cell as well as provide a cell with a given typography. Look and Feel of Table Designer NOTE: A cell can only hold one element. It is, however, possible to insert a socalled embedded layout with several elements:

10 Page 10 of 85 In the preview the layout looks like this: Switching between Layout Tools Technically it is not possible to edit a layout that has been created in one design tool in another tool this means that if the layout was first created in for example Table Designer, you must use this tool for any future changes. General Tips and Recommendations Make sure that the measurements of your layout elements fit together; if, for example, the width of a column/cell is 350 pixels, an image with a width of 352 pixels will not fit. If the layout is going to contain a fixed link to a specific page, it is a good idea to apply a URL shortcut (for example "/sitemap") as link address instead of a specific page ID; this will make it easier to change the destination page. Use for instance the Internet Explorer Developer Toolbar for troubleshooting layouts and CSS. If you want to change a layout that is being used on the website, it may be an advantage to make the changes to a copy of the layout in question and in this way avoid unintended damages. You can copy both site layouts, page layouts, and section layouts. If you, for instance, want to change site layout, it will mean less adaptations to the set-up and page layouts of the pages, if the cell with {main} is the same size (width) as in the old layout. Global merge fields can be inserted in site layouts, page layouts, and on pages. They are used for displaying system generated information (for example the last edited date of the page). The Tangora User Guide contains an overview of merge fields.

11 Page 11 of 85 Site Layouts There are no limitations as to how many site layouts can be created in a given Tangora Portal CMS solution, and you can easily apply different site layouts (for example one site layout for the front page, one for subpages, and yet another one for the intranet). What is a Site Layout? The site layout is the 'design template' determining the main layout of the website including position of logo, menus, and page content: Background images Image (logo) Button Navigation Snippet/code block Breadcrumb "{Main}" area (page content) Site layouts may be created freely and can, popularly speaking, be replaced at a mouse click without starting from scratch with the content of the website. Images The images and files you want to use in a site layout must be uploaded to an archive in Tangora Manager. The image archives contain the following file types: GIF (logos etc.) JPG (photos) PNG (photos) If you upload images of for example the BMP or TIFF format, they will automatically be converted into JPGs.

12 Page 12 of 85 Before uploading images to Tangora Manager you should consider the access rights to the images: If all users with access to the central image archive shall have access to the images of the site layout, you just create a category for the images in there. If you, on the contrary, want to control the access to the images more specifically, the images should be placed in a separate archive (requires the purchase of extra archive). Table Designer comprises a site layout archive for every site layout, and you can then decide whether the images shall be placed in a site layout archive or in the central image archive. If you choose to use the image archive of the site layout, it is possible to enter various properties for the images. Show Images in a Rotator Use a Snippet to insert an image rotator in for example the site layout see "Integrate Functions in (site) Layout" on page 31.

13 Page 13 of 85 Colours You can create all the colour palettes you need and assign a specific colour palette to site layouts and databases (in the site layout/database properties). If you do not select a specific colour palette for a site layout, the integrated default colour palette of the system will be applied. You can easily modify it or create your own colour palette and select it as default palette. Create Colours from an Image 1. Go to Design & layout > Colour palettes and copy the existing system palette (to include its colours) or create a new, empty palette. 2. Double click an empty colour field, click Add and then Use userdefined palette image. Choose the wanted image (or upload it, if it is not already to be found in the Tangora Manager archive). 3. Point out the wanted colour by using the pipette tool and enter an appropriate display name for the colour: TIP: Use the zoom and move button on the mini toolbar to get closer to a certain section of the image. 4. Click OK to create the new colour and Save the colour palette. 5. Repeat steps 2-4 for every new colour (the system remembers the latest image you have used, so you do not need to find it again). 6. You can change the order of the colours (drag the mouse). 7. Save the colour palette when you are satisfied with the selection and order of the colours.

14 Page 14 of 85 NOTE: If you later change a colour, the change will not take effect in those places where the colour has been selected; on the contrary, you will have to manually "apply" the changed colour where wanted. Navigation Visual Designer contains a gallery with a series of pre-defined templates making it easy and quick to format the navigation, and the integrated Navigation Designer makes it possible to modify the basic set-up of the chosen template and therefore lightning quick to create new navigation typographies: Tab with tool for formatting the chosen navigation Sample content Navigation Designer Navigation Designer allows you to set up the properties of the navigation and generates automatically the necessary graphics for the navigation, for example rounded corners and effects. See also entries at Tangora Developer Blog ( All blog entries on Visual Designer Graphical navigation in Visual Designer with CSS Drop Down navigation in Visual Designer Typographies The typographies applied on a website will most often be defined in the main layout. These site layout specific typographies can be defined in Visual Designer,

15 Page 15 of 85 either by point-and-click selection of various formatting options (for example font, font size, and accent colour in the case of text) for a given merge field/element in the site layout, or by direct insertion of the wanted CSS code by clicking the Styles button: Besides, you can assign one or more external style sheets (for instance browser specific style sheets) via the Properties of the site layout in the Application menu. Read more in "Reuse Stylesheet from another Layout" on page 16. When you point to a given element in the Visual Designer window, a label with the name of the applied CSS class will be displayed: TIP: If you, when editing a page, apply a link to a marked piece of text, the text will automatically be provided with link typography. The link typography will most often have been defined in the applied site layout. You can view all CSS properties via the integrated Element Inspector (F2). See also "Element Inspector" on page 7.

16 Page 16 of 85 Reuse Stylesheet from another Layout In the Properties of the site layout (found on the Tangora application menu at the upper left corner) the Stylesheets tab allows you to include a style sheet from another site layout in the web solution: NOTE: The site layout containing the style sheet that you want to include must be published. In this way you can use the same style sheet for all the site layouts (typically front page layout and sub page layout) belonging to a given graphic design line, so changes only need to be made in one place. Important: If a style is specified in both 'master' and 'slave' style sheets, the 'slave' style sheet will always "win". This means that if you want alternative formatting in relation to the main style sheet, styles should only be defined locally. Include Browser-Specific Style Sheets In a perfect world all browsers would work in the same way. Technology, unfortunately, has not come that far yet, so therefore it may be necessary to create browser-specific style sheets. You can do this via the Properties menu item in the Tangora application menu at the upper left corner: 1. Select the Stylesheets tab and click Add: 2. Enter a name of the style sheet, select conditions, click Add, and then OK:

17 Page 17 of The newly created style sheet will be displayed in the overview of browser specific style sheets. Mark the new style sheet and click Edit: 4. The Tangora CSS Editor opens allowing you to insert the wanted CSS: 5. Click OK to save changes.

18 Page 18 of 85 Global Typographies can be used Across Site Layouts In Tangora Portal CMS you can define so-called "global typographies", which can be used across different site layouts and sites the application rights are determined by the individual typography. TIP: The global typographies can for example be used in connection with the editing of a page: The advantage of using typographies for formatting text instead of for instance choosing text colour and/or applying boldface, italics and underlining (CTRL+B/I/U) is that you later on can change colour etc. in one place without having to make the changes to each page. NOTE: Only users with administrator rights are allowed to create and edit global typographies. Character or block formatting The character to the right of a typography class name indicates whether it is a character or block typography. Character formatting (a) only affects the marked text, whereas block formatting ( ) will affect the whole block which the cursor is placed in. See also the tip below. Create Global Typography 1. Go to Design & layout > Typographies and click Create. Enter name of the typography, choose HTML tag (character or block formatting) and other properties: The HTML tag is used for defining whether it is heading typography (H1 = heading on level 1, H2 = heading on level 2, etc.), character formatting (span) or block formatting (div + p). NOTE: The HTML tag only works when the typography is applied to a WYSIWYG field.

19 Page 19 of Click OK. The various options are now displayed: TIP: Select "em" or "%" as size unit if the visitor shall be allowed to choose text size via the browser. 3. Enter the wanted settings, and use the Preview tab if you want to see the result. Save regularly by clicking Save, and click OK when you have finished configuring the typography. IMPORTANT: Do not rename the class name of the typography if it is in use the typography will no longer work then.

20 Page 20 of 85 How to Create a Site Layout with Visual Designer Below you will find a detailed step-by-step guide to creating a site layout that will look like this example: Top graphic (background image) Logo with hover effect Navigation (level 1) Breadcrumb Dummy content Navigation (level 2-4) Footer (text field) Check list: Create a Site Layout with Visual Designer Overall, creating a site layout can be divided into the following subtasks: 1. Upload images (examples are available at 2. Create colour palette 3. Create the site layout, set up URL syntax, choose colour palette and preview page 4. Insert columns, images, navigation, page contents, and other elements 5. Modify formatting In "real" production situations you will perhaps follow another order of steps or carry out some of the steps simultaneously all dependent on what suits the current design and your temperament best. 6. Test with preview 7. Publish layout Re: 1. Upload images Upload the three images (one top graphic and two logo graphics) for the site layout to the "Twilight layout" category in Archives > Image archives.

21 Page 21 of 85 Re: 2. Create colour palette Follow the instructions in "Create Colours from an Image" on page 13. Re: 3. Create the site layout, choose colour palette, etc. 1. Go to Design & layout > Site layouts and create a new site layout (remember choosing a layout slot). You will get an empty "page" just as when you start in Word, for instance. 2. Click the Tangora button and select Properties. You may select other link syntax (see "URL Syntax" on page 29). Go to the Manager tab, associate colour palette, and select a page for preview: TIP: You can save the site layout in different ways: The Tangora menu The mini toolbar CTRL+S 3. Click OK, save the site layout, and reload the layout with F5 enabling the chosen colour palette. Re: 4. Insert columns, images, navigation, page contents, etc. 1. Via the Insert tab, add a 100% column for top graphic and a 25/75% column set for navigation 2-3 and page content:

22 Page 22 of Then insert the Breadcrumb merge field by clicking it with the mouse: TIP: When you insert a new element in the layout, it will automatically be placed at the bottom. You can move the elements by using the arrow keys on the keyboard. To insert an element in a column, you must first mark the column then you do not need to move the element into the column manually. 3. Click the breadcrumb path in the layout so it gets marked with a green border, and move it up below the 100% column by using the Up key: 4. Mark the 25/75% column set, and make it higher by dragging the mouse. Select the right column and insert the Content merge field (page content): When a column has been marked, you can drag it higher or lower by means of the displayed "handle" when you drag the handle, the (minimum) height of the column is displayed. You can change the width in the same way by dragging the handle in the right side of the column (the width of the last column in a column set, however, cannot be changed it will adjust automatically when the 'neighbouring column' is modified).

23 Page 23 of Click the dark grey background of the layout to deselect the column and insert the horizontal navigation. Mark the navigation and move it up below the 100% column by using the Up key: 6. Mark the left column in the 25/75% column set, and insert Navigation 2. Mark the navigation and insert yet another navigation (=level 3). Confirm that it shall be inserted as sub navigation in navigation 2: TIP: In a column set with more columns the chosen column will always 'lie at the top' cf. left corners of the column. Hold down CTRL key while clicking a column to be sure that you have selected the right one. 7. Insert a text box for the footer:

24 Page 24 of Mark the 100% column and insert the background image via the Formatting tab: TIP: One of the advantages of inserting the top graphic as a background image is that it makes placing for instance a logo on top of it easier. Besides, the top graphic does not have to fit precisely, as you can "crop" it by means of the column height and width. 9. Choose the No repeat setting and drag the handle at the bottom of the column to make the column height fit the image. 10. Go to the Insert tab and insert the logo in the 100% column: TIP: If you have uploaded the images to the site layout in a separate category, you can easily find the images by filtering on that category in the "Insert image" dialogue. You may choose the Medium images display mode as in this example. 11. Mark the image and choose Hover Image on the Settings tab:

25 Page 25 of Save the site layout. Automatic or Manual Column Balancing? Visual Designer will by default try to make all columns in a given column set the same height. If a layout applies advanced CSS features such as CSS controlled positioning of elements, or if a page for instance presents content dynamically via Ajax, it may be an advantage to control the height of specific columns manually. This requires that you first switch from automatic to manual column balancing: Open the Tangora application menu by clicking the Tangora button in the top left corner and select the Properties menu item: Select Manual column balancing at the bottom of the General tab. Then, in the height settings of the individual column you can manually activate column balancing, if you want the height of the column in question to be adjusted in relation to the column set that it is included in:

26 Page 26 of 85 If you activate column balancing, the height of the column will automatically be the same as the highest column in the column set. Re: 5. Set up padding, formatting, accent colour, etc. 1. While having the logo image chosen as in step no go to the Mergefield Formatting tab, choose the Float right wrap, and set up the image margin to Normal margin: 2. Mark the 100% column, click Background colour, and choose a dark background colour for the column (same as will be applied as page background colour) for the sake of the top rounded corners of the image: TIP: The top graphic has been made in.png format because it supports transparency of rounded corners. Here's what it looks like before and after choosing a dark brown background colour:

27 Page 27 of Now mark the breadcrumb, choose background colour, set up padding (here a user-defined padding of 10, 10, 15 and 15 pixels respectively has been chosen), and define the bottom border of the element: 4. Set up the background colour and padding of the footer text box in the same way. 5. Click the dark background of the layout (to deselect chosen elements, if any), and choose a matching Accent colour: TIP: If you select a specific element (e.g. the Content merge field), before choosing Text colour, Accent colour or other formatting from the Layout tab, the formatting will only apply locally to this single element. 6. Mark Navigation 1, click the Formatting (Navigation) tab, and choose the vertical navigation typography with black/petroleum from the gallery: NOTE: In case you have set up formatting locally for a specific element, it will not be affected by any global choices of formatting you may make later on. See also "Reuse Stylesheet from another Layout" on page 16.

28 Page 28 of Click Create new > Create a copy of the selected chosen navigation style, enter a name, and use the Navigation Designer (see page 14) for setting up the background colours of the various tabs to make them go with the design of the site layout (for example black brown background for Navigation and Normal, burnt orange for Hover, and brown for Active): Navigation Designer allows you to tailor/customise the chosen navigation element in terms of colour, effect, indent, etc. Remember to provide the navigation with a unique name instead of the default "Custom navigation style". 8. Mark Navigation 2 and select the Vertical boxes with rounded corners in white, grey and turquoise navigation typography. Confirm that the sub navigations shall apply the same typography: See also "Reuse Stylesheet from another Layout" on page Make a copy of the typography, provide it with a unique name, and set up colours and padding by using the Navigation Designer: 10. Go to the Page tab, choose a background colour, and save the site layout.

29 Page 29 of 85 Re: 6. Test with preview If you want to test the site layout in relation to the actual pages contained included in the web solution, instead of the sample content in Site Designer, click Preview in the mini toolbar or go via the Tangora button. Re: 7. Publish Before the site layout can be applied to the website, it must be published. This is done by clicking Publish in the mini toolbar, the corresponding button on the Tangora application menu, or by pressing CTRL+U. More examples See also blog entries on Visual Designer at the Tangora customer centre. Visual Designer Tips Apply as few columns as possible add padding/margin directly to the elements. Move columns and elements with the arrow keys. Mark a column if you want to add for example navigation to it otherwise the navigation is inserted at the bottom of the layout. CTRL + arrow key change order in a column set. Use Show/hide column borders for "pseudo preview". Show/hide the Element Inspector with F2. Save regularly with CTRL + S. Publish with CTRL + U. URL Syntax In Tangora Portal CMS it is possible to control, via the site layout, what the URL will look like by choosing for example one of these syntaxes in the properties of the site layout: title].[pageid].aspx (=default syntax) title] title /[Page title] The title].[pageid].aspx default syntax combines the performance advantages of "page[pageid]" with the search engine advantages of the "[Page title]" syntaxes. The default for site layouts created in older versions of Tangora Portal CMS is This short syntax ensures that the solution is backward compatible with for instance JavaScripts that retrieve the ID of the page from the URL.

30 Page 30 of 85 The URL syntax can be changed by administrator users with license to the Site Designer module and by Tangora Partners (despite license). URL Syntax and Search Engines Tangora Portal CMS allows you to use the page title or site/title as address. This provides you with more options when making optimisations for search engines, but be aware that changes to the name of a page and/or site may result in search engine links and external links no longer working. Moreover, problems may occur if more pages have been provided with the same name.

31 Page 31 of 85 Integrate Functions in (site) Layouts Integrating special functionality in a site layout or other types of layout can be done in two ways: By applying code By applying Tangora snippets Special functionality such as external scripts or global merge fields can be inserted in layouts via a so-called code block: It applies to both methods that the Visual Designer functionality in question must be inserted in the layout via a so-called code block. You can edit the code block directly in Visual Designer via the integrated HTML editor. In this way you can insert scripts for external functionality such as Google Adwords or Google Analytics (see If you need to insert your own code in a layout created with Table Designer, you can insert the code in a given cell in the Text above/below content fields (double click the cell, switch to HTML mode in the wanted field, insert the code, and click OK). The code block can be moved around in the layout in the same way as other elements. If you want to use functionality already available in Tangora, you can apply various so-called snippets enabling the direct use of the functionality of a module without having to write code. Snippets = Tangora "Functional Packets" A "Snippet" makes it quick and easy to integrate special functionality such as search, image rotator and mini basket in a site layout or page layout without coding. You can for example define a search snippet and place it in the site layout making the search function available on all the pages of the website or you can create a page layout with an image rotator automatically swapping various images. Here a search snippet using functionality from the search module (the module must be available in the solution) has been inserted in the site layout NOTE: Some snippets contain limited functionality in Tangora Mini 'fold/unfold'- effects, for instance, are only available in Tangora Portal CMS.

32 Page 32 of 85 In order for you to use a snippet, the module that the snippet "belongs to" must be available in the solution. If you want to apply a search snippet, the web solution must comprise the Search module. The Image rotator and Flash object snippet types are included in Tangora Portal CMS, while Image rotator can be purchased for Tangora Mini. In Visual Designer snippets are inserted in a code block as a merge field, typically {system.embed.snippet(id)}. Mini baskets, however, are inserted via the {system.shoppingbasket.page(sideid)} merge field, where pageid is the ID of the corresponding shopping cart page (requires the Shopping cart module). Pages can, in general, be embedded in layouts via the {system.embed.page(sideid)} merge field. NOTE: Some snippet types are only supported by Table Designer. They are not available from the Snippets menu, but can only be selected when you work with Table Designer. Example: 'Image rotator' snippet The image rotator automatically swaps a given number of images, and you can decide for how long the images shall be displayed and what the transitions between the various images shall look like. You can for example let images fade out and in: NOTE: The image rotator is included in the base module in Tangora Portal CMS, but must be purchased for Tangora Mini. The transitions can either be defined overall for the image rotator as such, or locally for the individual image. Transparency or Overlap? If you decide on transparent background for the image rotator the background of the site will be visible when the visibility of an image decreases in connection with a transition. If you, instead, select the Overlap setting, the next image is displayed in the background. This option is of importance when you decide on the transitions you want to use for your images. Transitions A transition may consist of one effect or more effects in combination. You can for example design a simple transition making an image fade in via the fade effect, or you can combine more effects so the transition makes the image fly in from the side and at the same time zoom and fade. Designing a transition may be a somewhat time-consuming process, but since transitions can be

33 Page 33 of 85 stored, they can be re-used in all other image rotators in the solution. Moreover, they can be exported/imported across solutions. Transition In or Out? When creating a transition you need to select direction on the first tab. The direction relates to the fact that an image in the image rotator can have two types of transition; a transition making the image visible (direction in) and/or a transition removing the image again (direction out): This concept differs slightly from the traditional method where a transition is defined as an animation replacing image A with image B: Image A Transition Image B In the image rotator, on the other hand, the transition between two images consists of two transitions: Image A Transition out (Image A) Transition in (Image B) Image B Thus, an image has the following life cycle in the image rotator: Transition in Normal display Transition out Transitions are optional, and images may therefore have no transitions, just an in transition, just an out transition, or both an in and out transition.

34 Page 34 of 85 Effects Effects are a way in which an image can be made visible or disappear. An image can, for instance, be displayed by fading in, by zooming in, or by flying in from the side. The various effects each have their own settings. In connection with the Fly effect, for example, you can choose if the image shall fly in from the right, left, top, or bottom. All effects have an easing parameter that controls the acceleration of the effect: A Fade effect without easing, for instance, will make the image fade in/out at an even speed. With easing you can make the effect start at high speed and then slow down or maybe even overshoot and bounce back.

35 Page 35 of 85 Create an Image Rotator Snippet 1. Go to Design & layout > Snippets and double click the Image rotator type. 2. Click Create, enter the settings of the image rotator (see also the sections on transitions and effects above), and add the wanted images: NOTE: It is important that all images in the image rotator have the same width and height otherwise the system will stretch the images to make them fit the specified dimensions. You can set up the image rotator so it applies a random or a specific start image. In the latter case the start image will be the one placed in the top left corner in the image field. You can change the order of the images by dragging them with the mouse: 3. Click Save and test the image rotator via the Preview tab. 4. Insert the image rotator in a site layout, page layout, or on a page by means of the {system.embed.snippet(id)} merge field: Double click an image in the image field if you want to add a link or other properties to the image: The merge field for displaying the image rotator has been inserted in a code block in a page layout. The code block has been inserted in the right column in a column set (see also the section "Create Page Layout with locked Content" on page 45), where the text box below has been provided with the Clear both wrap setting.

36 Page 36 of Test that the image rotator works as requested. It may look like this in Tangora Manager on pages applying the page layout in question: Here the merge field for the image rotator with ID 1 is displayed. Tips on Backgrounds and Transitions If you have chosen that the images shall overlap each other, the best result is achieved by only using transitions with the same direction for all the images. This means that all the images in the image rotator must use either in transitions or out transitions not both types. If you have selected transparent background, you can with advantage specify that the images shall have both an in and an out transition. But then you should be aware that the chosen transitions are aesthetically compatible. When an out transition and an in transition are executed right after each other, you get the best result if the transitions are aesthetically compatible. If the out transition, for example, leaves the image invisible, you can say that it is aesthetically compatible with all the in transitions starting with the image being invisible. Correspondingly, you can say that an out transition leaving a roughly pixelated image will work best together with an in transition beginning with a roughly pixelated image. More about Image Rotators, Effects and Transitions More about Snippets in general

37 Page 37 of 85 Printer-friendly Layouts Printer-friendly Table Designer Master Layout 1. Create a new Table Designer site layout (you may also copy the main layout of the website). 2. Select "No navigation" in the properties of the site. 3. Edit the layout. 4. Edit typographies. 5. Assign the site layout to a layout slot (if you have not already done so). 6. Go to Master layouts and select the site layout as master layout. 7. Choose Site layouts > [wanted layout] > Images and attach the master layout to a print icon: TIP: In many cases it will be easiest to implement a printerfriendly layout by means of a Table Designer master layout. If the site layout of the website has been created in Visual Designer, you can call the printerfriendly layout with the following syntax: {system.safeurl}layout =[layoutslot] Choose Site layouts > Layout pool to see which layout slot, the wanted master layout has been assigned to. Printer-friendly Layout via CSS Insert CSS print in Layout > Typographies (Visual Designer) or Typographies > Advanced (Table Designer):

38 Page 38 of 85 Page Layouts Page layouts determine the position of the content on the individual pages. A page layout consist of various blocks i.e. "place holders" for text, images, and maybe dynamic content from one or more modules (e.g. a news block) that has been placed in a layout. Page layouts are created by means of point-andclick in the integrated layout tool or freely with HTML code. When editing a page the page layout assigned to the page will determine where you can place content. The page layout may also contain "locked" content in the form of text, images, and merge fields such as {system.page.title} and {system.edited.date}. Read more in the section "Automatic Display of i.e. Last Edited Date via Merge Field" on page 49. TIP: By means of a page layout you can show content from different modules on one page (portal functionality). NOTE: Page layouts with portal functionality can only be created in Tangora Portal CMS not in Tangora Mini. NOTE: Page layouts can only be created by users with administrator rights. Select a Default Page Layout Users with administrator rights can point out a default page layout for every site via the properties of the site: This page layout will automatically be pre-selected when a user creates en new page in the site in question. Selecting a default page layout will make it easier for less experienced users to create new pages and at the same time ensure a consistent graphic design of the website.

39 Page 39 of 85 Detailed Control of Usage of the Page Layout You can control which type of users may use your page layout, and you can also specify whether the page layout shall be applied in all or selected sites/areas: Correspondingly, you can you control the rights to the individual elements in the page layout at user and/or group level. Site Layout and Page Layouts must Fit Together It is important to set up the width and height of the page layout so it is consistent with the site layout. You can check the dimensions of the site layout via the Site layouts menu item (requires Administrator Rights with Design Access) or on the website itself by using the Internet Developer Toolbar. In the site layout you can see how much space is available for the content area by marking the Content merge field and read Max. width of content in Element Inspector (check the Show Element Inspector field at the View tab or press F2): NOTE: To get the correct measurement of the column width via Element Inspector, you must first deactivate column view or add 2 pixels to the displayed measurement.

40 Page 40 of 85 You need this measurement when you, in connection with creating the page layout, must define the width of the page layout. Create a Full-page Page Layout 1. Select the Page layouts menu item in Design & Layout and click Create above the overview: 2. Type a name of the page layout and define the access rights see also "Detailed Control of Usage of the Page Layout" on page 39. Click OK. 3. Double click the page layout in the overview then an overview of the content blocks of the page layout will be displayed. By default an empty primary section block has been created i.e. a 'placeholder' for the users' content on the various pages. You may insert default content in the section block for example instructions to the users who are going to use the page layout. This is done by double clicking the primary block in the overview (or by using the Edit button): 4. Then click Edit section and Create new section:

41 Page 41 of Insert the wanted content and click OK to close the dialogue for section editing. 6. Then click Back and OK to close the editor window and return to the overview of the page layout blocks: If you mark the "Locked" checkbox, the users applying the page layout cannot create new sections or change section layout. In this way you can, for instance, ensure that the users only insert images from a specific category provided that the section layout contains rules of that see "Picture Rules in Section Layouts" on page 58. Here you can make a section block read-only so it can only be edited by certain groups of users and/or by users with a specific level of access rights.

42 Page 42 of If the users shall be able to insert content on the page in more "content areas", you can create more section blocks as described above. 8. When all section blocks have been created, they must be placed in the actual layout: Click the Edit layout button. 9. Click the Layout tab and specify the width of the page layout see also "Site Layout and Page Layouts must Fit Together" on page 39: TIP: Users with administrator rights can create and modify the typographies: 10. Go to the Insert tab and insert a text box with the global {system.page.title} merge field as content. Mark the merge field, select a typography, and click OK: See "Create Global Typography" on page 18. TIP: Global merge fields can be inserted in site layouts, page layouts, and on pages. They are used for showing system generated information (e.g. last edited date of the page). See Tangora User Guide.

43 Page 43 of Insert the primary section block by clicking it in the Merge fields overview: 12. Press CRTL+S. Now the page layout is ready for use. TIP: If the web solution applies different site layouts, use Select site layout from the View menu to see what the page layout will look like in the various site layouts: TIP: Margin or padding has not been defined for this page layout, as this has already been set up on the content element in the site layout. Whether margin/padding should be defined in one or the other type of layout depends on the graphic design. In general, it is a good idea to specify margin, etc. as "high" up as possible that is, rather in the site layout than in the page layouts.

44 Page 44 of 85 Page Layouts with Locked Content The page layout applied to this page only contains two free "writing areas". The heading of the page, the blue-grey block with the photo of an apple and some text, and the last edited date are all "locked" content: "Writing areas" of the page The page looks like this in Tangora Manager, when "Show text borders" has been activated: TIP: Click the Show text borders button to see the "writing areas" of the page: The locked content can either be inserted directly in the layout or via a socalled page block see "Page Layouts with Portal Functionality" on page 50.

45 Page 45 of 85 The choice depends on which users shall have access to changing the locked content and how you otherwise want to use/re-use the content. In the example here the page layout contains two section blocks ("Primary" and "Links") that have been inserted in the layout in separate columns: In this page layout columns are used for controlling the position and formatting of the individual elements. See also "Use as Few Columns as Necessary" on page 7. Text box with merge field for title of the page. Section block for body text of the page. The locked text elements (page title, contact reference, and last edited date) have been added by means of text boxes. The right column also contains two more 100 % columns for the blue-grey background colour and the apple photo respectively. The latter has been inserted as a background image in the inner column (used for "cropping" the image and providing the dark grey frame), but might also have been placed directly in the blue-grey box (in that case the image would be the correct size). 67/33% column set with two embedded columns in the 33% column. See "Create Page Layout with locked Content" on page 45. Section block with default content (see step 5 in "Create a Fullpage Page Layout" on page 40). Text box with merge field for last edited date. The line above the date is a top border of the text box. Create Page Layout with locked Content 1. Create a new page layout with two section blocks ("Primary" and "Links"). If needed, insert default content to help editors use the sections. 2. Insert a text box with the global {system.page.title} merge field as content and apply a relevant typography (see "Create a Full-page Page Layout" above).

46 Page 46 of Insert a 67/33% column set, adjust height and mark the left column (hold down CTRL key and click), and insert the primary section block in there. 4. Mark the right column and insert a 100% column in it: When you add a new element to the layout, it will automatically be placed at the bottom. You can move the elements by using the arrow keys on the keyboard. If you want to insert an element in a column, you must first mark the column then you avoid moving the element to the column manually. 5. Use the "handle" on the bottom border of the 100% column to drag it higher and select "Normal padding" for the column. Now, insert a new 100% column in the column: TIP: In a column set with more columns the selected column will always 'lie at the top' cf. the left corners of the column. Hold down the CTRL key while clicking a column then you will be sure to have selected the right column. 6. Mark the inner 100% column and choose a background image: When a column has been marked, you can drag it higher or lower by using the displayed "handle". You can change the width in the same way, i.e. by dragging the handle on the right side of the column (the width of the last column in a column set, cannot be changed, though it will adjust automatically when the neighbouring column is changed).

47 Page 47 of Set the position of the background image to be centred and drag the column higher, so the wanted section of the image is shown: 8. Add a border to the column. TIP: Enter the settings for the Top border and click Use same values for the fields below: 9. Mark the outer 100% column and select a background colour:

48 Page 48 of Then add a text box with the contact reference text below the photo of an apple (remember that the outer 100% border must be marked before inserting) and set a top margin of 10 pixels for the text box:

49 Page 49 of Mark the 33% column and insert the Link section block (here with a left margin of 15 pixels) and a text box with the global {system.edited.date} merge field for display of last edited date: 12. Finally, add a top border to the text box with last edited date: 13. Save the page layout with CRTL+S. Automatic Display of i.e. Last Edited Date via Merge Field By means of global merge fields you can for example display the name of the user who created/edited the page ({system.created.name} and {system.edited.name}) and the last edited date of the page {system.edited.date}. Global merge fields are often inserted in the actual layout of a page layout/site layout (that is, in a text box in the layout), but they can also be applied directly to a given page. Page layouts will often contain a global merge field ({sys-

50 Page 50 of 85 tem.page.title}) for displaying the title of the page see the screen shot in step 10 above. TIP: The Tangora User Guide contains a complete overview of all global merge fields. Page Layouts with Portal Functionality By using page layouts with portal functionality you can create pages containing several, simultaneous functions like here with a news block on a form page: Locked content (see also "Page Layouts with Locked Content" on page 44) Embedded news block Locked content Form page This is achieved by embedding content from other pages in the page layout. Embedding can be made in two ways: Create and place a page block in the layout. Insert the {system.embed.page(pageid,cacheduration)} 1 merge field in the layout via a code block. NOTE: If you want to embed pages intended for receiving input from the visitor (for instance newsletter subscription, form page, external login etc.), you must be aware that the page will switch to the embedded page in connection with submission. Content from external web pages may for instance be embedded in the page layout via code blocks or by creating an HTML page and embedding it. Pages imbedded in a page block will only display the main content and therefore not a page layout, if any. 1 Cache duration must be specified in minutes.

51 Page 51 of 85 Do not Apply Cache or Page Layouts to Pages to be embedded When a page is embedded in a page layout, you should not use caching on the actual page: Do not apply caching on a page used for embedding purpose. Instead, you should activate the cache function on the element comprising the embedment (that is: merge field or page block). Instead activate the cache function on the element comprising the embedment (i.e. {system.embed.page(pageid,cacheduration)} or page block): This does not apply to pages with user specific content, though they should not be cached. You can read more about caching in the Tangora User Guide. Pages that are only used in embedded form do not need to have their 'own' page layout, since the layout is controlled by the page layout that the page is embedded in. Create a Page Layout with Portal Functionality 1. Create the wanted page with dynamic content, for instance a news page, and set it up (for example for showing the three latest pieces of news with date and heading in a compact display mode see below). Remember to deactivate the integrated cache function of the page.

52 Page 52 of Copy an existing page layout with for example a 67/33% column set (see the previous example) or create a new one. 3. Click Create page block and point out the function page from step 1: This is where cache must be activated not on the page delivering the content to the page block. 4. Click Edit layout, insert the page block in the layout, and adjust formatting:

53 Page 53 of Save the layout and test it by creating a new page applying the new page layout: In page editing the name of the page block is displayed as well as the ID of the (news) page supplying the page block with content. 6. You may modify the set-up of the news page and/or the page layout.

54 Page 54 of 85 Different Page Layouts for Overview/Details View On news pages and list pages, for example, you can choose an alternative layout for detailed view. This makes it possible to display the heading/title of the subject with page heading typography instead of the page heading itself. This may be an advantage if the content is displayed on the page via a page block, as the source page normally will not have a page layout. NOTE: Page blocks are only available in Tangora Portal CMS not in Tangora Mini. This news page is using a page layout with locked content to the right but when you click a news header, the news details are displayed applying a full-page page layout. The page layout for the detailed display is quite simple and contains only the primary section block:

55 Page 55 of 85 The page layout is selected from the settings of the page with dynamic content on the Details tab: TIP: If you use Visual Designer for setting up the detailed display layout, remember to specify a width fitting the chosen page layout. See also "Site Layout and Page Layouts must Fit Together" on page 39.

56 Page 56 of 85 Section Layouts A page can hold one or more sections. A section is a "block", which can hold one or more fields; section heading, short text, body text, image, and link. The chosen section layout determines which fields are available and how they are arranged in relation to each other. Moreover, the section layout controls the formatting of text (for example bold-faced headings). When the section is active (that is, displayed with a visible border), a mini toolbar containing for instance the name of the selected section layout will be displayed: Users with administrator rights can create new section layouts, modify, or delete existing section layouts. The layout itself is created by means of HTML code and requires HTML coding experience. NOTE: Any changes to a section layout will take effect immediately on all pages applying the section layout in question. Therefore, make a copy of the section layout before making any changes to it then you can always go back to the original section layout. Select Default Section Layout for each Site Under the Advanced menu item in the overview of section layout you can select the section layout to be used as default for each site. When a user creates a new page in the site in question, the selected section layout will automatically have been pre-selected for the page unless a page layout applying another section layout is used.

57 Page 57 of 85 Create a Section Layout 1. Choose the Section layouts menu item under Design & Layout and click the Create button above the overview or copy one of the existing section layouts. Then a number of tabs with settings for the section layout are displayed: The Manager view of the section layout can for example be used for displaying help text in connection with page editing as here in the 'Table of content' section layout (see "Automatically Generated Table of Content" in Tangora User Guide for instructions on how to use this section layout): 2. Specify the wanted settings on the General tab and define if necessary an alternative view to be used in connection with page editing on the Manager view tab (this is required, for example, if the section layout contains JavaScript).

58 Page 58 of Specify, if necessary, access restrictions relating to user level and/or fields of application (=site) on the Access tab and choose other settings on the Settings tab: Use default formatting in section 'wraps up' the section in proper HTML code. Remove <P> code removes <P> codes, if any, at the beginning and end of the body text field. 4. Save the section layout by clicking Save or OK. See also entries on section layout at Tangora Developer blog. Picture Rules in Section Layouts By using the Picture rules in the section layout settings you can control which images the users can insert in the sections and where. You can for example specify requirements for width of the images and/or limit the options to a specific category in the image archive. You can also block the insertion of images in the body text field of the section by removing the checkmark in Allow the insertion of images in text.

59 Page 59 of 85 Delete or Substitute a Section Layout Mark the wanted section layout in the overview and click the Delete button or Delete key. A dialogue asking you to confirm the deletion will be displayed. If the section layout is in use on one or more pages, you will automatically be asked to point out another section layout to replace the one you are about to delete. Layout of Pages with Dynamic Content Layout of pages with dynamic content can, just as site layouts and page layouts, be set up by using either Visual Designer or Table Designer, possibly in the form of HTML code in the latter tool. Pages with dynamic content such as database content (e.g. news) have a so-called Overview determining the layout of the content and settings controlling search options, scrolling function, etc.: Here is an example of overview display of news, where the visitor can use a category field and a search field for finding specific pieces of news. You decide yourself whether these filtering fields shall be displayed or not and how. This, together with counter text and internal navigation/scroll function on the page, is all set up on the Filtering tab in the settings of the page. The overview itself shows the content of the News image, News heading, News date, and Short news text fields by applying the block list view mode see "Display Overview as Bullet list, Table, or Block list" on page 61. When the visitors click a subject in the overview, a page with detailed information on the subject in question (so-called Details) is shown:

60 Page 60 of 85 Details view of a piece of news. See "Details View" on page 76. TIP: Here an alternative page layout for the details view is used, so the news heading is displayed as 'title' instead of the title of the page see also "Different Page Layouts for Overview/Details" on page 54. On pages with dynamic content such as news pages and list pages you can, by clicking Settings on the page, determine what content to be displayed on the page and how. Settings for the dynamic content are divided between different tabs, for instance the set-up of the overview and details view of the page: On the Content tab you can decide which data shall be shown. On news pages you can for instance display all pieces of news from the last week or a certain number of news items. The settings for selection of content are also called internal filters of the page. On the Overview tab you can set up the appearance of the overview and if/how the visitor shall click on to details of a given record. On the Details tab you can set up the details view. On the Filtering tab you can decide if/how the visitor shall filter/search on the page (= external filters of the page) and control the internal navigation on the page that is, the integrated scroll function that is applied when an overview contains many records.

61 Page 61 of 85 Dependent on the module in question, various options of setting up the overview and details layout are available. Display Overview as Bullet list, Table, or Block list When defining the overview display of a page with dynamic content, you can dependent on the module in question choose between different display modes: Bullet list Table Block list The choice depends partly on how you want to present data, and partly on which functions you want to offer the visitor. If you, for example, want to show an image with every record, you will typically choose Block list view, while Table views are efficient for providing a compact overview of a lot of data. Besides, table view has an integrated function, Clickable column headings, allowing the visitor to change sorting and for example sort a product list by price instead of by name. When you have selected display mode, you can set up the layout by clicking Edit layout: On news pages the displayed pieces of news will default be sorted by date in descending order that is, the latest news will always be shown at the top of the overview. If you choose the Table display mode, you can enable the visitor to change sorting by means of clickable column headings. The various options of layout settings are described in detail below. Typographies for Overview display The content of the overview can be formatted via local CSS settings on the page (via Select typographies on the Overview tab):

62 Page 62 of 85 Users with administrator rights can create and edit the global typographies that can be selected in the Stylesheet class field. See also the sections "Typographies" on page 14 and "Create Global Typography" on page 18. If you apply the Table display mode, you are also allowed to decide on the formatting via the default table format of the site layout (see "Layout settings for Table view" on page 64).

63 Page 63 of 85 Bullet List A bullet list is a very simple display mode best suited for showing one field per record. You can, however, have more fields on one line. They will then be placed next to each other separated by a separator character that you specify in the settings of the bullet list: The counter text above the overview is defined on the Filtering tab. If you want to use graphics as bullets, they must first be uploaded to the system image archive of the website (Archives > System file archive > System image archive). The graphics must be categorised as "Graphical buttons". Bullet list view may for instance be used in Database lists and Search. Table Table view is used for overviews with rows and columns where the top row represents column headings. There is only one row per subject/record and each column contains one field. You decide which columns/fields shall be displayed in the table: If you activate clickable column headings, the visitor can change sorting. This may be especially relevant to shop pages, thus enabling the customer to sort by lowest price, release date, etc.

64 Page 64 of 85 Tables allow for: Clickable column headings so the visitor him-/herself can decide on how to sort the list. The actual column headings can be edited in the Standards of the module in question. Alternating background colours in the table. This only requires that the default table styles defined in the site layout specifies that tables shall have alternating background colours. Example of products shown as table with alternating background colours. Layout settings for Table view When clicking Edit layout on the Overview tab you are allowed to set up various properties for the table: The column width indicates how large a percentage of the whole table width is used for displaying the column content. "0" means that the column is not shown at all. NOTE: The actual width of the table depends on three factors: the site layout, page layout, and section layout of the webpage in the section right above the table. Alignment (vertical and horizontal) indicates where the cell content shall be placed in the cell. If you check Use default table styles, the table and the text in the table will be formatted with the typographies defined in the style sheet of the site layout. Check Clickable column headings if the visitor shall be able to choose sorting. If you want to have sorting arrows in connection with the chosen column heading, they must be uploaded as graphical buttons to the system image archive of the website (Archives > System file archive > System image archive).

65 Page 65 of 85 The column headings are controlled by the Standards of the module in question, that is, changes are made centrally and will affect all table views applying the relevant module database. To display an overview as a table, but without column headings, you can 'simulate' the table view by using the block list display mode see "Block List" on page 65. Formatting The formatting of the table can be specified in different ways if necessary, in combination: Via CSS in the style sheet supplied by the site layout (activated via Use default table styles under Edit layout on the Overview tab). Via local CSS settings on the page (set up via Select typographies on the Overview tab): Users with administrator rights can create and edit the global typographies that can be selected in the Stylesheet class field. See also sections "Typographies" on page 14 and "Create Global Typography" on page 18. Block List A block list view obviously consists of blocks with one or more fields from each record. The various fields in the block may be placed freely in relation to each other, and therefore block list layouts contain no column headings. A news overview may for example look like this in block list layout:

66 Page 66 of 85 Counter text A block with various fields from the news database. News date News image 'Next' and 'Previous' buttons (internal navigation on the page) News heading Short news text TIP: See "Example 1: Create News Overview in Visual Designer" at page 67 for instructions on how to set up a news overview like this in no time. The blocks can, if necessary, be spread on more columns, if you want to display many, small blocks on each "subpage": You can create a block list layout by using various design tools: Visual Designer Table Designer HTML code See also "Various Layout Tools/Methods" on page 5 and examples below.

67 Page 67 of 85 NOTE: In connection with block list layout with content in more columns Table Designer will sometimes be the best tool, though see "Example 3: Product and Employee Overview with Centred Content in Columns" on page 71. Example 1: Create News Overview in Visual Designer An overview with pieces of news in one column as in the example on page 66 is quickly and easily created in Visual Designer: 1. Select the Block list display mode and click Edit layout on the Overview tab. Switch to the Visual Designer layout tool, select the Layout tab, and specify a width fitting the current page layout (see also "Site Layout and Page Layouts must Fit Together" on page 39). 2. Select the Insert tab and insert a column set with for instance 25/75% columns (adjust the widths, if necessary). Insert the various merge fields in the two columns as shown here: TIP: Adjustment of columns and insertion of merge fields are described in detail "Re: 4. Insert columns, images, navigation, page contents, etc." on page 21. Click here to display all fields: 3. Mark the Image merge field and add top padding so the top border of the image aligns with the text (here 6 pixels):

68 Page 68 of Mark the News date merge field, select Wrap > Float Left and set the right Margin to for example 5 pixels to get some space between News date and Short news text: 5. Choose the Block list settings menu item in the Application menu (Tangora logo in the top left corner) and set Block distance to for example 20 pixels: 6. Save the layout with CTRL+S or the Save button in the top left corner and test the result by clicking Preview layout to the right of the Save button. Example 2: Create News Overview in Table Designer If you prefer to create the layout on page 66 via Table Designer, it may be done like this: 1. Select the Block list display mode and click Edit layout on the Overview tab. Then the Table Designer window appears (if a Visual Designer window appears: Select Design Tool > Table Designer in the Application menu). Click the Layout settings button:

69 Page 69 of Select the wanted number of rows and columns, specify the width of the columns in either % or pixels (remember, if you use pixels, that the total width must fit the available space in the page layout), and set the distance after each block: Border and cell border properties are used for specifying width, type and colour of borders and cell borders. You can also specify a background colour for the table. Border surrounds the whole table; cell border surrounds each individual cell in the table. The border properties can also be defined individually for every single cell.

70 Page 70 of Right-click in cell 1.1 and create an embedded layout with 2 rows (or if you are familiar with CSS: Place the image placeholder in cell 1.1 and use a stylesheet class to set top margin to 6 px): Working with Table Designer a) Selecting Create embedded layout will display a new layout window with one cell b) Right-click in this cell and select Insert in table > Insert Row above c) Set the height of row 1 to 6px by right-clicking it and selecting Row properties d) Place the Image placeholder by dragging it from the field overview below the layout table to cell 2.1 (point at a cell to see the cell number) Here the image field has been placed in an embedded layout to get extra space above the image (by means of an empty row with row height of 6 px), so it aligns with the news text on the right. Table Designer TIP: Quick Placement of Fields and Field labels Click the left mouse button on the wanted field name (in the Field column), hold, and drag it to the wanted cell. If both label and field shall be placed in cells of their own (typically to maintain left alignment), then hold down the ALT key while moving the field to the right cell using the mouse. Then the field itself is moved, while labels remain in the left cell. 4. Save the embedded layout and click the Back to main layout button. Save the main layout too. See also " Table Designer TIP: Quick Placement of Fields and Field labels Click the left mouse button on the wanted field name (in the Field column), hold, and drag it to the wanted cell. If both label and field shall be placed in cells of their own (typically to maintain left alignment), then hold down the ALT key while moving the field

71 Page 71 of Create an embedded HTML layout in cell 1.3 as shown: An embedded HTML layout is actually an HTML editor allowing you to insert your own HTML code and merge fields with module content. Right click the text field to insert the News heading, News date, and Short news text merge fields. NOTE: Remember to save before closing the window. HTML code used here: <h3 style="margin-top: 0px">{News heading}</h3> <div class="newsdetails"><span class="newsdate">{news date}</span> <span class="newsintro">{short news text}</span></div> 6. Save layouts up on all levels and click Save on the page settings. TIP: You can move fields and embedded layouts around with the mouse. Example 3: Product and Employee Overview with Centred Content in Columns If you need to create a block list layout dividing the content centred in more columns as shown in the overviews of products and employees respectively on page 66, it will be easiest to configure the layout in Table Designer, as this tool contains a function for easy centring of the content in the layout.

72 Page 72 of 85 The overview of employees consists of 6 blocks per subpage (yet, only 4 blocks is displayed in this example): The overview of products consists of 9 blocks per subpage, divided into 3 columns: Internal Navigation in Overviews Pages with dynamic content and overview display can automatically spread the topics of the overview across several subpages, which the visitors then can leaf through by using the internal navigation of the page. You can choose between two types of pagination: Numeric pagination Alphabetical pagination The actual 'scrolling' buttons can either be shown as Clickable page number (see below) or as Page X of Y with Previous/Next links. You can also have a combination applying page number + Previous/Next links. NOTE: The alphabetical pagination is currently only available in the Database lists module. Moreover, there may be module specific differences between the various setting options for the internal navigation on the page.

73 Page 73 of 85 Numeric pagination This kind of pagination displays a certain number of topics per subpage just as search results in for instance Google: Clickable page numbers. The typographies used for formatting page numbers and navigation links are defined in the current site layout. The options for setting up pagination and internal navigation are placed on the Filtering tab: Here the numeric pagination method (=clickable page numbers) has been chosen for internal navigation. If there are more than 10 subpages, Previous 10/Next 10 links will be displayed, allowing the visitor to scroll 10 subpages at a time. If you enter text in the Previous page/next page fields, the visitor will also be able to scroll between the individual subpages by using the Previous/Next links. TIP: If you want to apply graphical buttons for internal navigation rather than text links you can upload the graphics files to the system image archive (Archives > System file archive > System image archive > Upload > the graphical buttons category) enabling you to choose the graphics in the fields currently saying "(No graphics)". The content in the text field to the left will then be used as ALT text for the graphics. See also example of usage of graphics below. Here you can enter the counter text to be displayed above the actual overview. Remember to customise the content in the Text for 'No hits' field so it reflects the settings of the page with regard to the search/filtering options (if, for example, it is not possible carry out searches on the page, the text should be rephrased).

74 Page 74 of 85 Alphabetical Pagination This pagination can, for instance, be used for presenting products or employees with initial letters from A to H on the first page, from I to P on the next page, etc. Graphics used for alphabetical pagination must be uploaded to the system image archive (Archives > System file archive > System image archive > Upload > the graphical buttons category) We recommend showing all elements in each group on one page, as some visitors may not spot if there are more subpages per interval that is, the Max. number per page field must be empty: If you want to apply graphics for alphabetical pagination, you must first choose this type of pagination and specify the wanted intervals in the text field. Then click Graphics and attach graphics to the intervals (the system automatically creates the intervals you specify in the text field). Remember that the images must first be uploaded to the system image archive of the website

75 Page 75 of 85 (Archives > System file archive > System image archive > Upload > the graphical buttons category). NOTE: Remember to select the default sort order of the overview so the content will be sorted by the field you want to base the alphabetical pagination on. If you for example want to show an overview of books whose title begins with an 'A', "book title" must be selected as Default sort order on the Overview tab. If you, on the contrary, want to sort by author instead, this field must be selected as default sort order.

76 Page 76 of 85 Details View The details view layout of a page is the "template" used for presenting a certain subject, for instance a news item, a certain product, etc. You can often with advantage set up news pages and other "data presentation pages" to use one page layout for overview presentation and another page layout for detailed presentation, for example a page layout that does not show the title of the page: News page overview and details view of a specific news item. The page layout used for the detail view does not show the page title. Instead the news headline applies the page title typography and thus works as detail page title. For guidance on how to create this line, see "Making lines using border properties" at page 77. You can choose an alternate page layout at the Details tab of the page settings:

77 Page 77 of 85 Some page types offer a "Use layout from" option so that you only have to set up the details layout once no matter how many pages the data is displayed on. It may also be a good idea to apply different page layouts for overview and details if the content is displayed on the page via a page block contrary to the dynamic content of the page "itself ", which typically appears in the primary area of the page. Making lines using border properties In both Visual Designer and Table Designer you may use border settings to display horizontal lines as in the details view example above:

78 Page 78 of 85 In Table Designer it looks like this: Here the horizontal line has been made by means of the border properties of the cell (right-click in the cell to display these settings). In News, Database lists, Event calendar, and other modules with structured content you can define a default template for the details view so all pages with dynamic content are "born" with that layout. The layout can subsequently be adjusted locally on the individual page, and changes, if any, in the centrally defined template will not affect the pages already created. This means that the default layout works as a static "snapshot" and is not updated dynamically. The default layout for news is defined in Modules > News > Advanced > Standards. Layout Tips to Form pages and other Input pages Like pages with dynamic content (in the form of data presentation), form pages and other pages with dynamic content such as input fields can be set up in either Visual Designer or Table Designer. Example 1: Set up Contact Form with Visual Designer You can quickly and easily set up a contact form as the one below in Visual Designer:

79 Page 79 of 85 Here the fields have been placed in a so-called Template allowing you to quickly and easily place more fields and related field labels in the same way and maybe change the set-up later. Instructions 1. Insert a template via the Insert tab in Visual Designer and then add the wanted fields:

80 Page 80 of Deselect the template by clicking the dark grey area to the right of the template and insert the Send button (it will automatically be placed below the template that has been marked here to indicate the borders): 3. Mark the template and choose the Labels in front formatting via the Formatting tab in the layout panel. The set-up will then look like this: NOTE: If your layout is less than 350px wide the headings will as default be placed above the fields when you select the system template Labels in front. In this case we have adjusted the placement width of the template from 10 to 7.5 em: Another option is to adjust the field widths (can be set locally at each form page via the Fields tab at the form page settings). 4. Then mark the template again and select Create copy of selected template on the Formatting tab of the template to adjust Heading font weight:

81 Page 81 of Provide the template with an appropriate name, switch to the Heading tab, select font weight Normal and click OK: 6. Finally, mark the Send button and set left padding to make it align with the form fields (use Apply to see changes instantly):

82 Page 82 of Save the template, save the settings of the page, and check that the page looks like you want it to. Example 2: Placing more than one field in one line In some forms you may want to place more than one field in one line:

83 Page 83 of 85 Instructions 1. Place all fields in the template, select Show line breaks at the View tab and delete the unwanted line break below the City field: 2. Select the City field, change Heading to "City/zip" via Field Settings at the Formatting tab and delete the Heading of the Zip field:

84 Page 84 of Save layout and page settings and check the result. TIP: Another option is to use different templates; one type of template for the "single field lines" and one for the "multi-field lines" (below marked with a blue border): In this way you'll be able to set padding, etc. individually for the multi-field line.