Version 1.0

Instructions NPA project mini websites

This document provides guidance for using the project mini websites on the NPA programme website. The Content Management System (CMS) for the mini website is based on the open-source software TYPO3.

Table of Contents 1. Mini Website ............................................................................................................................................. 2

1.1 Purpose .............................................................................................................................................. 2

1.2 Page structure ................................................................................................................................... 2

2. Access to CMS ............................................................................................................................................ 4

2.1 Access ................................................................................................................................................ 4

2.2 Backend ............................................................................................................................................. 4

2.3 Getting started in TYPO3 ................................................................................................................... 5

3. Main functions ........................................................................................................................................... 6

3.1 Editing pages ...................................................................................................................................... 6

3.1.1 Visibility of pages ........................................................................................................................... 6

3.1.2 Editing page content: content elements ....................................................................................... 6

3.1.3 Homepage ................................................................................................................................... 10

3.2 View: (pre)viewing pages ................................................................................................................ 10

3.3 List: Creating and editing News and Events .................................................................................... 11

3.4 File list: Uploading documents and images ..................................................................................... 14

4. Screenshots ............................................................................................................................................. 16

2

1. Mini Website

1.1 Purpose The NPA programme provides projects with their own mini website as part of the programme website. This saves effort on the project’s side to make their own website as part of the mandatory publicity measures. In addition, it ensures that the project website complies with publicity requirements and the availability of information after project closure. Thirdly, it gives the programme access to similar information on all its projects, which is easy to share with third parties. Some projects choose to develop their own websites. The NPA programme expects such websites to mainly focus on the viable project outputs, or even to serve as the delivery platform for those outputs. On the other hand, the programme expects projects to use the mini websites for information about the project cooperation, still highlighting the outputs under development. Note: By publishing information and audiovisual materials on the project mini websites, you give the NPA the right to use the materials and duplicate them in different publications, websites, etc.

1.2 Page structure All project mini websites follow a similar page structure, see below. On the templated pages, you can find guidance for filling the mini website with content, together with some placeholders for pictures and files.

Page Purpose Instructions

Home Entry page of the mini website Short introduction to the project and main contact details

The short introduction is the first text visible to anyone visiting your project website. Please use it to give a brief introduction to your project, a summary description. This text should be understandable for non-experts, and give some insight into the challenge addressed by the project, its objectives and target groups. It is recommended not to exceed more than 2 paragraphs. You can give a more comprehensive explanation on the page "About the project". Please remember to add contact details in the right-hand column, and in the page footer.

About the Project

Rationale of the project

Use this section to describe the motivation behind the project; the problem it solves or the opportunity it tries to take advantage of. Include such topics as:

How did the project come about?

Does the project build on previous cooperation projects?

What change does the project intend to make? What NPA specific challenge or opportunity does it address?

How will the project achieve the intended result? Please refer to the benefits of transnational cooperation.

What is unique/innovative about the project?

3

Who are the intended end users of the project outputs?

If desired, you can make sub pages in the section About the Project.

Please write the text in a style that non-experts can understand. It is a good idea to make this text timeless, so it does not need to be updated frequently.

Outputs and Results

An overview of project outputs, including their intended impact and target groups

Provide a brief introduction to your project outputs (products and service) and their intended result. For each project output include such topics as:

The purpose of the product/service: what change will it bring?

The attributes of the product/service

The target group for the product/service

The status of the product/service development

Indicate how the product/service will be provided

If possible, add a link to further information or a dedicated output website.

Project specific – this page is hidden by default

Optional You can use this page for other project information, if desired.

Resources A collection of project deliverables, and promotional materials

On this page, you can add your project resources, such as studies and toolkits. This is also the location for your promotional materials such as newsletters, brochures, presentations, pictures, and videos. Please provide a short introduction to this section.

Contact Contact details for the partnership

Describe how to get in touch with the project. For example, do you have a specific person handling press? Provide contact details for each partner.

News

Project news Provide a teaser: Enter a short summary (1-2 sentences) of the news article/event with the main information. In the main text, it is recommended to make sub headings for reader-friendliness. Attach images, files and links where appropriate. Events Project events

4

2. Access to CMS

2.1 Access The Content Management System for creating and managing contents on the NPA website is accessible on the following link: www.interreg-npa.eu/typo3 You will have received a username and password from the Joint Secretariat. Figure 1 - Login page NPA website CMS

2.2 Backend After logging in, you will enter the website backend, the behind-the-scenes area of the website. On the

other hand, the frontend of the website is the public website that visitors can see on projectname.interreg-

npa.eu.

In the backend, you can see a menu with the main functions on the left-hand side: Page, View, List and

Filelist. Next to the menu, you will find the page tree, displaying the main and sub pages of the website. On

the right, you can find the main editing window, which will display the page setup, depending on which

main function you choose.

5

Figure 2 - Backend NPA website

2.3 Getting started in TYPO3 It is highly recommended to watch 4-minute video below (Ctrl + click) introducing the main functions.

In addition, we recommend that you familiarise the NPA Styleguide for the website. After logging in, please choose the function in the left hand menu based on the type of action you wish to undertake.

Function Purpose

Page Editing existing pages

View Viewing pages in the frontend layout

Previewing unpublished pages in the frontend layout

List Creating news and event items

Editing existing news and event items

File list Uploading files for linking/attaching documents to pages, news and events

Uploading media files such as pictures and videos, for use on pages, news and events

Each function is described in more detail in the chapter 4.

6

3. Main functions

3.1 Editing pages The purpose of the Page function is to create and edit the contents of the standard pages on the website. Note: Changing the page tree by adding or removing a page has major impacts on the look and functionality of your project mini website. 3.1.1 Visibility of pages

It is possible to make pages visible or invisible on the front-end of the website. Making a page invisible can be useful in case you plan to make more extensive changes to a page. You can make it visible again after you are done. You can recognise an invisible page by the disabled icon . In order to make the page visible, right-click on the page name, and select “Enable” . Once enabled, the disabled icon will disappear, and the lightbulb icon in the right-click menu will be on. You can preview invisible pages in the View function, or by clicking on the eye icon . 3.1.2 Editing page content: content elements

The layout for standard pages is a main section in the centre, and a narrow column on the right. Some pages have a different layout due to their function, for example the homepage, the news and events overviews. In the CMS, text, images and other page content are organised in content elements. In order to add or edit page content, you need to add or edit such content elements. In the backend, the content elements look like a white box, with a grey menu bar at the top. 3 Homepage with content elements

There are a number of different actions you can take with content elements.

7

Table 1 - Content element actions

Actions Instructions

Create element To create a new content element, click on the plus icon in the page area of choice, and select the type of content element you want to add, normally “Text & Images”.

Visibility of element

You can make a content element visible or invisible on the public website by clicking on the enable symbol . A lightbulb that is switched on means that the element is visible, one that is off means that the element is invisible on the public website.

Move element To move an element, simply drag and drop it to the page area of your choice.

Copy element To copy an element, right-click on the content element icon and select “Copy”. Then click on the Paste icon in the page area of choice. Copying an element can be useful in case you wish to create many similar items

Edit element To edit an existing content element, click on the edit icon .This will open a multi tab page to manage the contents and the settings of the element.

Delete element If you have no future use for an element, you can delete it by clicking on the trash can icon .

Combining elements

It is also possible to combine different content elements in a specific format, such as multiple tabs (for example, the news/events on the homepage) or an accordion (for example, the contact details). In order to do so, you have to first create a content element that is a container for the other elements. Create a new element, go to tab “grid elements”, select the container of your choice and save. Then create the other content elements inside the container.

4 Menu for adding a new content element

8

In order to edit the contents and look of the content element, click on the edit icon. A new page will open with different tabs. Below, the settings for the standard “Text & Images” element are explained tab by tab. Remember to save your work before moving to another tab! Table 2 – Content element settings

Functions Explanation

Tab General

Type Here you can change the content element type. Note: the available settings will change depending on the type.

Header Title of the element. Note: the title will appear as a header text. To avoid a header text, leave this box empty.

Type Choose Überschrift 1 for page titles, choose Überschrift 2 for section headers.

Rich Text Editor This is the text box where you can add/edit the page text. If your text is divided into sub headings, it is recommended to create a new text box for each sub section, each with their own heading. This makes it easier to update/move/hide a specific part of the page. Sub sections are also more user-friendly for web visitors. When copying text from other sources, it is recommended to use the “paste as plain text” function, to avoid a mishmash of formats. By clicking on the paste icon , you can toggle between normal paste and paste as plain text. Alternatively, it is possible to remove formatting with the broom icon . Please use the “Save & Preview” function to check what your text looks like on the frontend. In order to add an in-text hyperlink, select the words, and click on the hyperlink icon

. Then select the type of hyperlink you wish to create: Page, File, Folder, External URL or Email. For files and external URLs, please always choose the target “new window” from the drop-down box. Note: to avoid too many in-text hyperlinks, please remember that it is also possible to add a file list in the right-hand column (see chapter 3.4).

Tab Images

Add image Use this option to select a new image file. Click to open a popup window that allows you to browse through images in the document library of the website. In case your image is not there, scroll down to the area below the document library to upload a new file. Click on the +sign after the file name in order to add it to the content element. Then click Save in the top menu. Once you have added an image file, tick the box “Enlarge to click” to allow users to see a bigger version of the image.

Select & Upload Files

Use this option to upload and insert a new image file. If you anticipate that the image will be reused, please upload it first to the relevant folder by scrolling down to the upload area below the document library.

Tab Appearance (please only use the image alignment function on this page)

Image Alignment Use the drop-down box “Position and Alignment” to change how images are aligned in relation to the page text.

Tab Access (please only use the Publish dates function)

Publish Date If you wish to schedule publishing a content element in the future, you can enter a publish date here. The element will automatically become visible on the scheduled date and time.

9

Expiration Date If you wish to automatically unpublish a content element in the future, you can enter an expiration date here. The element will automatically become invisible on the scheduled date and time.

Tab Categories

Categories Tick the category to which the content element (or page on which it is placed) belongs. This facilitates the search function.

5 - Document library popup window

10

3.1.3 Homepage The homepage has a different setup from other pages on the website. To edit the homepage, click on the globe icon next to the name of your project, ensuring that you are in the Page function. You can then edit the different text elements in the body and footer of the page. Note: do not delete any content elements, in particular the news and event feed. In order to update the project logo and header image on the home page, right-click on the globe icon next to the name of your project, and select edit. A new page will open with different tabs. On the tab General, under Files, you have the option to add a logo and header image. A popup window will open that allows you to browse through images in the document library of the website. In case your image is not there, scroll down to the area below the document library to upload a new file. Click on the +sign after the file name in order to add it to the page. Then click Save in the top menu. In order to update the Facebook and Twitter links in the page footer, edit the content element in the footer called Social Media Links.

3.2 View: (pre)viewing pages In order to view what a page looks like on the frontend, you can use the View function. Simply select the page in the page tree and make sure that the View function is selected in the left-hand menu. The View function can also be used to preview unpublished web pages. This can be helpful when making major updates to a page, or creating a new page.

11

3.3 List: Creating and editing News and Events The List function is used for creating page content of a different type than standard pages. Examples are news articles and events. In order to add a news article or event, make sure the List function is active and choose News or Events

from the page tree, under the folder “Meta”. Note: make sure you access the news/events list under the

main NPA website, and not under one of the project sub sites (they also have news/events).

6 - Accessing News in the List function

In order to create a news article or event, click on the “new record” icon under News (next to the word Header). A new page will open with several tabs, where you can add content and manage the settings for your news article or event. Below follows a description of the most important fields. Remember to save your work before moving to another tab! Table 3 - News/events settings

Functions Explanation

Tab General

Header This is the title of your news article or event. Please keep it short and unambiguous.

Top news Tick this box if you want this story to stay on the top of the news list, even if newer articles are added. Normally, this setting is used for the launch of a call, or for holiday schedules.

Type Please only use the type “News”

Hide Tick this box, to make sure that your draft news article/event stays invisible until you are satisfied to publish it.

Teaser Enter a short summary (1-2 sentences) of the news article with the main information. This text has the function of a lead paragraph in a newspaper article. It will be visible in the list of news articles, and in the news notification.

12

Author name This field is normally left empty

Author email This field is normally left empty

Date & time This is the date of the news article or the event start date (and time)

Is Event Tick this box if you wish to switch from news article to event. Note: this will affect the available fields.

Event end (events only)

Enter the end date (and time) for the event

Full day(events only)

Tick if the event is a full day event (this also counts for an event running over multiple days)

Organiser (events only)

Enter the organiser name, usually Joint Secretariat

Location (events only)

As a minimum, enter the town and country of the event. In addition, you can add the venue name. Note: it is best to mention address details in the agenda or on the registration page.

Text This is the main text of your news article or event. Note: this text follows below the teaser on the page of the article or event; there is no need to repeat the teaser text. For reader-friendliness, it is recommended to make sub headings in a longer text. When copying text from other sources, it is recommended to use the “paste as plain text” function, to avoid a mishmash of formats. By clicking on the paste icon , you can toggle between normal paste and paste as plain text. Alternatively, it is possible to remove formatting with the broom icon . Note: It is not possible to preview unpublished news articles/events. In order to check what they look like, you need to publish them. In order to add an in-text hyperlink, select the words, and click on the hyperlink icon . Then select the type of hyperlink you wish to create; Page, File, Folder, External URL or Email. For files and external URLs, please always choose the target “new window” from the drop-down box. Note: to avoid too many in-text hyperlinks, please remember that it is also possible to add hyperlinks and files to the article/event on the tab “Relations”.

Disable Tick this box to disable the news article/event. This has the same effect as ticking Hide.

Tab Access

Publish Date If you wish to schedule publishing a news article/event in the future, you can enter a publish date here. The news article/event will automatically become visible on the scheduled date and time. This can be useful for publishing calls.

Expiration Date

If you wish to automatically unpublish a news article/event in the future, you can enter an expiration date here. The news article/event will automatically become invisible on the scheduled date and time. This can be useful for unpublishing the holiday schedule.

Tab Options

Categories Tick the category to which the news article or event belongs. This allows visitors to filter the news article or event.

Tab Relations

Media file If you wish to add a picture or video to the news story or event, either select it from the document library “Add media file”, or upload a new picture “Select & Upload files”. In the popup window, click on the +sign after the file name to add it. Then click Save in the top menu. You can then choose whether the picture should be shown in the preview, the list of news

13

articles. It is also possible to add a hyperlink to the picture, which opens when clicking on the picture. Please remember to always choose the target “new window”. Alternatively type the following behind the URL address: _blank

Related files If you wish to add files to the news story or event, select it from the document library “Add media file. This function can be useful if your news article is referring to a report or publication. In case of events, this is the location where you can upload the agenda, and PowerPoint presentations after the event. Note: Please browse through the library before deciding to add a new file, to avoid duplication in the document library. In case your file is not there, scroll down to the area below the document library to upload a new file to the relevant folder. In the popup window, click on the +sign after the file name to add it. Then click Save in the top menu.

Related links If you wish to link to an internal or external web page, you can add a hyperlink here. A nameless hyperlink is created, which you need to edit. Please give the link an easy to understand title, such as Fifth Call page or Registration Link. Click Save in the top menu. Please remember to always choose the target “new window”, in case of an external URL. Alternatively type the following behind the URL address: _blank This function can be useful for call announcements, where it is good practice to add a link to the call page (internal link). For events, add the registration link here.

Related news If you wish to make visitors aware of other news articles or events related to the topic, click on the folder item to select related articles. Note: In the popup window, you may need to navigate to the news/events folder using the following path: “Sites/Northern Periphery and Arctic Programme 2014-2020/Meta/News or Events” Click on the +sign before a news article to add it. Then click Save in the top menu.

Tab Metadata is normally not used

Publishing You can publish your news article or event by unticking the Hide box. Alternatively, in the list of news or event items, you can activate the lightbulb.

14

3.4 File list: Uploading documents and images Files and images can be managed in the website’s document library under the function “File list”. Note: Please browse through the library before deciding to add a new file, to avoid duplication in the document library. 7 - Access Document Library under File list

There are different file actions, described below.

Actions Instructions

Create folder If you wish to add a new file, select the relevant folder for your file. If there is no relevant folder, consider if a new folder is necessary. You can add a new folder by clicking on the new record icon . Please give the folder a short and unambiguous name.

Add file Once inside the folder, you can add a new file by clicking on the upload icon , or by dragging and dropping a file from your Windows explorer to the area at the top of the

file list. You will be asked if you wish to overwrite any files with the same name. Click Yes. Once you have added a new file, you need to refresh the list by clicking on the refresh icon or Ctrl + F5.

Edit file Note: the tick box Extended View needs to be ticked in order to see the edit options. Once you have added a new file, you need to edit the file title. Click on the pencil icon

, which will open a new page. Here you can edit the title of the file as it is displayed on the frontend. It is recommended to give your file a short, unambiguous title without the file extension, e.g. Programme Manual v5. In the Description, you can for example add more details about the purpose of the file.

Overwrite existing file

If you wish to replace an existing file on the website without breaking any links to that file, for example the Programme Manual, make sure the file name of the updated file

15

is exactly the same as the name of the file in the Document Library. If needed, first rename the filename in the Document Library. After you have overwritten the file, please check that the file title and description are still valid, or need to the updated as well.

Move file You can move a file to another folder by copying and pasting it, by right-clicking on the file icon. Any links to the file will be automatically updated.

Delete file If you have no future use for a file, you can delete it by clicking on the trash can icon .

Adding file list File lists are a way of displaying a group of files, usually in the right-hand column of a page, for example the application pack. There are two ways of adding a file list to a web page. In both cases, you need to create a content element, in the Page function. You can find the content element of the type File Links on the “Special elements” tab. Then enter the edit mode for your newly created file list content element. Option 1: single files On the tab General, under Files, select the single files by clicking on “Add file”. Then Save. If needed, upload the relevant files through the upload section of the document library popup window. Option 2: file collection On the tab General, under Files, go to select file collections. Click on “Create new”, and select the options of your choice. You can choose between a static selection of files, a folder from storage that is automatically updated when a new file is added to that folder, or a category of files. Then select the relevant folder from the document library, and Save. If needed, upload the relevant files through the upload section of the document library popup window.

16

4. Screenshots 8 - Homepage project mini website

17

9 - Standard page with accordion element

10 - List of news items

18

11 - List of events

12 – Individual event with picture, related news and link