Purchasing CMS Website Update Guide

LUS CMS WebsiteAdmin Guide

Prepared By:

Information Services DepartmentApplication Development Division - Web Development Team

April 12, 2016

Table of ContentsPage Actions3Adding a Page3Adding a Menu Item Link4Deleting a Page5Retrieve a Deleted Page5Regions of a Page6Determining Regions on page7Page Settings8Setting the Page Template8Setting Page Go-Live and Expiration Dates for a Page9Creating Content10HTML Module10Adding Content10Version Control14Settings14Event Calendar Module16Add an Event Calendar16Edit Categories16Add Event16Delete an Event17FAQ Module18Manage Categories18Add New Question and Answer18Update a FAQ18Announcements19Add an Announcement19Creating a Feedback Form20Managing Users24Add New Administrator24Deleting Users25Change Password25

LUS website login screen URL: http://cms.sbcounty.gov/lus/login.aspx

Located above the county logo on your website. It is hidden by default. Hover over the area to reveal it.

General Code Used for LUS site:

Subtitles on pages: Subtitle Goes Here

Bolded Regular Font Title: The Bold text

General Best Practices:

1. Please make sure pdfs and links to other websites open in a new window

2. Please make sure images have an alt tag and responsive class applied

Page ActionsAdding a Page

1. Hover over the Pages link on the top of the page within the admin bar

2. Choose Add New Page from the menu

3. Type the name of the page in the Page Name field within Page Details tab

4. Include in menu: if unchecked, will not show in menu

5. Insert Page: select Before, After, or Child of using the page in the Parent Page box as a reference point

6. Click Add Page button

Adding a Menu Item Link

A menu item link is a menu item that is attached to a pdf, image, or external link but displays like a menu item.

1. Create a page from the instructions in Adding a Page

2. Navigate to the page you just created

3. Hover over the Edit Page link

4. Click Page Settings

5. Click Advanced Settings

6. Expand Other Settings section

7. To link to an External Page

a. Select Link URL -> URL

b. Enter the URL address in the Location textbox

c. Click Update button

8. To a File (pdf, image, or other document)

a. If the document or image is already on the site,

i. Select the location from the File Location drop down. Select the file from the File Name dropdown

b. If the document or image is not on the site, click Upload New File

i. Select the folder you want to place the document

ii. Select the document from your desktop

iii. Click Upload Selected File

c. Click Update Page button

Deleting a Page

1. Navigate to the page you want to delete

2. Click on the Edit Page link in the Admin Bar

3. Click Delete Page

Retrieve a Deleted Page

1. In the Admin Bar

2. Select the Admin Tab

3. Select Recycle Bin

4. Within the Pages tab, Select the page you want to restore

5. Click the Restore Selected Page button to restore the page

6. The page will be restored

Regions of a Page

For all main content pages, the regions are defined as in the picture below. You can place content in any box defined on this page. You can also move already created content to any box.

Determining Regions on Page

Hover over the Edit Page button at the top right, and within the menu select View in Layout Mode from the dropdown. The page will display the outlines of the regions.

Page SettingsSetting the Page Template

1. Navigate to the page you want to edit

2. Hover over the Edit Page link on the top of the page

3. Choose Page Appearance and navigate to the Advanced Settings tab

4. In the Page Theme box, select the Skin in the Skin drop down menu

For all secondary pages, use Site: LUS Page

5. In the Page Container box, select the container for each module in the Container drop down menu. For all secondary pages, use Site: LUS Main

6. Click Update Page button

Setting Page Go-Live and Expiration Dates for a Page

1. Navigate to the page you want to edit

2. Hover over the Edit Page link

3. Click on Page Settings

4. Click on Advanced Settings tab

5. Expand Other Settings section

6. To set the Go-Live date, enter the date in the Start Date input box

7. To set the Expiration Date, enter the End Date

8. Click Update Page button

Creating ContentHTML ModuleAdding Content

The HTML Module is the main module to use to enter content into a page.

1. Open the page you want to enter content

2. In the Admin Bar select Modules and then Add New Module

3. Search for the HTML Module in the search box

4. Once found, drag and drop the module onto the page in the desired location

5. The following content will be added to the page

6. To edit the content, click on the Click here to edit content link. And to open the settings for the module, hover over or click on the cog icon and choose Settings from the dropdown. To add a title click on the Enter Title link and add your title. Once done, click on the floppy disc image on the right.

7. Add the text in the text area. To use the advance editor, click on the angled arrows icon

8. Once in the new Editor window, choose Rich Text Editor. The advanced editor is similar to Word

9. While adding content, click Preview to see a preview of the content

10. When finished, click Close

11. Click on Publish for the changes to be live on the site

Adding an Image

Images can sometimes be too large to upload. Please resize the image. A good size is a resolution below 640px by 480px.

1. When editing text in the Advanced Editor, place the cursor where you want to add the image

2. Click the paper clip icon dropdown and choose Insert Media from the list

The following box will open

3. Navigate to the correct folder to find the image or

4. If you want to upload a new image, make sure you are in the correct location and then:

a. Click Upload button

b. Click Select button and navigate to the file you want to upload

c. Add as many images as you want by clicking Add button to add more inputs

d. When finished, click Upload

5. Select the image you want to insert

6. Click Properties tab under the image

7. If you need to resize the image

a. Click the link next to the Width and Height to make the image scale properly

b. Then change the width or height as needed

8. Alt Text enter text that describes the image (for website accessibility)

9. CSS Class enter img-responsive without quotes for the image to resize automatically

10. Image Alignment this is how to specify where the image is placed within the text. The image is placed the way the lines are aligned in the box.

11. Click Insert button at bottom

Version Control

1. While in edit mode, click the layer icon in the bottom left of page which is the Page History

2. Click the eye icon to preview the content

3. Click the moving arrow icon to revert the module to that version

Settings

1. Click or hover over the modules container to bring up the module settings manager

2. Click the Settings icon

Change Content Container

1. Once within the modules settings, click Page Settings tab

2. Select the container from the dropdown within the Module Container input box

3. Click Update at the bottom of the page

Adding Workflow

Workflow can be used to add a staging and publishing process to a module or page

1. Hover over Admin on admin bar and choose second cog icon to open menu

2. Select Workflow Management menu item

3. Choose to either create a new workflow or change the default workflow type

4. Click Update when done

Setting a Date Range for a Module

1. While in edit mode, click on module settings icon and choose Module Settings tab

2. Expand Advanced Settings section

3. Enter a Start Date for when you want the Module to be viewable on the page

4. Enter an End Date for when you want the Module to be hidden on the page

5. Click Update button

Event Calendar ModuleAdd an Event Calendar

1. On the Admin bar click on Modules > Add New Module

2. Search for events in search box

3. Drag and drop the Events module onto the page in the desired location

Edit Categories

1. Hover over Manage pencil icon

2. When options appear, click Edit Categories

3. Add a category by typing text in the Category text box and click Add

4. Update a category

a. Select a Category from the list

b. Edit the text when it appears in the text boxes

c. Click Update

5. When finished, click Return

Add Event

1. Click the + button

2. Enter the information

3. To upload flyers for the events, click the attachment button in the HTML editor. Upload the document and insert it into the text box.

4. For the Owner, select LUS admin. This will keep it consistent and not specifically assign a person to the event.

5. Click Update button

Delete an Event

1. Click on the Event

2. On the Event Information page, click Delete

FAQ Module

The FAQ module is where your department can add quick common questio