UNIVERSITY COLLEGE CORK CMS. Content Management System

Transcription

1 UNIVERSITY COLLEGE CORK CMS Content Management System

2 Table of Contents 1 Introduction Planning your Website New Sites Migrating an Existing CMS Site Accessing the Content Management System Sections and Content Sections Home Page Content Adding a Section Adding Meta Data Re-Ordering Subsections To order sections alphabetically Deleting a Section Creating a Password Protected Section UCC Only Sections Linked Sections Example: Creating Link Sections to External Websites Example: Creating Link Sections to the Home Page Creating a Trash Section Media Library Adding an image or document to the library Create Image Versions Using the Media Library Using an Image Variant Adding Content Tiny MCE Editor Details Inserting a table in to a piece of text Inserting Documents in to General Content General Content and Images Inserting links in to text Inserting a Web link Insert Section Link i

3 11.6 Creating Anchors in Long Text e.g. FAQ Old Style Sites Additional Content Options Other Content Options Modifying Content Previewing Content Approving Content Banner Images with Title Updating the Homepage What is a Functional Homepage? Functional Home Page Content Type Options Functional Homepage Boxes Other Content Types Right Hand Side Call Out Box Image Sticky Right hand side call out boxes Right Hand Side Callout Box Video Video Source: Image Source Adding the Callout Box Video News Section and the News Item Content Type News Block Social Media Icons Social Media Block Contacts Footer Notes and Other resources... 49

4 Site Manager Training 1 Introduction Welcome to the Site Manager Content Management System Training Course. Throughout today s session, we will look at the ins and outs of Site Manager and its use in creating, maintaining and updating UCC websites. The Content Management System (or CMS) was introduced to enable end users to create, maintain and update websites without the need for extensive web design and development skills. In effect, any UCC staff member or student can use the CMS to implement their website without having any previous knowledge of how to create a website. At the end of this course, you should have the skills necessary to use the CMS to implement your UCC website in an official UCC website design. 2 Planning your Website Before you go about implementing your website, whether you are creating that website from scratch or whether you are converting your existing non-cms site to the CMS, or updating your site from the previous UCC design to a new style, it is essential that you have some plan in place for this process. 2.1 New Sites Before a site can be set up you need to: 1. Read the web protocols at 2. Attend CMS training 3. cmssupport@ucc.ie to request a website a. In the same , request a new skeleton site structure to be set up for your department including the name of the department and the names of the moderators who are to have access to the site. (you can only have moderator access to a site if you have completed the CMS training course) 4. As with any large project, it is necessary to consult with members of your department (or club, society, unit etc.) about what it is exactly they want to see on the website. 5. Find out what information they see as essential. 1

5 6. From these consultations create a requirements document that everyone agrees on and signs off on (this will save you a lot of time in the long run as there will be less late minute I never agreed to that kind of arguments and changes). 7. Go to and fill in the Information Architecture (IA) template, based on your requirements and send to dewg@ucc.ie. This will give you a definitive idea as to what pages, sections and content your website will ultimately contain. 8. Fill in the site request form, also at Once you have a definite plan of action in place it is a lot easier (and faster in the long run) to create your website! 2.2 Migrating an Existing CMS Site The new design varies in a number of ways from the previous design, mainly in how the homepage is created. It is not possible to completely transfer existing sites automatically to the new design, although some of the process can be automated. Before migration can begin, the migration request form needs to be completed and an Information Architecture document completed. The Information Architecture template, or IA, is a simple excel file that can be used to help site owners/site moderators to organise and plan the structure of their website. This needs to be completed and returned to dewg@ucc.ie before continuing. If you are reading this and you have not completed the form and the IA document please go to and do so. Once the DEWG has received the request, they will set up a test version of your site, based on the existing site. Your existing content will be transferred into the new page layouts and content types, ready for you to place into the relevant sections in your site. 3 Accessing the Content Management System The CMS is an online application; this means that it can be accessed from any computer that has Internet access. It does not matter if the computer is on a wired network or wireless, neither does it matter if the computer is inside or 2

6 outside of UCC s network. The application can be accessed from the following URL: (please note this is case sensitive) Once you have completed the CMS training course you should cmssupport@ucc.ie to request a user name and password for the system if you do not already have one. Please note: Requests for CMS accounts must come from an official UCC address and should contain permission from the relevant head of department, club or society president. External developers working on behalf of a UCC department must have their accounts requested by a UCC staff member working in the relevant dept. Intranet sites can also be implemented with the CMS 3

7 Figure 1: CMS Login Screen Your username and password for this training session will be given to you by the trainer: Username: training_ Password: tcentre_ 4

8 4 Sections and Content 4.1 Sections Websites in the CMS are made up of sections and content. Sections are essentially blank pages on which content can be arranged. Sections are created the same way regardless of the style of a website. Depending on the amount of information to be presented to a user, sections may contain subsections. A maximum of 3 levels of subsection is recommended. Any UCC site is in fact a sub-section of the main UCC Home Page. With a new site a number of standard sections maybe set up automatically. If you are taking over an existing site of course there will be sections visible when you log in to the CMS. Figure 3: Site Structure These sections will display as a menu on the left hand side of the webpage IF they contain approved content. Initially these sections will be blank. No content will be on the pages. It is up to the moderators of the site to create the content and any necessary subsections If necessary you can create additional sections If you have a People section please don t rename it. This is the preferred section name for sections detailing departmental staff Figure 2: Left Hand Menu 5

9 4.1.1 Home Page A site s homepage is also a section. However this section usually contains content created using different content types to the other sections of the site. Think of the homepage of a website as a Shop Window you don t dress the window until you have your storeroom stocked. By adding content to the other sections of the site we will be stocking up our store room. (See page 18) Once the storeroom is stocked we can arrange our window to best display our merchandise. As such we generally fill our home page last. 4.2 Content Content is a combination of the text and images and downloadable documents that make up the website. The content is contained within the sections and is added using Content Types. The most commonly used content type in the new design is the General Content content type. We will look at content types in detail in a little while. Figure 4: Banner Image and General Content 6

10 5 Adding a Section Initially you will be given a number of sections for example; having planned out the site it may be decided to create additional sections: E.g. Training Conference To add a section the following steps must be followed: Click on the yellow arrow across from the top level section in the hierarchy (School of Alchemy), this will display the section drop down menu Figure 5: Section Dropdown Menu Click Add Section The Add Section Enter Details window opens In the screen that follows there are several fields: o Name: Give the section a name In this case call it Training Conference (This name will appear as a menu item so keep the name short, but relevant. It will also appear as part of title of the website). o Output URI: Give the section an output URI. This will allow you to create the web address for this particular section as an abbreviated version of the name of the section. Or it can be the same as the name of the section, except in lowercase letters. (Generally the Output URI should be one word, all in lowercase, using only numbers and letters. There must never be a space in an output URI either. If you wish to have more than one word, separate them with a hyphen. If you are maintaining a website in the CMS that does not use Output URIs then 7

11 o o o o you will need to contact cmssupport@ucc.ie for specific advice on how to use them on an existing site. ) Status: Leave this field set to approved. Default Workflow: Leave this field as is. Show in Navigation?: Leave this check box checked (This field, when checked, enables the section to appear as a menu item) If you require a Hidden Section you can un-check this box. Make this a Link Section: Leave this check box unchecked (This option allows you to create a menu item that is in fact a link to a site that is not part of your site structure. We will create link sections later( See Page 11) Figure 6: Creating a New Section 8

12 5.1 Adding Meta Data Click the Metadata tab This allows you to add Meta information to your section (Meta information is information about your information such as keywords and descriptions that do not display on the screen but are used by search engines to categorise your pages for return during a search on Google or Yahoo. Fill in the DC.Description field with a short paragraph between 20 to 24 words long with key phrases and describe what the page is about. The description metadata is the most important field when it comes to showing up in a Google search. Finally click Add to create the section Your section will have been added and you will be brought back to the site structure. Figure 7: Adding Metadata 5.2 Re-Ordering Subsections You have the ability to reorder the sub-sections so that the menu items display in a desired order. To reorder the main menu of the site, do the following: 9

13 1. From the top level section drop-down menu (School of Alchemy), choose Figure 8: Modify Section Modify Section. 2. Click on the subsections tab. Figure 9: Subsections Tab 3. From the list of sub-sections when you hover your mouse over the arrows in the move column you will get (from left to right) Move to Bottom, Move Down, Move Up or Move to Top. 4. Choose the Move Up arrow across from News News will move up ahead of What s Happening Figure 10: Reordering Subsections 5. Click on the save changes button at the bottom or top of the window 10

14 6. Your sequence has now been changed. Figure 11: Save Changes 5.3 To order sections alphabetically 1. From the top level section drop-down menu, choose Modify Section. (School of Alchemy) 2. Click on the subsections tab. 3. Make sure the Enabled check box under Automatic Ordering is checked and that it is set to Alphabetical (A-Z). 4. Click the unlock all button 5. Your sections should automatically re-order themselves alphabetically. 6. Click on the save changes button at the bottom of the window Figure 12: Unlock All 11

15 6 Deleting a Section Websites adapt and change as time goes by and occasionally a section of a website will be out of date and need to be deleted. To delete a section do the following 1. From the section drop-down menu for the section that is to be deleted Figure 13: Deleting a Section click Delete Section If you delete a section that you did not mean to delete, you can undo your mistake by going to the section drop-down menu again and choosing Modify Section. Then in the modify screen, change the status of the Figure 14: Section Status section in question from inactive to approved. Update the section. When you delete a section, your content may still be published to the live webserver. You will need to contact cmssupport@ucc.ie to have it permanently deleted 12

16 7 Creating a Password Protected Section It is possible to create a section of a site that can only be accessed with a user name and password. To create such a section, do the following: Follow the instructions in section five to create a section From the section drop down menu select add content From the list of content that displays select htaccess-internet (or htaccess-intranet if password protecting a section of your intranet site) Figure 15: htaccess-internet content type Give the content a name Enter a protected area name Type in a username this will be used by those who have access to the section Type in a password for the section this will be used by those who have access to the section Before this can be added to the section, we need to generate an encrypted password Hover the mouse over the blue i on the encrypted_password field a website address will be displayed Open a new tab and type in the address that was shown: 13

17 Type in the username and password that were used earlier Click Create.htpasswd file Figure 16: Encryption Generator A.htpasswd entry will be created in the format username:encryptedpassword Copy everything after the : (excluding the : itself) Step by step video guide available online: 14

18 Figure 17: Encrypted Password Right click and copy Return to the Site Manager tab in your browser Paste the encrypted password in to the encrypted_password field Figure 18: Encrypted Password Field Clicking add will result in a password being required to view the Current Students Section Approve the content Any other content added to this section will only be visible if the user has the log on details. If you add documents from the media library to a password protected section please contact cmssupport@ucc.ie as they need to configure the folder of the media library. 15

19 8 UCC Only Sections It is possible to create a section that can only be viewed from computers connected to the UCC network. To create such a section, do the following: Expand the section that will contain the UCC Only page From the section drop down menu (yellow arrow) select Add Give the section a name and Output URI (remember one word all lowercase no special characters) Click Add Adding a special piece of content will make this section UCC Only From the section drop down menu of the newly created section select Add Content From the list select htaccess-ucconly content type Figure 19: UCC Only content type from list Give the piece of content a name and a protected area name Click on the Add button Figure 20: UCC Only Content Add Approve the content for the section to be UCC Only: See page 32 16

20 9 Linked Sections We mentioned linked sections earlier (see page 7) and stated that a linked section allows you to create a menu item that is a link to another part of your site: for example your home page, or a site that is not part of your site structure at all. This example will show you how to create a link section to an external site, in this case Example: Creating Link Sections to External Websites 1. Go to the top level Section Drop-Down Menu (School of Alchemy) 2. Click Add Section 3. In the name field type JSTOR 4. Check the Make this a link section? tick box 5. When you have checked this tick box, more options will appear to allow the link section to be specified. 6. Change the link type to External URL 7. In the link URL field, type 8. In the link target field, select _blank (this opens the website in question in a new window/tab when clicked) 9. Scroll down and click add Figure 22: Link Section Settings Figure 21: Link Section Settings 9.2 Example: Creating Link Sections to the Home Page 1. Go to the top level section drop down menu (School of Alchemy) 2. Click Add Section 3. In the name field type Home 4. Check the Make this a link section? tick box 5. In the Information about this link section set Link Type to Section 6. Across from Link Section, click Select 7. From the Hierarchy that appears, select your top level section 17

21 8. Click Add 9. Link sections to other UCC websites must not use target = _blank 9.3 Creating a Trash Section When you are updating a website you may want to move several deleted or expired items to a bin so that they are not accidentally re-approved. To create a trash section do the follow: Across from the homepage section click on the yellow arrow and add new section Name the section Trash or Bin Deselect show in navigation Set status to pending Add section Any expired or deleted content can be moved in to the trash at any time. Once the site publishes the content will no longer be live on your site. 10 Media Library The media library is a place where you can centrally store documents and images that are used on your site. In this section we will look at how to add an image and a document to the media library. We will also look at inserting the media content in to an existing piece of text content Adding an image or document to the library Click on the Content Menu at the top of the screen From here click on Media Library The Media Library will display Figure 23: Media Library 18

22 Each department/school will have their own category in the media library. The categories will be listed on the left hand side of the screen. Click on the + sign to expand a category. Expand to Training Category Click on School of Alchemy Figure 24: Media Library Categories To add a media item (e.g. an image or document) click the Add Media button at the top of the screen. Name the piece of media carefully o If it is an image, ensure that you name it in such a Figure 25: Add Media Button way that you can recognise it in what could end up being a long list o Do not use spaces or non-alphanumeric characters in external media items 19

23 o If it is a document make sure you name it something that explains what it is and what the user can expect to open when they click on it. When you add a document to a piece of content the name of the document will display as a clickable link so the name used must be appropriate. Figure 26: New Media Item The Description can be used to help you and others identify the piece of media and its purpose (The description also becomes the tool tip for an image when used on a webpage) For the Media, field click Browse From the Choose file window that opens select the file you want to upload Click Open 20

24 The system will attempt to identify the file type Figure 27: File Type If the incorrect type is chosen click Change Media Type and select from the options given Click Add to put the item in the Media Library We will look at adding these media items in to the site as we go along Create Image Versions Using the Media Library Images used on a UCC site need to be a certain size so that they resize easily. The size will depend on the content type that the image will be used with. Table 1: Image Sizes Content Type Name Image Dimensions Ratio Banner Image with Title Right Hand Side Call Out Box Image Right Hand Side Call Out Box Video Functional Homepage Boxes 725 pixels wide x 254 pixels high 210 pixels wide x 197 pixels high 2.85: :1 Upload the image to the media library as detailed previously. Locate the existing image, rest the mouse pointer over the thumbnail and click Advanced In the screen that displays select Add Variant 21

25 Figure 28: Add Variant Options relating to resizing and cropping the image will display Choose the desired option Set the desired size for the image variant. Note you may need to resize an image before cropping in order to fit or of the desired image area in to the new file Name the Variant and Click Update. Figure 29: Resize or Crop 10.3 Using an Image Variant When content requires an image you select it from the media library, if the selected image has variants you will be able to choose which one to use. Be sure to name variants clearly so you can identify which one to use where. 11 Adding Content There are a number of different content types in use on the UCC website. Text content containing links to documents and other sites can be created using the General Content content type. Images should be added using the Banner 22

26 Image with Title content type. The images to be used must first be loaded in to the media library and be suitably sized. The image sizes are listed in Table 1. To add a piece of General Content to this section we do the following: 1. Click on the section drop down menu ( the yellow arrow across from the Study Alchemy section) 2. From the menu that displays select Add Content Figure 30: Add Content 3. A list of content types will be displayed there are many different content types available 4. Scroll down and click on the General Content content type a. Old sites Use Text content type 5. In the content type screen, you will be given a number of fields to fill in: a. Name: Type YYYY-MM-DD Dept Details where YYYY-MM-DD is today s date in year, month, day format (This name is equivalent to a file name for your piece of content and is not seen by visitors to your site. Using the above naming convention allows you to keep track of when exactly you created the piece of content. It is not obligatory to follow this convention but it may help) b. Title: this is the heading of the piece of text. It will be formatted differently to the main_body text. c. Main_Body: This is the area if to which the piece of information is typed, known as the Tiny MCE Editor. The Editor window allows you 23

27 to carry out some basic formatting options, for example, Bold, Italics, bulleted or numbered lists. It is also possible to add a table. d. Close Slide (general content type only)allows the piece of content to be expanded or minimised. 6. When ready click Add or Add and Approve if you are ready for the content to publish Figure 31: General Content content type 24

28 11.1 Tiny MCE Editor Details The Tiny MCE Editor has the following functionality Table 2: Tiny MCE Editor Options Clears the text area of the editor Formats selected and or newly typed text as Bold Formats selected and or newly typed text in Italics Underlines selected or newly typed text Text alignment left, centre right or justify DO NOT USE will break responsive nature of new sites Cuts selected text Copies selected text Pastes previously copied text Pastes as plain text strips all formatting from the copied text USE THIS Paste from Word do not use leaves erroneous formatting. Insert/Edit Link Clickable only if text is selected. Allows user to add a hyperlink around the selected text or edit an existing link Unlink Will remove a link for selected text Find/Find Replace - allows user to locate specific words in the text Insert a list item Increase or decrease indentation of the text Denotes a block quote Undo and Redo Marking Citation and Abbreviations Insert a horizontal line Subscript and Superscript Insert custom character mathematical symbols etc. 25

29 Toggles full screen mode on and off Insert Section link see page Insert Content link see page Insert Media Item see page 27 Spell Check Remove formatting removes all formatting from the selected text Insert table and other table options. See page Return/Ent er Shift + Return New Paragraph New Line 11.2 Inserting a table in to a piece of text Click the Insert table Icon An Insert/Modify table window will open Specify the number of columns and rows required Do not specify the amount of cellpadding required(cellpadding is the amount of space between the contents of the cell and the cell wall. This spacing is automatically determined by the style sheets applied to the site). Do not specify cell spacing either. Figure 32: Table Properties Window If you want visible borders type in a value for border Do not specify a specific height or width for your table. This will break the responsive nature of the web page. 26

30 Do not specify a table Class. The table will be styled automatically. If the first row or column contains header tick the appropriate boxes. Click insert when you have specified how you want your table to appear 11.3 Inserting Documents in to General Content A document can be easily added to a piece of General Content Add or modify the piece of General Content Figure 33: Insert Media Icon Click the Insert Media icon The media library will open Locate the Document to be added Click Select to add the media item to the piece of content Figure 34: Selecting a Document from the Media Library Click update or add on the piece of content General Content and Images Images should not be added to General Content content types as it breaks the responsive nature of the site. Banner Images should be used instead. The banner image content type takes files from the media library. See page

31 11.5 Inserting links in to text There are two types of links that can be added to text internal section links or external web links. These links offer a website user an alternative route to a specific location Inserting a Web link Create a new piece of content or modify an existing piece of General Content Highlight the word to be used as a link Click on the Web Link button The Insert/Edit link window opens Type in the desired URL for example if you do not include the the system will prompt you to do so. Click on the arrow opposite Target o o As this is an external web link, we need to have a new window/tab open to display the new page Select Open in a new window (_blank) Title - filling something in for title will display a tool tip when a user hovers their mouse over the link Click Insert Update or add the piece of content as normal Figure 35: Adding a web link 28

32 Insert Section Link A section link is a link that directs a user to another part of the website they are currently browsing. Create a new piece of content or modify an existing piece of content Highlight the word to be used as a link Click on the Insert Section Link button Figure 36: Adding a Section Link The site Hierarchy displays Click on the section to which you wish to link Update or add the piece of content as usual 11.6 Creating Anchors in Long Text e.g. FAQ Old Style Sites Anchors are links that exist within the one webpage. They are useful in long text filled pages to enable users to quickly get the portion of text that is relevant to them. Anchors are often seen in FAQ pages. Each question would appear as a link on the top of the page, clicking the link brings the user to the exact position on the page that the answer can be found at. Type all the required text Anchors need to be marked before they can be linked to Highlight a word that is to act as the anchor Click on the Anchor Icon in the middle tool bar Type in a name for the Anchor Continue down the page and mark any other Anchor in this way. 29

33 Use the Link Icon described in section 11.5 to connect or link to the anchors In the FAQ example you would highlight the first question click the link icon and instead of specifying a URL you will select an Anchor from the drop down list see Figure 35 on page 28 A Back to Top is often used in long pages as well. In this instance the Anchor is created at the top on the text and throughout the long text the words Back to Top are linked to this anchor often named top Additional Content Options When content is being added or modified there are a number of tabs visible toward the top of the screen. One of these tabs is called Options. In the Options tab you can set an expiry date or a publish date for a piece of content. When adding or modifying content click on the Options tab To set an expiry date click in to the text field Expiry Date From the calendar and time selector pick a date and time for the piece of content to expire By setting this the system will automatically expire the piece of content once the selected date or time passes, after which this content will no longer be published Update or add the piece of content as before 11.8 Other Content Options The content screen contains a number of elements that it is important to be aware of: 1. Automatic Ordering: this allows you to order the content alphabetically or Figure 37: Content Options Tab 30

34 according to when it is added. This order is the order in which the content will appear on your actual webpage 2. Existing Content (if you hover your mouse over existing content a tool tip will inform you of the content type that is used for that content): a. Name: this is the name of the piece of content that you have just added b. Version: this is the version number of the piece of content the more changes you make to the piece of content, the higher the version number. When the content is approved it becomes version 1.0. Subsequent changes to the content will become version 1.1, 1.2 and so on until it is approved yet again to become version 2.0 c. Content Drop-Down Menu: (Figure 22) this drop-down menu allows you to: i. Modify the piece of content in question ii. Mirror the piece of content (i.e. make an exact duplicate of the content elsewhere in the site that will be updated any time the original is updated) iii. Duplicate the piece of content (i.e. make an exact duplicate of the content elsewhere in the site that is independent of the original piece of content) iv. Move the content elsewhere in the site v. Delete the piece of content vi. History of the piece of content (this option allows you to set a previous version of the content as the current version. This is very helpful if you have made a mistake during the updating of the content. When you click on History for a piece of content, you will see a list of previous versions. Click the Set Active button for the version you want as the current version then scroll to the bottom of the page and click Update. d. Status: this tells you whether the content is inactive, pending, approved or expired e. Last Modified: this tells you when the piece of content was last modified f. Move: this is to do with the order in which the content appears on the website. Even if automatic ordering is disabled you can still use 31

35 this move column to re-order your content (provided you have more than one piece in the section) If you reorder content you must click Save Changes for the change to be made permanent g. Lock: again, this is to do with reordering the content in the section. This allows you to lock content into a particular order. 12 Modifying Content In the Site Structure view of the site Click on the yellow arrow of the section containing the content to be modified From the menu select Modify Content In the Modify Content screen, click on the section drop down menu (yellow arrow) of the section on which the content to be modified is located Select Modify Content Figure 38: Content Menu From the screen that displays click on the content drop down menu (yellow arrow opposite the piece of content to be modified) Choose modify from the menu that appears Make the required changes and click Update 32

36 You will then be returned to the content screen Figure 39: Updating Content Select Site Structure from the Main Content menu to return to the Site Structure of the site. 13 Previewing Content To preview the content added to study alchemy do the following: 1. From the Site Structure View (main content menu Site Structure) 2. Click on the section Figure 40: Previewing Site drop down menu for Study Alchemy (yellow arrow to the right) 3. From the menu that displays click Preview Section 33

37 4. Your site should preview in a new tab or window. If you are using Chrome a popup blocker might prevent the preview displaying. Allow popups and preview again. Figure 41: Preview of General Content - Open Slide 14 Approving Content Once a piece of content has been added it needs to be approved before it will be live on the site. Approved content will be published once every hour. To Approve Content Click on the Content menu Select Approve Content The Approve Content Screen will appear Check the box under the heading Approve for all pieces of content that are ready to be published If all are ready use the Select all option Click Approve Figure 42: Approve Content Figure 43: Approve Content Screen 34

38 15 Banner Images with Title Table 3: Banner Image Size Content Type Name Image Dimensions Ratio Banner Image with Title 725 pixels wide x 254 pixels high 2.85:1 The Banner Images with Title content can be used on inner pages. They can be used at the top of a page or on long pages to break up text and add interest. Before you can add a Banner Image with Title to a page, the image to be used must first be added to the Media Library (see 10.1 page 18). Assuming the required image is in the Media Library, follow the steps below to add a Banner Image with Title: Browse the Site Structure expand the sections using the + sign until you can see the section that is to have the Banner Image with Title added Click on the section name Once the section pane opens, click the Content tab (see page Error! Bookmark not defined. Error! Reference source not found.) and click the add content button From the list of content types that displays click Banner Image with Figure 44: Content Type Selection Title Three fields are all that need to be filled in (see Figure 45: Banner Image with Title ) o Name name the image so that you know which piece of content this is o Title optional field this will display overlaid on the top of the image as a banner. o Main Image This needs to be selected from the media library. 35

39 Click Select The Media Library opens Browse or search until you find the required image Select the image Once the location of the image is named in the Main Image field Add and Approve the piece of content. Figure 45: Banner Image with Title Content Type 36

40 16 Updating the Homepage The page layout of your new homepage is known as a Functional Homepage. Below are the instructions on how to populate it. Functional Homepage Boxes General Content Right hand side callout boxes Figure 46: Functional Homepage Example 16.1 What is a Functional Homepage? In the Content Management System each page in a website is known as a section. The front page of a website can be a Functional home page - subsections of a Functional Homepage are called Inner Page Functional Home Page Content Type Options Functional Homages can use one or more of any of the following content types Functional Homepage Boxes see Figure 46 General content Figure 46 Banner Image with Title Figure 45 Right Hand Side Callout Box Image Figure 46 Right Hand Side Callout Box Video Figure 46 37

41 16.3 Functional Homepage Boxes Note: This content type should generally only be used on the Functional Homepage of your website. Browse the Site Structure expand the sections using the + sign until you can see the section that is to have the Banner Image with Title added Click on the section name Once the section pane opens click of the Content tab and click the add content button From the list of Content Types that displays, click Functional Homepage Boxes. This content type creates three image boxes, which can link internally to other sections of your website or externally to other websites. The three boxes will be arranged horizontally side by side on the Functional Homepage, as shown in Figure 49: Functional Homepage Boxes The same set of fields is listed for each of the three boxes, referred to as Box 1 Box 2 and Box 3. Fill in the content type details Figure 50: Functional Homepage Type The name of the piece of content is similar to a file name. Its purpose is to enable you, the user, to identify the piece of content. Box 1 Title The heading of the piece of content this will be formatted distinctly in the header of the leftmost box on the published webpage. Box 1 colorlist Choose from Blue, Yellow, or Red Box 1 Drop Down List Optional Extra If you would like a drop down menu to appear when a user hovers their mouse over the Box Title, insert a bulleted list here. The list items need to link to parts of your site using section links see Insert Section Link on page 29. Box 1 Image This is the image which will appear in Box 1. Recommended image dimensions are 210 wide x 197 high pixels (or a ratio of 1.065:1) o Click Select to open the Media Library. Navigate to the desired image and click select to insert the image. 38

42 Box 1 Brief short explanatory text. This text will display when the web page loads. See Figure 47. Box 1 More copy the brief text and add additional information. This additional information will be visible when a user rests their mouse of the image. See Figure 48. Box Internal Link 1 Used for linking Box 1 internally to a section within your website. o Click Select. The website hierarchy will appear. o Navigate to the section you wish to link to. Click it and press okay. o The Select button will be replaced with the navigation path showing the link destination. Figure 47: Box 1 Brief Figure 48: Box 1 More Use Default Link Text Ticking this box will use the default text for the section or piece of content you are linking to. The default text is the name of the section of piece of content. Box External Link 1 used for linking Box 1 to an external website. Select and copy the URL of the destination website from the browser bar. Paste the full URL, including the http part. E.g. Downloadable Document This can be used to link the box to a document in the media library. These fields repeat again for each of Box 2 and Box 3, as seen in Figure 50 and should be filled out in the same way. When you have filled out the details for all three boxes, click add and approve. Note: Each of the 3 boxes can only have ONE function: Internal Link OR External Link OR Downloadable Document But each can have a different function 39

43 Figure 50: Functional Homepage Content Type Figure 49: Functional Homepage Boxes 40

44 17 Other Content Types Two new content types are Right Hand Side Call Out Box Image and Right Hand Side Call Out Box Video. These content types can be used to display links to additional content. They appear on the right hand side of a web page as shown in Figure 46. Any departmental video, for example, could be highlighted Right Hand Side Call Out Box Image This content type creates a box on the right hand side of your Inner Page, which contains an image. Clicking on the box will take you to a designated link or document. Browse the Site Structure expand the sections using the + sign until you can see the section that is to have the Right Hand Side Callout Box Image Click on the section name Once the section pane opens click of the Content tab and click the add content button Select the Right Hand Side Callout Box Image content type Figure 51: Right Hand Side Call Out Box Image Name: This is the name of the piece of content similar to a file name and used for enabling you, the user, to identify it. 41

45 Title: This is the content title, which will appear at the top of the image on the published web page. o You can choose to leave this field blank, if you wish to have no text with your image. Image This is the main image. Use the Select link to navigate to the correct location in the Media Library and insert it. Once inserted, the location path of the file in the Media Library will be displayed, and the options to remove or change the image will appear. The image will be used as a link in one of the following ways: o o o Option One - Inserting an Internal Link Click Select. The website hierarchy will appear. Navigate to the section you wish to link to. Click it and press okay. The Select button will be replaced with the navigation path showing the link destination. You could use a right hand side call out box image to link to a News section for example Option Two - Inserting an External Link: Select and copy the URL of the destination website from the browser bar. Paste the full URL, including the Error! Hyperlink reference not valid. Option Three Link to a Downloadable Document Click Select. Choose a document from the Media Library to link to. Click add and approve. Title Image Figure 52: Call Out Box Image Sticky Right hand side call out boxes Right hand side call out boxes used on the home page can be set up in a way that will cause them to appear on the right hand side of ALL sections. Create a section named callouts Make it a hidden section deselect the show in navigation tick box. See page 7 Add or move the Right hand side call out boxes to the new hidden section. 42

46 17.2 Right Hand Side Callout Box Video Similar to the Right Hand Side Callout Box Image, this content type creates a box which displays on the right hand side of your Inner Page and contains an image. Clicking the image launches the video Video Source: The videos that are used in the call out boxes come from YouTube video links Try the UCC YouTube Channel Search UCC Ireland to find relevant content. o Having found the required video click share o The necessary link will appear below the video Figure 53: Required Video Link o Copy this link 43

47 Image Source The image needs to reflect the content of the video, a thumbnail like those you see on YouTube needs to be created Adding the Callout Box Video Browse the Site Structure expand the sections using the + sign until you can see the section that is to have the Right Hand Side Callout Box Video Click on the section name Once the section pane opens click of the Content tab and click the add content button Select the Right Hand Side Callout Box Video content type Fill in the content type details o o o Name: This is the name of the piece of content similar to a file name and used for enabling you, the user, to identify it. Title: This is the content title, which will appear at the top of the image on the published web page. You can choose to leave this field blank, if you wish to have no text with your image. Video: Paste the link to the YouTube video you want here. Select and copy the full URL (including the from your browser, and paste it into this field. Title Image Figure 54: Call Out Box Video On YouTube Click Share to get the link to the video Figure 55: YouTube Link o Image This is the main image. It needs to be accessible from the Media. Use the Select button to navigate to the correct location in the Media Library and insert it. Once inserted, the location path of the file in the Media Library will be displayed, and the options to remove or change the image will appear. 44

48 Add and Approve the piece of content Figure 56: Right Hand Side Call Out Box Video Content Type 18 News Section and the News Item Content Type A section called News can be created in the way described earlier. However any news stories added to the section should use the news-item content type. Fields with an * are required. You can provide a newsimg, however do not include a newsing-large as Figure 57: news-item content type this will soon be deprecated. Add and approve the piece of content News Block If you have a news section on your web site you may want to highlight its content on your homepage. One option for doing this is to add a news block to the home page. Click on your homepage section from the site structure On the content tab select add content From the list select News Block Name the piece of content 45

49 News section use the select to point this to the news section of your website Block Colour choose for the drop down, Red, Blue or Yellow. (you can modify the content at any time any choose a new colour) Add and Approve the piece of content Figure 59: News Block Content Type Figure 58: Published news block 19 Social Media Icons If your department, centre or unit uses social media websites such as Facebook and or Twitter you can add a links to them to the end of your webpage. Follow the steps below: Create a hidden section named social_media 46

50 To this section add a piece of content using the Social Media Links content type Put the links to the social media services you are using in to the appropriate fields Add and Approve Figure 60: Social Media Links 19.1 Social Media Block If you want to give your social media platform greater prominence you can do so by adding a social media block to your home page. This works for Twitter and Facebook only. If you use only Twitter you could set the Facebook option to display the main UCC account. Figure 61: Social Media Block content type 47

51 Click on your homepage section from the site structure On the content tab select add content Select Social Media Block from the list Name the piece of content Facebook Page This needs to be the URL to your Facebook page e.g. Facebook App ID this is not needed currently but maybe looked for by facebook in the future. Twitter Account Name e.g. UCC Twitter Data Widget ID o Log in to your departmental twitter account on twitter.com o Go to your settings under the cog icon o Go to the Widgets section of your settings o Select Create New o Use the Light Theme o Click Create widget o Before you save the widget, copy the code below the preview in to a word document or notepad. The Widget ID is in this code. o Save changes o Copy and Paste the twitter ID in to the Twitter date Widget ID field in the CMS o Add and Approve the content Figure 62: Twitter Settings Figure 63: Twitter Widgets Figure 64: Published Social Media Block 48

52 20 Contacts Footer It is useful to have your department s contact details on each page of the site. To add this to your site, do the following: Add a hidden section called contactfooter To this section a piece of content using the contactdetails content type Fill in the necessary details, note not all fields need to be filled. Figure 65: Contact Footer Add and Approve the content. 21 Notes and Other resources To migrate an existing website to the new style see: To have a CMS account set up cmssupport@ucc.ie For instructional videos go to If you encounter any issue while using the CMS please tcentre@ucc.ie or cmssupport@ucc.ie 49