Introduction

Liferay is the content management system (CMS) we use to power your intranet. We have produced this guide to show you how to manage the content on your intranet.


Content editor access

Before you can make any changes to your site, you will need to log in. When a Liferay user's account is created, the correct permissions are attached to their profile, such as generic user, full administrator, and content reviewer. By simply logging in with your normal credentials, you will be taken to the website's homepage.

On the top of the screen you will see the site's controls, known as the dockbar, complete with your user section, notifications, the my sites dropdown menu, and if you have admin permissions, the admin dropdown menu. The admin section gives you access to the Liferay portal’s Site Administration interface, as well as to the Control Panel. The My Sites section provides a list of the sites which the logged-in user can access. The Notifications icon shows the unread notifications you have. You are notified upon receiving a private message, an invitation to join a site, a social connection request, or an event reminder. Alerts and announcements created via the Alerts or Announcements applications are accessible via the Notifications icon. The user section shows the user's name and provides links to the user’s profile (his or her publicly-accessible pages), dashboard (his or her private pages), account settings, and a sign out link.

You will also notice some additional controls are available to you on the left-hand side of the dockbar: add, customise colours, edit, and edit controls.

We will look at the controls of the left-hand side of the dockbar later in this guide (see Adding, editing and removing content).



Forgotten your details

If you have forgotten your password, click the Forgot your password? button on the login form and answer the security questions. If you have forgotten your username, get in touch and we will send you your login information.

Back to top


Adding, editing and deleting pages

This section will cover the basics of how to create new pages, edit the settings of the page, and delete unwanted pages.

Start by clicking the admin dropdown menu in the dockbar to navigate to our page manager. This will open up the window in the image below. The list in the red box shows you your public-facing and private pages. As the intranet portal that's being edited in the example image is a private (members-only) site, I have navigated to the private pages tab. Displayed below that is a full list of all the private portal's pages and sub-pages.

If you want to create a new page that doesn't sit beneath another page, then, with the private pages button still selected, select add page (top of the green box).

If you want to create a sub-page (a child page) for a pre-existing one (it's parent page), click on the relevant parent page in the list, such as About Us in the example image below. Now select add child page.



With the add page menu now open (see image below), let's make a page! Give your page a name, decide if you want the page visible on the site's navigation and tick the checkbox accordingly, and set the page's portlet layout (we typically use the 2 columns - 30/70 option). You can also link this page to other pages within the site or to completely separate web pages from the options in this menu. When you're done, scroll to the bottom of the page and press add page.



You will then be returned to the page manager window with your new page now visible in the list. Click on your newly created page, or any of your site's other pages, to view its details, and make any changes you want to make, such as changing its URL, and give it child (sub) pages.

You can also delete a page from this menu.

Back to top


Page content management

Liferay portals are built on a portlet system; drag and droppable Web Content Displays (WCD) that operate independently on your site. This system allows you to quickly and easily make changes to your portal without needing to know HTML or web coding language by editing the relevant portlet.

Adding, editing and removing content portlets

Start by navigating to the page that you wish to make your changes to. This is where those additional dockbar controls (see image below - blue box) that were mentioned in the last section come in. Each of these will open up a side window that contains a variety of different controls and content.

The Add function allows you to insert a range of drag and droppable portlets and insert new pages.

The customise colours: preview button allows you to see what your site will look like on different monitors/mobile devices.

Edit allows you to make changes to the page's settings, such as its name, URL, layout, and more.

Finally, the edit controls button activates/deactivates the on-page portlet options that allow you to make specific changes to individual portlets (see right-hand image below - green box). Make sure this is activated when you are editing your page.

To add content, start by clicking on the add button and clicking on applications. You will notice a long list of portlet types are available to you, depending on your requirements. The most commonly used portlet is the WCD. This can display text, pictures, videos, tables, and a range of other content types.

Click on WCD in the applications menu and drag/drop it to your desired location on your page. As you move the WCD across the page you will notice horizontal blue lines appearing beneath the navigation bar. This is to indicate where your portlet will sit on the page, which is governed by your page layout.


Tip
If you want a different portlet layout, click on edit in the dockbar, and choose your preferred layout structure by clicking on the options presented. Remember to click save.


With your WCD now in place, we can add our content to it. If your edit controls are active you will see a small back cog in the top-right corner of your portlet and a small white cog and plus in a black box to the bottom-left.

By clicking the black cog you will reveal a small dropdown menu that allows you to edit that portlets settings (look and feel/configuration), import/export settings from other portlets, and delete it from your page.

Click on the plus (+) to add some content. You will then be presented with the WYSIWYG content editor (see image below - red box). This works by taking what you type/insert and converting it into HTML web code.

Add a title to your page and type a sentence in the content WYSIWYG editor.



WYSIWYG editor controls

The controls displayed at the top of the WYSIWYG editor works much like the way Microsoft Word does. The controls include:


Styles - Add predetermined attributes to your text (i.e. Headings, info messages, citations, etc).

Size - Manually change the size of your text.

Text/background colour - Change the colour of your text or the background

Basic text edits - Bold, Italic, underline and strikethrough your text.

Sub/Super script - Apply sub-script and super-script to highlighted text/numbers.

Cut/copy/paste - Use these controls to copy, move and place your content.

Number/bullet list - Apply a numbered list or bullet points to highlighted text.

Text alignment - Apply alignment to a body of content.

Source code - Click this button to preview the converted source code and add your own.

Hyperlinking/Anchoring - Link content to other websites, files, other site pages, email addresses, or add anchor points (links to locations on the same web page).

Add image - Add a picture (jpeg or png) to your page.

Add table - Add a table to display your content.

Select all - Automatically highlight all content.

Remove all formatting - Remove all formatting from highlighted text (i.e. font, size, etc).

Find/replace/spell check text - Look for highlighted words in your content, search and exchange text, and check the spelling of your content.

Add smiley/symbol - Insert smiley emoticons and symbols to your portlet content.

When you have added or made any changes to your content in the WYSIWYG editor, you must remember to click publish to display what you have done.

Let's look at some essential content editing skills in more depth.

Back to top

A common feature found on nearly all websites are hyperlinks; references to new destinations, such as a different site/page, file downloads, anchors in the page, and more.

To create a hyperlink, we will need to use the link button. Highlight your text or picture, and click link. This will open up a new menu (see image below) that will allow you to set the destination of your link.


We have a few options when creating a hyperlink; link to a URL (i.e. www.yhcs.org.uk), an email address, or an anchor point.


Linking to other websites

To link some text or an image to another page on your site or a different website, simply copy and paste the desired destination's URL into the required field with the URL option selected and click OK.


Linking to email

If you wish to make a hyperlink that opens up an email, then select the email option from the link type dropdown menu, add the desired email address that you would like the message to go to, and if you want, add a predetermined title and message which will auto-generate when the user's mailing system opens, and click OK.


Linking to anchors in the text

To add a link that navigates to an anchor that you have added (i.e. further down a long, text heavy page), start by highlighting the text you wish to turn into your anchor point, click add anchor and give it a name (i.e. test anchor1). You will notice a red flag has been placed next to this text to signify that an anchor is in place. Next, highlight the content you wish to turn into the source of the hyperlink, and click on the link control icon. With the anchor option selected, choose the anchor's name (i.e. test anchor1) and element ID (same as the name). Click OK and your link is created.


Linking to downloadable files

If you want to create a hyperlink that triggers a file to download, there are two approaches you can take; using the document store and the Resources Browser.


Document store method - Start by adding your file to the document store. Instructions for this are detailed in the Liferay for Users guide. Open up a new tab in your browser, navigate to your file on the document store and click on it to open up that files sub-menu which allows you to view it's version history and detailed information (see image below). To view the uploaded file's URL, click Get URL which will reveal a greyed out box containing what we need. It is greyed out and has a hover warning icon to prevent it from being edited. Click on this link to highlight it, right click and select copy.

Return to our content editor on the previous tab, open the link function, and paste the file's URL into the correct field.


Resources Browser method - Liferay comes with a built in, server-side file storage area that you can upload documents and images to via your site, allowing you to establish hyperlinks with a few simple clicks.

With your content highlighted, begin by opening up the link function, and, with the URL link type option selected, click on the Browse Server button. This will open up the Resource Manager's browser (see image below - green box). Navigate to the folder you wish to add the file to (or create a new folder), click browse at the bottom of the Resource Browser and select the file you wish to upload. Remember to click upload in the dialog box or your file will not be added.



Your file should now be displayed in the Resource Manager. Double-click it and the resource manager will add the file's URL to the link automatically. Click OK to finish the process.


Tip
When you have created your link and published it, make sure you check that is working properly by testing it yourself

Back to top


Adding and editing images


We've all heard the expression; a picture says a thousand words!

By adding a few simple, well formatted images, you can really brighten up your web page and give it a more appealing and professional appearance. This section will look at adding and displaying images in detail and give you some pointers on how to format these features quickly and simply.


To add some pictures to your page, open the WYSIWYG content editor's add image function. You will be greeted with the menu displayed in the image below. From this menu you can upload your images to the Resource Manager and insert/edit your content.

Click on Browse Server to open the Resource Manager's browser. Navigate to the folder you wish to add the file to (or create a new folder), click browse at the bottom of the Resource Manager dialog box and select the file you wish to upload. Remember to click upload in the Resource Manager browser or your file will not be added. When this process is complete, double-click on the file you wish to insert.


You will notice that the Image Properties uploader now contains a URL, a preview of the image, and some numbers in the width/height fields.

Reset the image width to 250 pixels; this is a good size to start from. The image will automatically have its width and height ratio locked so it will adjust the height for you (unless you manually unlock it using the small padlock icon). Make any adjustments to its size accordingly.


Image borders, margins, alignment, and padding


Alignment - You can set the image's alignment using the alignment drop down option. Choose between left and right (it will naturally justify to left). This will determine which side of the content area the image will sit.


Border - A border that goes around the padding and content.

If you want to add a basic border around your image, type the number 1 in the border field to add a one pixel-wide surrounding, black border. To increase the thickness, increase the pixel amount.


Margins - Clears a transparent area outside the border.

To add a margin to your image, start by adding the number 10 (width in pixels) to the HSpace (left and right side of the image) and VSpace (top and bottom side) fields. Adjust the size by increasing or decreasing the pixel amount.


Padding - Clears a transparent area around the content.

This is very useful as it prevents text from getting too close to the image and making your content look unprofessional. To add padding to your image, click on the advanced tab, and in the Style field, enter padding: 10px; next to the other information in this box. This will produce a 10 pixel transparent box around your content.

If you want to add padding to only one side of your image, type padding-left/right/top/bottom: followed by your pixel amount.


Linking my image


If you click on the link tab at the top of the Images Properties menu, you can add a URL which will turn your picture into a button that links it to another website/page. You can also use the browse server button to link documents to the image.


Tip
Use the target function to determine what happens when you click the link. Set it to New Window to make the link open a new tab/window and keep your page open.

Back to top


Adding and using tables


Sometimes you can have a lot of content that needs displaying on your page, such as huge document lists, useful links to other sites, large amounts of text, and more.

By adding and using a table, you can neatly and effectively arrange and display your content; be it text, numbers, videos or images. Utilising tables can create clean page designs that are easy to use and navigate. The best part about them is they are very easy to set up... if you know how of course!

The first step is to create our table, and then fill it with content. Start by clicking the table button in the WYSIWYG editor.

This will open up the Table properties menu, which allows us to set the parameters of our table; the numbers of rows and columns, table width and height, content alignment, and more. (see image below)

Enter the amount of the rows and columns you want (which will include your header field(s), if you want one).

Set your header: you can choose between the first row, the first column, or both. The header row will naturally have a bolder text to distinguish it from the other cells.

To add a border, enter a number i.e. 2 (width in pixels) in the border field. Choose your overall content alignment; left, center, or right (it will default to left if no option is selected). You can change individual field's alignment when your table is created.

The caption option allows you to add a close-fitting title above your table.

You can set the width and height (in pixels) using the available fields, but you can manually adjust the table size by dragging the edges when the table has been inserted in the WYSIWYG editor.

Cell padding sets the amount of space between the contents of the cell and the cell wall. (image below - green area)

Cell spacing controls the space between table cells. (image below - red area)



Tip
Want your table to look a little more polished? Click on the advanced tab in the Table properties menu and, in the Stylesheet Classes field, enter table table-striped table-bordered.

This will give your table a little bit of additional formatting.

When you have added all the correct information to the Table properties menu, click OK to generate your table. You will be taken back to the WYSIWYG editor which will now contain your table. Insert your content by clicking in the table's empty cells and adding whatever it is that you wish to display.

Back to top


Advanced content editing

Looking to take your content editing to the next level? Check out our basic HTML guide for content editors. A little knowledge goes a long way and can really push your page further.