Page Comparison

STYLING TOOLS

The styling tools can be used to create interactive, dynamic and visually pleasing news items and Management System pages. Most tools work in a similar way to standard word processing tools.

Using Source Code to Copy Formatting

Before creating any information on a new page, it is often easier and more efficient to copy a similar page and edit from there. Formatting tables for example can be quite tricky so copying an existing format is a much better process.

To copy source data, from the edit screen:

1. Click the 'SOURCE' to change the display to the source code

   Image Modified

2. Copy all the HTML code

3. Open the new page

4. Click 'Source'

5. Paste the HTML code

6. Click 'Source'

7. Alter / delete / add to the page as required

Definition of Fields

Name	Definition	Example
Image Modified	Displays the HTML code If code and programming functionality is understood, this can be used to format the page. The source code is a handy tool to use to copy existing formatting and reuse instead of starting from scratch.

Image Added

Links - Text, Images and Videos

Links can be added as standard hyperlinks or to images containing hyperlinks. Links can direct users to any Web pages, including videos, images, instructional pages etc.

Links to anchors and emails can be used but the most common use is adding links to text or to an image.

Insert a Link as Text

To add a link as text, from the edit screen:

1. Click the link

   Image Modified

   icon in the style bar

2. In the pop-up window, enter the display title (text displayed in the item containing the link)

1. Image Added

2. Under link type, select URL and enter the web page address (URL)

3. Under the target tab, a target window can be set to determine how the link opens for the end-user. For example, selecting 'New Window' will mean the URL will open in a new window every time it's selected.

1. Image Added

2. Click 'OK' to save the link

Insert a Link as an Image or Video

To add a link as an image, from the edit screen:

1. Follow the steps in the Widget section on this page of the user guide to insert an image

2. Right click on the image

3. Click 'Image Properties'

   Image Modified

4. In the pop-up window, click the 'Link' tab

5. Enter the URL

6. Add Target

7. Click 'OK' to save the link

1. Image Added

2. When an end-user clicks the image, the video will open

   1. Note the video must be stored online and not within Lucidity or on a computer or network drive

Linking Files from Online Shared Drives (eg: Google Drive)

Files kept within online shared drives such as One Drive, Dropbox and Google Drive can be linked to the Management System.

The instructions below outline how to share links from Google Drive. Refer to the specific shared drive instructions for details on how to share files.

To link a file, from Google Drive:

1. Locate and open the file to be shared

2. Click 'Share' in the top right-hand corner of the Google doc

1. Image Added

2. In the pop-up window, click the drop-down arrow next to 'Copy Link'

1. Image Added

2. Click 'More' to open the next menu screen

1. Image Added

2. Select the 'On- Anyone with the link' option

3. Click 'Save'

1. Image Added

2. Click 'Copy Link' to copy the link to the clipboard

1. Image Added

2. In the Management System in Lucidity Intranet, select the page where the link it to appear

3. Click 'Edit' to open the Styling Tools

4. Enter the copied link from Google Drive using the link 

   Image Modified

    icon and instructions outlined above

Tables

Tables can be added and then edited using the same styling tools.

Note it is often more efficient to copy and edit an existing table (using the HTML source code) rather than starting from scratch. Refer to the Using Source Code to Copy Content section at the top of this page.

To add a table, from the edit screen:

1. Click the table 

   Image Modified

   icon in the style bar

2. In the pop-up window, edit the table properties as required

   1. number of rows and columns, width and height, header rows, alignment etc can all be adjusted

1. 1. Image Added

2. Click 'OK' to add the table to the page

3. Each cell in the table can now be edited using all standard styling tools, including links, placeholders etc

4. Right click the table to access additional editing functions

   1. To change the colour of a cell, select 'cell properties.' In the 'Background Colour' cell, enter a simple colour such as red, or enter the full RGB colour for different shades. For example, 'rgb (150, 150, 150)' will give a shade of grey.

      Image Modified

Widgets

Widgets can be used to insert files, images and display subpages of pages.

Add File

To add a file, from the edit screen:

1. Click the widget 

   Image Modified

   icon on the style bar

2. In the pop-up window, select 'Filing Cabinet File'

1. Image Added

2. Search through the Filing Cabinet to locate and select the document

3. Click 'OK'

1. Image Added

2. The file will be added as a link to the page

1. Image Added

Add Image

To add an image, from the edit screen:

1. Click the widget 

   Image Modified

   icon on the style bar

2. In the pop-up window, select 'Filing Cabinet Image'

1. Image Added

2. Search through the Filing Cabinet to locate the image

3. Click 'OK'

1. Image Added

2. The image will be added to the page

3. Right click the image to access additional properties to edit the image, including adding hyperlinks

Display Sub-Pages

The display sub-page widget will automatically create a bullet hyperlinked list of the subpages under the current page AND automatically add any new subpages to the bullet list.

To add a list of subpages (child) associated with the current page, from the edit screen:

1. Click the widget 

   Image Modified

   icon on the style bar

2. In the pop-up window, select 'Subpage List'

1. Image Added

2. A list of subpages will be displayed

1. Image Added

2. Click 'OK' to save (a subpages icon will display)

1. Image Added

2. Click 'OK' to save the page

3. The subpages will be listed

1. Image Added

2. Any future subpages added will be automatically added to the parent list in alphabetical order