Adding and editing a page

Adding content to front page and editing

By default, the new website has a front page which you can add content to and edit. When you move the cursor to the front page text, a smaller gear icon appears next to the large gear in the top right corner and when you click on the small gear, you can choose Edit page.

This opens a text editor which features all the usual functions (e.g. text alignment and changing colour, creating bulleted lists, adding links etc.). Some buttons are displayed after clicking on the icon on the far right (5) (e.g. changing text size and font, adding a table).

Adding new pages and editing the menu

Pages can be added to the website in two ways and thereby two different types of menus are created. New pages are added to the menu in the order the pages are created (the newest page is the last item). 

Option A

1. Pages are added using the left menu: Site Content – Add – Page (or Quiz).

   Pages are added by default to the primary menu. You can rearrange the pages into the secondary menu or new menus you have created. In the menu reference title field you can specify an alias (short name) for the new page. If you have added more Apps in the left menu Settings – Enable/Disable Apps, these will also appear in the Add menu. 

2. Menus can be edited using the left menu: Menus. 
   With the arrow button you can move the page within the same menu or transfer it to another menu. Titles in the menu can be dragged up and down with the mouse or indented (as subpages).
3. A new menu can be created using the link Add new menu. 
4. These menus can be placed in different parts of the page, using the top menu Appearance – Layout.
5. To delete an unnecessary page, select Site Content – Browse – Content in the left menu and click Delete on the respective page line. 
6. To delete an unnecessary page from the menu, select Menus in the left menu and click Delete on the respective page line. 

Option B

1. Pages are added by clicking the green gear icon at the top right corner of the page.
   
2. To manage the menu click the gear at the top right corner of the menu and select Section Outline. As the menu is created in a separate page, it is not shown under Build – Manage – Menu.
   
   To change the order of pages in this menu click the gear at the top right corner of the menu and select Section Outline. The order of pages can be changed using the arrow button. 
3. To delete an unnecessary page, select Content in the top menu and click Delete on the respective page line. 

Adding page content

The created pages can be later modified similarly to the front page. When you move the cursor to the page text, a smaller gear icon appears next to the large gear icon in the top right corner and when you click on small gear, you can choose Edit page.

Page content is added by means of the text editor. At first only one, upper icon line is shown in the text editor. To open the bottom icon line, click the icon at the far right (5).

1. Text

Text can be typed directly into the text editor or copied from another file. It would be best to copy unformatted text and format it in Sisu@UT. To get rid of unnecessary formatting, activate the text with the mouse and click on the eraser – Remove Formatting (3). If the text style is specified as Paragraph or Heading, you can change the respective styles later in css.

To add a table, first open the bottom icon line (5) and click the icon Insert/Edit Table (6).

2. Image

To add an image open the text editor, move the cursor to the suitable place and click Add media (4). The page My Computer opens, select Upload, select an image, click on it and then the button Submit. The image is added to the text editor. An image that has already been uploaded to Sisu@UT can be later found in the page My Library.

To change the layout and the size of the image, click on the image in the text editor and then Insert/Edit Image (1). The image can be aligned to the left or right of the text using the same buttons that are used for text alignment. If you click in the Settings window on the tab Appearance, you can resize the image (only reducing the size is recommended, ensuring that the setting Constrain Proportions is ticked), specify the spacing between the image and the text (Vertical Space and Horisontal Space, e.g. 10px).

A caption can be added, which is lighter than the rest of the text and is placed below the image within the width of the image. The caption text must be entered in the field Title. Caption text is not shown in the editing mode – this can be viewed later in the view mode.

If you want to add the source of the image in the caption (e.g. link to the web address of the image), it should be copied into the Title field as follows:

[val=Link href=web address]

For example, in the following caption:

Pink orchids. <br>Source: [val= http://p1.pichost.me/i/13/1358832.jpg href=http://p1.pichost.me/i/13/13…

3. Audio

To add an audio player, the following code must be copied to the text editor in html mode, clicking the button HTML (2):

<audio controls=”controls”> <source src=”https://…” type=”audio/mpeg”></audio>

In place of the three dots copy/type the address of the audio file. For older web browsers it is a good idea to add a link to the audio file below the player (in case the player does not work). You can add the audio file address after adding the link by right-clicking the mouse – Copy Link Address (Google Chrome) or Properties (Internet Explorer). Ensure that the web address starts with https.

See the example: http://sisu.ut.ee/demo/home

4. Video

The video is added as a web link or embed code.

If the video is on UTTV

Go to the respective video, click under the video Select activity – Embed. Copy the embed code (CTRL C). Move the cursor to a suitable place in the text editor and click Add media (4) and Web. Paste the embed code in the window (CTRL V). If you prefer the video in a smaller size (by default it is 750 in width and 440 px in height), the code must be slightly modified, ensuring that the proportions remain correct (for example width 615 and height 380 or width 285 and heuight 185). The changed embed code would be then, for example: <iframe width=”615″ height=”380″ src=”https://www.uttv.ee/embed?id=18336” frameborder=”0″ allowfullscreen></iframe>

If the video is on YouTube

You will get the video’s embed code by clicking below the video Share and Embed. Copy the embed code (CTRL C). Move the cursor to a suitable place in the text editor and click Add media (4) and Web. Paste the embed code in the window that opens (CTRL V). In the window Enter an image URL or an embed code you can also enter the URL of the YouTube video and the video will play automatically in the player on the website.

See the example: http://sisu.ut.ee//demo/home

5. Flash animation (.swf)

An animation (.swf file) should be first added to the Sisu page as an attachment (Attach Files – after the text editor) and save the page. Then by right-clicking on the attached file you can choose Copy Link Address and paste its embed code in the following paragraph in place of the part in bold type:  

<object type=”application/x-shockwave-flash” data=”https://sisu.ut.ee/sites/default/files/demo/files/animatsioon.swf” width=”600″ height=”500″>
<param name=”movie” value=”https://sisu.ut.ee/sites/default/files/demo/files/animatsioon.swf” /><param name=”wmode” value=”transparent” /></object>

Change the animation size (in the example, width=”600” height=”500”) according to your own animation.

Move the cursor to a suitable place in the text editor on Sisu page and click Add media (4) and Web. Paste the revised embed code in the window that opens (CTRL V). 

See the example: https://sisu.ut.ee/demo/leht1-alam

6. Popups

In the text it is possible to turn some words into links that open a popup window with new content (e.g. additional information, explanation opening from the word, etc.).

To add a popup window, activate the word and first click icon 5, which opens the bottom icon line, and click icon 8 there. The selected word is in the field Link and the content of the popup must be added to the field Content. You do not have to specify the size of the window – this is done by default.

See the example: http://sisu.ut.ee//demo/home

7. Hide/Show

This function enables to insert thinking tasks, additional reading, etc., which opens when the respective text is clicked. 

To add the Hide/Show function, activate the word and first click icon 5, which opens the bottom icon line, and click icon 7 there. The selected words are in the field Title and the hidden content must be added to the field Content.

See the example: http://sisu.ut.ee//demo/home

8. HotPotatoes quiz

If you have created a quiz using the HotPotatoes software and exported it in htm file, you can integrate it to your content package page. First attach the htm file as an attachment at the bottom of the page (Attach files). After saving the page, by right-clicking you will get the file’s web address – Copy Link Address. Open the page again for editing and paste the file’s web address to the page, instead of http write https and add three square brackets before and after the web address. E.g. . After saving the quiz will be shown directly on your page.

See the example: http://sisu.ut.ee/demo/hotpotatoes-test

9. iFrame

With the help of iFrame it is possible to integrate an external webpage on the content package page. 

Add the web address to the page content in the text editor between triple square brackets.

If you want the integrated page to be, e.g. 500px in height and 300px in width, after the web address add also: height=500px width=300px between square brackets.

See further: https://drupal.org/project/insertFrame  

See the example: https://sisu.ut.ee/demo/node/4879

10. Attachments

In addtion to the above, you can also add attachments – files of different format. These are displayed at the end of the page depending on the format: image files as thumbnails and other files with their name and size.

If you want to replace an attached file with a file of the same name, open the page in edit mode, click the button Edit after the attachment and then choose a new file under Replace file. In this way the file name will not change upon replacement – the version number will not be added automatically.

Widgets

Widgets are modules with different purpose and content in the Sisu@UT environment. They can be embedded in different blocks of the page. 

Widgets can be found on the layout page in the top menu Manage – Layout. Also the different menus of the website are there.

To embed a new widget to the website:

• click Manage in the top menu
• choose Layout
• click the button Add new widget
• click on the widget
• enter a name and description for the widget
• after saving the widget appears in the widget menu
• drag the widget to the suitable block of the page
• save

To embed a new widget to the page:

• click Manage in the top menu
• choose Layout
• drag the widget from the widget menu to the suitable block of the page
• save

In addition to widgets in the widget menu you can also add others to your page. Some examples of possible widgets can be found at https://sisu.ut.ee/demo/vidinad

The most useful ones are: Custom Text/HTML, Slideshow, Twitter and Facebook widgets.

Adding a slider

A slider widget can be added to the website (see example: https://sisu.ut.ee/demo/slaider). On the page where you want to add the slider open layout settings (for the front page Manage – Layout and for other pages choose Layout from the big gear of page settings).

Widgets are seen in the scrollable menu above the website layout window. The slideshow widget must be added (Add New Widget, Slideshow). Add a title to the widget and choose the slideshow layout.

• Standard Overlay – slideshow area includes only the image area and navigation buttons are placed on the images
• Standard Below – the image area is higher and below is the text area with navigation buttons
• Standard Side – the image area is on the left and to the right is the text area with navigation buttons

Apps

Initially there are two applications in Sisu@UT: page and quiz.

To add apps:

• click Manage in the top menu
• choose Apps
• in the dropdown menu click Public
• save 

If necessary, you can activate and add the different apps. The most useful are:

1. Basic Pages – enables to add pages to the website.
2. Blog – enables posting entries that can be commented.
3. Booklets – a printer-friendly set of materials consisting of chapters.
4. Events – calendar with event entries.
5. Media Gallery
6. News
7. OS Glossary – a glossary with entries linked to other pages of the website.
8. OS Webform – web form for data collection.
9. Quiz – 9 question types.
10. Reader – for importing external RSS content to your website.

All apps that are made public will appear automatically in the primary menu and the top menu of Sisu.

In Display options you can change the duration for displaying each slide (default 5 seconds) and choose whether the images in the slideshow are displayed in random order (Random Order) and whether navigation buttons are displayed on images (Display navigation).

Drag the added Slider Widget with the mouse to the suitable region of the layout window and save the layout.

To add slides in the slider go to the page and choose Add Slide. Select an image (Choose File, Upload) and if you want, add a link and/or a title and longer description to be placed on the image. When the first image has been added, you can start adding the next one.