In the Mura CMS Content Manager's Guide, you'll learn how to harness the power of Mura CMS so you can get done what you need to simply and easily. Mura CMS Overview To access the administration area, you need to log in. On most Mura CMS installations, you can access the administration area in a couple of ways:

1. Log in via http://yourdomain.com/admin/

Please Login

Engl.

09.

Forge) Your Psasword? Zr.tee y. n ono lends new passwoialo y0,1.

7 2. Use the log in shortcut by pressing the Escape key and the lower case L (e.g., esc+I )

Home

Please Log In

Username

Posewool

Remember Me

Forget Usemame or Password?

Not Registered? •Sign Up.

Sago M top 0 Default 2013 cy to Mao Serene Mode dendow

Once logged in, from the front end of our site, you can access the back end administration area by clicking the Site Manager link on the front end toolbar. You can also toggle the visibility of the front end toolbar by clicking the Mura logo on the top left corner of your screen.

Edit Add Version History Site Manager

8 Dashboard The Dashboard gives you a quick look at recent activity within your site, including recent visits, updated content, form submissions, comments, etc.

Site Manager The Site Manager contains the core of Mura functionality — enabling you to add, update and delete site content. You can also re-order content, set permissions and more.

Modules Most Mura Modules are optional add-on features that can be turned on and off on a per site basis. A few are essential to the functionality of Mura and cannot be disabled such as Categories and File Manager.

Content Staging Simultaneously publish multiple content changes all at the same date and time with Mura's Content Staging Manager and Change Sets.

Components Mura Components are most often used as content "includes" that can be created and placed on pages across your website.

Categories Mura has powerful category-based functionality, enabling you to create extensive category/subcategory structures (and set up navigation based on these structures).

Content Collections: Local Content Indexes One of Mura's more powerful features. Here you can easily create indexes of content from within your site, based on almost any business rule you can dream up - no code or SQL needed.

9 Content Collections: Remote Content Feeds Remote Content Feeds allow you to select and place content from external RSS feeds in your Mura site.

Forms Manager Mura's Forms Manager allows you to create simple forms to collect, view and download data.

File Manager Contains all of the files associated with your web site. Accessible only by the Site Admin.

Plugins Any plugins assigned to the specific site will appear here.

Users

System (Administrative) Groups & Users Create and maintain administrative user groups and profiles to manage the web site.

Member Groups & Users You can create Member Groups, add members to the groups and allow them access to specific sections of the web site.

1 0 Site Config

Edit Site Configure key settings for your site including Email Server Settings, CMS Modules, Extranet Settings, Display Regions, Images Settings and more.

Permissions Manage access to Mura CMS functions and web site content for System Groups and Member Groups.

Class Extension Manager Create and edit custom content types to collect additional data from content managers and more. Typically used by developers.

Create/ Deploy Site Bundles Easily export or import a complete copy of your web site.

Trash Bin When content managers delete content, they may think it's gone forever, but that's not exactly true. Super Admins can restore deleted content quickly and easily in this area.

Update Site Super Admins can get the latest bug fixes and display object enhancements by using this feature.

11 Creating the Site Structure Organizing parent-child page relationships for readability and intuitive understanding when viewing the structure later.

The first step to building a site in Mura CMS is to set up the site structure. This involves adding the pages below the home page and creating the navigational links on the site. For this step, it is always beneficial to work with a clearly defined site structure. For our example we will refer to the Sitemap found in the Sample Specifications section.

Access the Site Manager The Site Manager is the primary tool for organizing and maintaining your website content. It provides several features for viewing your site structure, allowing you to easily locate content in your website. Some key tools include:

1. Content Search

2. Architectural View and Flat View

3. Drag and drop content node ordering

4. "Toggle-able" viewing of child content/nodes 5. "Quick-Edit" controls for editable items in the Site Manager grid

6. User Permissions for all content 7. Version History

Click on the Site Manager button on the primary admin navigation to view the Site Manager. There will only be one page (content node) in the site structure labeled Home. All new pages will be added below the home page.

12 Architectural View The Site Manager's default view shows an Architectural View of content (e.g. pages or sections) in your site. This is merely a hierarchal view of content as it resides within the site. By default, the Site Manager displays the Home page and the first level of sub-pages. Clicking the "Arrow" icon next to a node with children will reveal the children of that node.

Site Manager

Archttectural VIew

Title

The Title shows the Navigational/Menu Title of each content node. Click the Title to edit any of the content's attributes.

Objects

The Objects column shows the current setting for the Content Object cascade of each node. Click on the object icon of the desired row to edit the Object Cascade Inheritance setting. Options include:

• Inherit Cascade

• Start New Cascade

▪ Do Not Inherit Cascade

13 Display

The Display column shows the current display setting of each node. Options include:

• Yes

• No

• Per Stop / Start Dates

Template

The Template column indicates whether or not a template has been explicitly assigned to a specific node. Click the icon to edit the layout template for a specific content node.

Nay

The Nay column indicates whether a content node is included in the site navigation. Click the icon to edit it.

Updated

The Updated column displays the date and time of the last time a content node was edited.

14 Buttons

To the right of each item in the Site Manager is a panel of buttons. Each button performs a specific task. Knowing each button's function is essential to using the Site Manager.

Edit - allows you to edit a content node.

View - allows you to view the content node.

Version History - takes you to the version history.

Permissions - allows you to restrict/grant access.

Delete - allows you to delete the content node.

Tooltips

Mousing over the "?" icon next to any label in Mura will display a "Tooltip" providing a brief explanation of the field or functionality.

Use the to display the actual title of the Inge you we add% The page We we deploy as the headline or tee on a given NO&

Title

15 Flat View The Flat View enables an in-depth look at almost every aspect of your site's content by allowing users to conduct advanced searching and filtering of content.

Site Manager

View

501 By .334003aind n M SnteCOntEni

Show, ng 1-8 of 8 %sate

Nee OW,

O Baseball end Widgets Elting . .M.0

Kome r§B4Og r) Baseball andWidpits F6ters Updated on 01/2512013 at 10:56AM by Achnin U., 7 Created or '. 3 at SAS PM / Slre 111,4111111 Categories. Dome.< 1 Tags. Saweba, l, Widgets. Wog r TV°. PPP. Ibef.18 KEYWORDS

O A Short ?tip to Chifte

Nana • n Bag • El A Short Input China

Updated on 01/29,2019 at901 PM by Maw Usar, 3 Created .01.33013 et N.18 PM 051,1106

Celegccios . Intornationisl "age: trawl Type Page (Petaolt)

`Ann • What's In a Widget Anyway? 130g Trays: inedgets D Nome. Doe . DWinnis Ina Widen Anpnwr 9 ,. • Updated oral/20,3013 at SCOPM by Mai., UM, / Created on 01/2812013 8.18 I St. Ian I Categories internattonal , -ail: Wdleta, Slog / Type Page (Default) CATEOORP3S • News Cativories Kids Like Widgets More Than Video (tames EJ D3rne., g Irtdridiond Home. MI News r, Kids like Widgets More Than Video Games

Updated an O1330/2113 at 3.16 PM by Admix. Use' I C, eated an 01/1P'2013 at • 013 PM' Sue. IRk t Filar teii 113 .. at000nes: Intematton51 , ',pa Pape (1>e,,t) Advanced searching and filtering include:

• Keyword Searching • Filter by content Type (Page, File, Folder, Calendar, Gallery, etc.) • Filter by Tag • Filter by Category There are a number of pre-set searches that you can run with a single click: • All Expiring Content • My Expiring Content • My Drafts • Files I'm Editing Offline

16 You can also sort your search results by Last Updated, Date Created and Title.

The "Add Content" Button (Plus Sign) zoom

Mouseover over the "Add Content" icon (1:" ♦ Add content next to any page or section within the site to 010 reveal a menu of links to add new content to the site. Click "Add Content" to reveal a Select AL Copy All Content Type dialog window.

17 Content Types

Before adding content, it is Cor best to be familiar with the different content types Rio available in Mura CMS.

Each type has a unique Folder function that can meet your needs. Quick Upload

Below is a description of each type.

Type Description

Page Page content types are the website pages of your site. These are the most commonly used content types containing text, images and links.

Link Link content types are links to other content items. They can be used to link to other websites from the main site or to another section of your existing website.

File File content types are files that have been uploaded to and managed from File Manager. File icons denote common file types such PDF, Word, Excel, Zip and others.

Folder Folder content types allow you to aggregate related content into a defined group. It has no content of its own, but displays both title and summary of each content item within the group.

Calendar Calendar content types allow you to display scheduled content in a traditional calendar format. Content placed under a calendar is scheduled by its "Start/Stop Dates"'

Gallery Gallery content types are collections of images. They allow you to aggregate and display images as galleries.

18 Content Formatting Basic HTMUstyling guidance for things like margins, fonts and padding, and how to do that in the content editor.

Text Styling Text styling determines the way your text will look in the document. Advanced capabilities in setting text format is what distinguishes CKEditor from a standard form textarea or a basic editor. Font styling, changing the size of the text and its color, or applying a pre-defined set of consistent styles, all take seconds and one mouse click.

g Source to u S 1ft

uE19 111", 0 01,1:71mi Styles • FOM, 8!

In CKEditor, the text styling features are grouped together on the toolbar. Some are simple buttons that turn the style on and off when you click them.

Other text styling options are available as a drop-down list. Upon clicking them the list Styles Normal opens, and you can select a styling option. Inline Styles

Marker: Yellow

Marker: Green

Success

19 Add Pages for Top Level Pages

Objects Display Tempts Nav Updated g7J1

From the Site Manager, follow these steps to add pages for each top level page:

1. Mouse over the plus sign to the left of the Home page and select Add Content from the menu.

0. Zoom

+ Add C

1-..

2. This will then display the Select Content Type dialog window. Click on Page.

Select Content Type

calendar

3. This will display the Edit Content screen.

4. Enter a page title in the Title field. This is title that will display on the page (e.g., About Us).

5. Select the Publish button at the bottom of the screen.

6. You will be redirected to the Site Manager after the page is published.

7. Repeat this step for each of the following pages:

7.1. About Us

7.2. News

7.3. Blog

7.4. Photo Gallery

7.5. Contact Us

7.6. Members Only

7.7. When complete, your site structure will appear as follows:

Templats Hey

Mernners y 1,I3.13 4.1421.4 raB if Coals. Us 01/1.7013 919 ',KA /OR Q

,21. Ph= Gallen 3 01 , 1000131,1406 PM /paw

• 01,1.01D.1111.1 PM /0000

wee +A1.10. 316. PM k) a it

• Dlt.2.39.H3O4 PM /00 sr 13

Setting Page Order By default, pages added to Mura will display in the order they were added with the most recent on top. If you want to change the order of your pages, you can simply drag and drop them into the desired order.

1. Mouse over the title area (not the title text itself), and your cursor will change to the "Drag" icon.

2. Click and hold the item you want to move, and drag it to the position you want.

Title Obiects Display Template N. LWOW,

tat st. 1117013 4:55-29 PN, w 0 n Members On'y 01013 / 0 [) About Us /ae Ivo

COnnt. Us S tat St FM /011$1110 N,00GAIwy a . !IDMOtal 9.te O8 PM /OPNO D Eft2 01,0001 3 318 53 PM /001,0 4.5 0 , 000, 3 9:18 :33 /0/111t0

3. Once you are done changing the sort order, click the Update button to save the new order.

4. After clicking Update, the order of your pages will change to reflect the order you set.

Object Display Template Nav Updated Si IR i;10/2813 9:18:34 tea /Giii we 3 OVIISYDIS 843 PM /Valle lamp 01 ,102013 9: 1 8'33 PM /Q1910 photocawy 0,102013 fel eiDe Pet /aftige D Cont. Us t,f10.0?0 , 5 att /CtIW 0

Members Only /0011110

5. Click the Current Site button on the main navigation to preview the site.

09R* NO Defatdt

22 6. Your site structure will now be reflected in the main navigation on the front end of the web site.

Logo,

Home

HOUSLUSC C DeMutt 2013 HHcmy , Ste Warr SoMple Modal Modus,

7. To hide Members Only from the main navigation, click the Site Manager fink on the Front End Toolbar to return to the Site Manager.

Version History f1 SiteManager

8. Then click on the checkmark icon in the Nay column to reveal a Display in Navigation pop-up form.

MI6 N. Uptletal

Home C1(2013415:20

Shout Us 21/13110138183,,0 /ow', 42

139:18A3PM /gilt it 0 c°3 BIB 91 PM /p air Li Photo Cagey 919,060M /9 0 C11 Con./ Us 9:19:17wo /000,0 numbers Only 01,72,20,39 /:„101C0

9. Change the select menu to No, then click Submit. Now the Members Only link will not appear in the math navigation.

23 Selecting Layout Templates By default pages created below the home page will inherit the template applied to the home page. You may also select an Alternate Child Template to serve as the default template for all children beneath the home page. This same functionality is also available for all sections within the site.

There are two primary ways to alter the desired primary Layout Template and Alternate Child Templates:

1. Edit directly from the Site Manager.

2. Edit on the Content Edit screen.

Edit Layout Templates from the Site Manager You can update the Layout Template and/or Alternate Child Template directly from the Site Manager. Click the icon of the row you wish to edit in the Template column to reveal a Layout Template pop-up form. Simply select the desired primary Layout Template and/or desired Alternate Child Template and click Submit.

Site Manager

AreNtecturat View

24 Edit Layout Templates on the Content Edit Screen To update the Layout Template on the Content Edit screen, simply select a page to edit, select the Layout & Objects tab, and then select your desired Layout Template (e.g., three_column.cfm).

Edit Content -FP. Page St P 01/10,2013 tee PM

n Permissions

Layout Template Tr

cletaott Ym

Alternate Chile Layout Template le

Layout 8 Colacts three column dm

Edit Content Whether editing existing content or creating new content, you will first encounter details about the item you are editing.

Edit Content Typs Page Status: Published Update 00102013 905 PM

• Type: This specifies the type of content node you are editing. • Status: This is the current status of the item you are editing. Published means the page is published onto your live site. Draft means the page is saved, not published, and therefore not accessible by users on the front end. • Update: The date/time of the last update.

Just below the item details is a set of useful links:

EliWW ;WE` W. 0 VW. P,WW.WW Vets: ha Ph ',Whi^ VW Si acrabn :Timmy 0 hams.

• Back to Site Manager: Takes you back to the Site Manager view. • View Published Version: Opens a preview of the currently published version of the content. • View This Version: Opens a preview of the current version of the content that is being edited. The difference from View Published Version is that this version has not yet been published.

• Version History: Opens the Version History page. Here you can see previous versions of the page being edited. Visit the Version History page for more information.

• Delete Content: Opens an Alert dialog window to inform you that deleting the content will also delete all content nested beneath it.

• Permissions: Opens the options for user permissions for the content that is being edited.

Next are the edit content tabs. Each tab gives you several options for customizing your page.

Basic Tab Here you will manage the page title and body content of your page.

Type

Title

Arc

Select Associated Image to Upload

Summary

17, qua r. •1( S

. 1-149 —0 64.±.lrri ?

Content

• - 11 16 5. B./ us x,

• 114 9 7,77 — SL 41 [7.1 m Mies • Format' ?

Listed below are some brief explanations of each field in this tab:

1. Type: This is the content type (e.g., Page, Folder, Calendar, Gallery, etc.) 2. Title: Also known as the "Long Title" or "Page Title." Text entered here is displayed above the main content of each page. 3. Associated Image: You can upload a primary associated image for this content. A thurnbnail of this image appears on Folders and as well as on the page itself.

27 4. Content Summary: This is a brief summary of the content on the page. If you are creating a page within a Folder, this summary may be displayed along with other pieces of information. 5. Content: Aside from the Title, this is the most important field on the basic tab. This is where you edit the body of your page. Mura has a visual "WYSIWYG" editor to help you style and format content for your page.

28 SEO Tab SEO stands for "Search Engine Optimization." Here is where you can customize elements of your page such as the Navigation Title, URL Title and add Meta Keywords and Meta Description information.

If left blank, the title fields below are auto-generated for you based on the primary title entered on the Basic tab.

Navigation Title {Optional) CO

About Us

URL Title (Optional) UA

about-us

HTML (Browser) Title (Optional) W

About Us

Meta Description

Meta Keywords

1. Navigation Title: This is the title of the page used in site navigation, or "short title". 2. URL Title: Used in the creation of the page's URL. 3. HTML Title: Used as the page's "browser title", placed between the title tags within the head tags of the document. 4. Meta Description: Text entered here will populate the "content" attribute of the "description" meta tag. 5. Meta Keywords: Text entered here will populate the "content" attribute of the "keywords" meta tag.

29 Mobile Tab Mura CMS allows you to choose whether or not content will appear in the navigation for users viewing your site on a mobile device. You can choose to "Include for all" which means that the content link will appear for both mobile and non-mobile devices, "Include for Mobile Only" or "Exclude from Mobile."

Mobile Navigation

(.) Include for an Include for Mobile Only Exclude from Mobile

Layout & Objects Tab The Layout & Objects tab is where you can choose a layout template for the page, designate an alternate layout for children of the page, and assign content display objects to various regions of the page.

Layout Template 0

Inflect From Parent

Alternate Child Layout Template 0

none

Inheritance Rule* 11.0

ti_;) Ince, I Sec: New ._ Do Not Inherit Cascade Cascade Cascade

Content Objects Avertable Content Otvects Lott CCAMI7 Content Objects

Select Object Type

Mein Content Content Obiects

Right Column Content Objects

30 Inheritance Rules You can control the inheritance of content objects by selecting one of these three choices. This setting can also be edited from the Site Manager.

Inheritance Rules

Inherit ) Start New Do Not Inherit Cascade Cascade Cascade

1. Inherit Cascade This choice inherits the content objects of the parent item or whichever grand-parent started a new cascade.

2. Start New Cascade Starting a new cascade causes any child items of the current page to inherit its content objects.

3. Do Not Inherit Cascade This choice will ignore any content object cascades and only apply objects placed on this content node.

31 Content Objects Content objects, sometimes referred to as "Display Objects," are reusable pieces of content and/or code that can placed on one or more pages within your site to either enhance the page layout or add functionality. These content display objects are controlled by the Mura CMS interface and can be implemented on a per-site, per-section, or per-content node basis.

Under Available Content Objects, there is a select menu which contains several types of content objects. Select an Available Content Object (e.g., Navigation) and the available content objects will be displayed below.

Content Objects Avadable Content Objects

Select Object Type System Navigation Mailing Lists Ad Regions Folders Calendars Galleries Components Forms Local Content Indexes Local Content Index Slide Shows ()Query Only) Remote Content Feeds Pippins

You can then select an object to assign to a desired content display region (e.g., Left Column, Main Content, Right Column, etc.).

Content Objects Available Content Otvects

Navigation

Mutti-Level Navigation Peer Navigation Sequential Nav Standard Navigation Sub Navigation

14 I I •,n , t II I 14 I I To assign a content object to a specific display region, select a display object, then click the right arrow next to your preferred display region and Publish the page. To remove a content object from a display region, simply select the content object in the display region, then click the left arrow and Publish the page. You can also rearrange the order of the display objects by selecting a display object, than click either the up or down arrows found on the left side of each display region.

Content Objects Available Content Objeas Left Cclhrnn Content Objects

Navigation Standard Navigation

Folder Navigation Multi-Level Navigation Peer Navigation Sequential Nay Standard Navigation Sub Navigation MaMt Content Content Obtects

Right Column Content Object:,

33 Tags Tab Tags are simply a form of keyword metadata. They are usually single words and can be used to allow end-users to filter content that is relevant to their personal interest. They can appear as links under each content item in Folders and can also appear in the form of a "Tag Cloud" content display object as a navigational aid and are hyperlinked to items associated with the specific tag.

Tags

inspiration life running thoughts lite° thoughts

Related Content Tab Mura CMS allows you to create one-way relationships between content items. This means that Content Item "A" may consider Content Item "B" to be related, but this won't force Content Item "B" to have an implied relationship with Content Item "A."

Acd Related Content

Content Title Type

D Homer Bog D UMW Up City Uvin' Page 0

34 Advanced Tab The Advanced tab contains some less commonly used options as described in the list below.

Content ID 4 ED2 8 E

Current Rename atx4.8 us

this Pane secure v8 SSL? fi

Laskin

Remote Information (0 al)

Remote ID Remote URL

Remote Publication Date Remote Source

Remote Source URL

1. Content ID: This is a unique identifier for this specific piece of content. 2. Current Filename: This is the filename of the content. 3. Make this Page secure via SSL?: Check this box to automatically create a secure link (https) to this page. This only applicable if a valid security certificate is installed on your site. 4. Lock Node: Check this box to prevent administrators from accidentally deleting this content. 5. Remote Information (Optional): This area is completely optional and typically used by developers.

35 Publishing Tab

Credits

- Restrict to Specific Group(s)?

g Include in Site Navigation 0

Ll Open in New Browser Window 0

CD Exclude from Site Search

Content Release Date (Optional) 0

12 t. 00 AM

Display 0

Yes

Content Parent: "Home" [Select New Parent]

Content Expiation

12 00 AM

Assign Content Expiration Notifications

Feature in this section?

Notifications Notify For Review 0

Add Notes

The Publishing tab contains a number of important publishing options as described in the list below.

1. Credits: This is similar to a "By Line" where you can add author(s) name(s). This information may appear on Folders. 2. Restrict Access to Specific Group(s)? You can choose to lock down the content to one or more groups which would require users to log in to view the content.

NOTE: Summary information will appear on the page above the login screen when content has been restricted.

36 3. Include in Site Navigation: There are many instances where you may not want to include content in the navigation on the site, but yet still be accessible via a URL or direct link within content. Checked means that the content will display in the navigation, unchecked means it will not. This feature can also be edited directly in the Site Manager. 4. Open in New Browser Window: Check this box to open the page in a new browser window. Additional options are displayed for the size, location, and display of the new window. 5. Exclude from Site Search: If for any reason, you wish to exclude content from the built-in Mura CMS site search, you can simply check this box, then Publish the page. Once done, the content will no longer be included in search results. 6. Content Release Date: The Content Release Date is an optional field. This field assigns a specific release date to the page. If edited or updated at a later time, the release date will remain static. This is useful for organizing content and can be used as a filter in content indexes. The release date will not affect the whether or not your page is displayed. 7. Display: Choose "yes" if you want this to be available for viewing. Choose "Per Start/Stop Dates" to schedule when your content appears and is removed from the site. Choose "no" if you do not want visitors to view it. If you choose "no" the content will only be viewable through the Mura interface. 8. Content Parent: This field allows you to search and select a parent content item for the current page being edited or created. If you already created this page under another content item, it will be displayed here. 9. Content Expiration: The Content Expiration Date lets you know when a content item needs to be reviewed and/or updated. 10. Assign Content Expiration Notifications: Reminders can be assigned to any member of your Mura CMS Admin team. 11. Feature in this section? Featuring content flags a content item so that it may be featured on other pages or local content indexes. Content may also be featured during specific dates using the same procedure as in the Display options.

37 12. Notify For Review: Checking Notify for Review to notify other Mura users of the changes you've made to content. Select the users you want to notify in the list that appears. You can also send a personalized message, which will be sent via email. 13. Add Notes: You can also add notes to the page by clicking the associated Expand link. A text area will appear where you may add notes. These notes will not be visible by users.

Display Options The Display feature in Mura CMS allows you to control whether or not a specific content item is on display. In addition, you can select some basic "recurrence" options. To manage the display attribute, follow these steps:

1. On the Publishing tab, select Yes, No or by Per Start / Stop Dates in the Display field.

2. If Yes is selected, the content will be displayed on the web site.

3. If No is selected , the content will not be displayed on the web site and the content item will not appear in navigation. If a visitor to your site stumbles across the content, they will see a "Content Off-Line" message.

4. Select Per Stop /Start Dates to enter a Start Date / Time and End Date / Time for the content to display.

Display CA

Per Stop / Start Dates

Start Date / Time

10/01/2013 12 t 00 t AM

Stop Date / Time

10/08/2013 11 59 t PM

Display Interval

Daily

38 4.1. The Display Interval controls the recurrence of the display. Multiple choices are available in the select list.

Daily

Bt-Weekly Monthly Weekdays Weekends Every 1st Week of Month Every 2nd Week of Month Every 3rd Week of Month Every 4rd Week of Month Every Last Week of Month

39 Publishing Options There are a few publishing options available when creating content in Mura CMS.

1. Save Draft / Save Draft & Preview: Save Draft allows you to save a temporary, non-published version of content for later editing or approval. Draft versions are available for review via the Drafts menu, Site Manager or Version History. Save Draft & Preview does the same thing, and in addition launches a modal popup window with a preview of the content in the drafted version.

2. Save to Change Set: Change sets allow you to simultaneously publish multiple pages of content at once. You can save content to a Change Set by clicking Save to Change Set at the bottom of the Edit Content screen. Like regular publishing, you publish Change Sets manually or set a specific publish date.

2.1. The option to save to a change set will not appear unless the Content Staging Manager is enabled and a Change Set is created. See the section on Content Staging Manager / Change Sets for more information.

3. Publish: When editing or creating content, clicking the Publish button will make that content "live" and its status will be set to "Published." This action will also remove any Draft versions of this content.

40 Version History

Each time content is published, a new version is created and the previously published version is archived. Each version of the content is available for preview, editing and publishing through the Version History menu.

To access Version History for content, you can follow these steps:

1. From the Site Manager, click on the Version History icon

2. This will display the Version History list for that content.

Version Hatoi

Notes Change Sat Status Dkadtay Oblects Feature New Update The Author/Eder

Pub,liAed ••n CI V 01t1 0,7013 9 55 PM Admm Use,

Archive 01/10,2013 4'55 PM System

3. Clicking Clear Version History will remove all Archived versions.

Rolling Back to a Previous Version To roll back to a previous version, you can follow these steps:

1. Click the edit icon to edit an archived version.

2. Publish the content after making your edits.

3. The version most recently published will become the Published version and the previously Published version will become Archived.

41 About Us This section will focus on building the About Us section. For these steps, you will need to access the sample content located in the accompanying mura-admin.zip file.

Select Layout Template If you haven't already done so, follow the instructions from Selecting Layout Templates and apply the three_column.cfm template to this page.

Adding Content to the Page In many organizations, it is not uncommon for someone to send either a Microsoft Word document or some other word processing file to an individual who is responsible for updating content on the web site. If you are not careful, when you copy and paste text from another software program, you may end up with text that contains a number of odd looking characters and undesired formatting.

This happens because copied text often contains formatting that comes along for the ride and can wreak havoc on your site's formatting in the process.

To avoid this issue, the recommendation is to simply avoid pasting formatted text into Mura. Instead, we recommend following the steps outlined below.

Let's add some content to the About Us landing page.

1. Open the about-us-landing.doc document from your sample content folder: /1-mura-admin/sample-content/about-us/about-us-landing.doc

2. Select and copy the content from the about-us-landing. doc document.

3. On the Basic tab of the About Us Landing page, scroll down to the Content field.

42 4. From the Content formatting toolbar, select the Paste as Plain Text CO button.

5. Paste your content into the text area in the pop up window and click OK.

Paste as Plain Text

Because of your browser secunty settings, the editor is not able to access your clipboard data ol weedy. You are required to paste it again in this window,

Please paste mode the following box using the keyboard (CtrUCmd+V) and 0001(

Cancel C4( •

6. The content should appear in the Content area of the editing screen without any formatting.

Content

g, r„ i v. B/US a a,

E V — S2 a? - situ • :; v0 ?

1psum dolor sit amet, consectetur adipiscing alit.

'Avernus elementum volutpat eros, tic dictum uma mat% id. Quisque henclrerit mi vitae ads:name ullarncorper, orci mi pulvinar nisi, sit amen lacinia neque eras vehicula pro. Pellentesque luctus arcu ut scoot sagittis. Suspendisse in Villa vel arcs elerfend ferrnentum. Mauro viverra placerat taCulis.

Lorem ipsum door sit amet, consectetur adipiscing

Ut commodo quam at ela accumsan eget tempos ieo lemma. Integer adipiscing tram quo dui Moncus adipiscing. Donee qua sem at amen neque biandit tempor. Duisque vitae justo dam. Sad Winces soil:caudal nisi, O mortis purse mementum consequat. Quisque eta mi, gravida eget viverra urea, Porttitor consectetur gigot. Sad hendrerit mates nisi vitae societies. Suspenclisse potenti. Aenean soilcaudin quam biande purus vestibuturn laoreet nen pnaretra nisi per Inceptos remenaeos. Cum socis natoque penatbus at magnis dis parturient monies,

Class aptent tacit sociosqu ad lava torquent per conube nostra

nascetur ncliculus mus. Warn ac menus haute. Praesent semper placerat lacers, in laoreat tortor auctor Vestibuium ut nulls purse. elementurn trodunt masse. Maoris es Orem roue. Vestibulum ante plasm prima in faucibus orci luctus at urtrices posuere cubitia Curae. Cum was flatness penatbus et magnis da parturient monies, nascetur ridculus mus. Nulla est justo, elementsm eget dignissim at. mates see fetus. Maurts fells justo, tristdue vitae egestas vestibulum, bibendum see augue. /skint consectetur alit consectetur nuila dictum vestibulum. Sed nec enim In pious egestae placerat Warn neque vela, euamcd ut pnaretra ut, dictum id turps. Donee eget mi *um. Quisque eget peSentesque nisi. Fusee at ante eros.

cony p

43 7. Click Publish to see your results so far. As you should see, the content is not formatted exactly the way it appeared in the document that it was copied from. We'll fix that shortly.

1111111111 11111111111.1111111=gout

Ho,. 0000, Us

About Us Lorem ipsum dolor sit arnet consectetur adpiscing ells.

Vivarus elementum volutpat eros, ac dictum uma matt id. ChliSqUe herders, ml vitae adpiscing ulaimcorper, orcl ml putonar nisi, sit 00181 lacinia neque real vehicut oral. Peifentesque luctus arcu ut ante auctor sage:tea. Suspendisse al egula vol area etlend ferrnenturn. Maude chrerra 0800100 tourist.

Lorem ipsurn dolor slt aPlet, consectetur asiblacIng ells

Ut caroled° quam at alit accumsan eget tempus leo twist. Integer adipiscing enirn guis dui Monaca asipiscing. Donee wits sem sit amet neque blandtt tampon. Caltque vitae WO ream. Sod ultices sollcitudIn nisl, id moles purus etementurn consequat Oursque 810 m1. gravtda eget vterra 0100, pontror consectetur Nam. Sad hendrent maths fist. vitae sodales. Suspendisse potert. Aenean sollicttudin quern biandlt norm 0estitaitum laoreet nee pharetra nisi. per inceptos hirnenaeot Cum soots naloque penstbus et magma clis parturient monies,

Class aptent tact SOCIOSPIJ ad kora tonauent per conubia noses nascetur nclicAus mus. Nam ac meals Rowe. Praesent camper pLacerat lectus, m larreet trent. auctor in. Vestibulurn of reale purus, element," tincldunt mesas. Mauna eu "prom rtsus. Vestibulum ante !mum went In taucibus orci Nctus et uitrites posuere cubdie Cures; Curn soars natoque peratibus et magnis its parturient rnontes, nascetor rdtculus mos. Nulla eat junto, elernentum eget dignissim at, rnattis sect locus. Maury felts Nato, tristique vane egestas vestbulum. bibendum sad augue. Nunc consectetur ells consectetur nulls datum vestibulum. Sod net erten In panic egestas placerat. Nam neque vent evismod lit pharetra lit, dictum id turps. Donee eget mi ipsum. Cluisque eget petlentesque nisi. Fuece at ants eras.

44 The WYSIWYG Editor (CKEditor)

1.1 tr3

9 17:1—c2 ?

The WYSIWYG Editor is a visual editor which allows non-technical users to format various sections of content within Mura CMS such as the Summary and Content (Body) areas. Several of the buttons are similar to that of a standard word processor. However, there are a few buttons you may want to familiarize yourself with:

1. .440) Add Internal Link: This button will add a link to another page in your site. The features that make it different from the Hyperlink button is the search feature which helps you select exactly which page you would like to link to.

When adding an internal link, a search dialog will appear. Type in a keyword or phrase for the content item you would like to link to and press Search. A list of results will display. Select the radio button associated with your desired content item to add a link to it.

2. Insert Component: This button inserts a pre-built component into a page's body content. This component can be edited and manipulated within the visual editor. See the components section for more information on components.

When clicking this button, the Select Component dialog will appear. Select your desired component from the list and click OK. The component will be inserted into the content box.

45 Front End Editing When logged in as a content manager, there are a couple of ways to edit content. On the Front End Toolbar, hovering over Edit will reveal the front end editing options: Full Edit, and Quick Edit.

Edit Add Version History (Mete Site Manager

Full Edit The Full Edit feature launches a modal window which contains the same Edit Content screen found in the back end admin area.

Select Associated Image to Upload n

Lege

notated Ce.ora S.mm,

•dvenced (71 a 4

P.g.r,ng

Make your desired changes, then scroll to the bottom and click Publish when finished.

46 Quick Edit The Quick Edit feature allows content managers to make minor edits to either the page title or content body area.

About' Us Loran ipsom dolor at erne!, consactatur ateptscsag egt Varaintis alernentum voknpat erns, so dictum urea mates Quietus rienctrent tnt vase eattataatn9 utt....Vert mt.; Putt'''. nit edemas actors neque feat vehlcula oral. Pe-tante:ague luctua arcu ut ante auctor say Ittns. Suasendese a tigula .1 stow etelenta ferments, ra starts swami placerat acute

When you click Quick Edit, a blue Save button should appear on the front end toolbar. After your changes have been made, hover over the Save button and select your desired option.

••••n N 9 fie — I Ig - was .

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

taat ores, ac sedum urea mania Id Quaque henettent, a g vilaracarper, oral oat punnet net, se &Tani contra neque era! vetscula oral. Pellentasque 14C418 arcu ut arts I avatar eaglets Suspendasse n a vet arcu eletfend rmtantum t Mauna tonere placerat acute.

Lorem mourn dolor sit amen, consectetur adipiscing

ut comm.:to quart at art accumasn ages tampua leo lace a ststacmg anon gum dl teaacus adtplacing, Donee gals

47 Formatting the About Us Content Now that the content is on the page and the correct template is applied, you will want to format the content to match the content document.

1. On the Basic tab, scroll down to Content.

2. Select the "Show Blocks" icon •=11 from the tool bar to display the paragraph breaks in the current content.

3. At the end of each of the paragraph headings in the content hit "enter" on your keyboard to ensure a paragraph break is between each heading and the text below it.

Content

ti a ra 8 I 11 5 x,

El 9 n—o s^yk,s - Formal -

Loren iosurn dolor sit arnet, consectetur adipiscing

VNamus elementum volutpat eros, Sc dictum uma maths I. Quisque hendrertt, ml vitae adipiscing ullamcorper, orci mi puivinar nisi, sit amet lacinia neque erat vehicula orci, Pellentesque luctus arcu et ante auctor sagittis. Suspendisse in ligula vel arcs eitattend termentum, Mauris viverra placerat iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing alit.

Ut commodo quarts at alit accumsan eget tempus leo lacinia. integer adipiscing enim qua dui moncus adipiscing. Donee gum tem sit amet neque blandit tempor. Quisque vitae justo diam. Sed ultrices soilicitudin nisi, id molts purus elementum consequat. Quisque alit mi, preside eget viverra porttitor consectetur ligula. Sed hendrerit mates nisi vitae sodales. Suspendisse potenti. Aenean sollicitudin swam Wendt purus vestitrulum laoreet nec pharetra nisi. per inceptos himenaeos. Clint sociis natoque penatibus at magnis dis parturient montes,

Class apte^t tac,t1 sociosqu ad lhors torquent per conubia nostra

nascetur ndiculus mus. Nam ac metes ligula. Praesent semper placerat lectus, in laoreet tortor auctor in. Vestibulum Ut nulls gurus, elementum tincidunt mesas. Mauris eu Imam MIS. Vestibulum ante ipsum primis in taucibus orci luctus at uttrices posuere cubdia Curae; Cum soctts natoque penatibus et means dis parturient montes, nascetur ridicules mus. Nulls est justo. elementum eget bvly

4. Click inside the first paragraph/line of text and select Heading 2 from the Format drop down.

48 5. Your formatting changes will be reflected in the content editor.

Lorem ipsum dolor sit amet, consectetur adipiscing

Vivamus elementurn vciutpaz eros, ac dictum urna mattis ia. Ouisque hendcart mi vitae adipiscing ullamcorper, orci mi pulvinar nisi, sit amet lacinia neque erat vehicula orci. Pellentesque Rictus arcu ut ante auctor saginis. Suspendisse in ligula vel arcu eleifend fermentum. Mauris viverra placerat scuts.

6. Repeat this step for each heading within the content, selecting different heading styles. While you're at it, remove any empty paragraph blocks and style the content as you wish.

Lorem ipsum dolor sit amet, consectetur adipiscing eliL

Vivamus elementum volutpat eros, ac dictum urna mattis id. Quisque henorent, mi vitae adipiscing uliamcorper, orci mi puivinar nisi, sit amet lacinia neque erat vehicula orci. Pellentesque luctus arcu ut ante auctor sagittis. Suspendisse in liguta vel arcu esifend fermentum. Mauris viverra placerat

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut commodo quam at alit accumsan eget tempus leo lacinia. integer aolpiscing antra quis dut rnoncus appiscing. Donec guts sem sit amet neque blandit tempor. Quisque vitae justo dam. Sed ultrices solhcitudin nisi, id moths purus elementum consequat. Quisque alit mi, gravida eget seems vitae, porttitor consectetur hgula. Sed hendrent malts nisi vitae sodales. Suspendisse potent. Aene n sollicituon quern blandit purus vestibulum laoreet nec pharetra nisi. per inceptor himenaeos. Cum soc ,,s natoque penatbus at magnis dm parturient mantes,

Gass aptent taciti ociosqu ad Mora torquent per conubia rostra

nascetur ridtculus mus. Nam ac metus ligule. Praesent semper placerat lectus, in laoreet tartar auctor in. Vestibulum ut nulla purus, elementum tincidunt massa. Mauris eu lorem risus. Vesubulum e ipsum points in faucibus orci luctus at uttrices posuere cubilia Curae; Cum sociis natoque penatous et magnis cbs parturient monies, nascetur r,C1CulUS fruS. Nulla est justo, eiementum eget

49 7. Click Publish and preview the page to see your results so far.

About Us Loren raster dolor sit ante, consectstur adipiscing elit VnapetAs Cement= VOlUtost eras, ac Cot, urea reatts Ouegue nenclreNC mi vitae ataceting tilanuorper, ord.", p.m..., sa amet peg.* twat vaNctle ededesous 000015,00 Ut ante auclar SuSpenasse VA vet arcu teased ferment.l. Mauna 0,05115 placerat tools.

Lorem ipsum dolor sit emelt consectetur stapiscing eat

Ut comet:AO Wan at al aCttarneen eget %Mau% en ecInte,Inamer asmorma atm pu0 acapacing. Donoc gull sae el meet naque Cent lempo, 0110010 1,60 ludo dem, Sod Oakes sotacitutlm ns5 01,0151 woe element,' coreequat, OuisaJe mi, gray. net 0,05

Clara aptefltiscal seciospu ad boors Sorgeent pee cambia nose,

neePetur riaa.9 ma& Nan sO Melva 091200 Preaaant Manger placalet ieCt... 01 1501051 01,00 010100, Vestibdurn 0011205 e.t.a, dement. Mc.. wets& Meal. so Warn tug. Valteaulurn ante lawn pane WI aucibus orci Nate et ...algae peauere Cubka Cur.; Gum e0000 natogua panel,. et magnis de 50180,611 010(0S,. ratc..u• MAS 803n es! pee, e.roanturr eget clgnie.m Cl mettle .60 1510,. Vault *is juatc, Obe egeales veatetaurn. dloanaum 060 .600. Nund consectolur CII cone.ectet... nub =tun 0000.05 10.0 00n in po0 mesas muerte. Nam nem, ,t1 a, P11 P111101 III Clamart Macs. 0 anti, Dane eget rni fpirt, (Msg. eget MS!. RISC., at ante ergs.

50 Adding Images to Content The about-us-landing.doc file includes an image. To add those to the content, follow these steps:

1. On the Basic tab, scroll down to the Content field.

2. Place your cursor in the location you would like to place the image.

3. Select the image icon from the editing toolbar.

4. This will launch the Image Properties dialog window. Click Browse Server.

Image Properties

Image Into Link Upload Advanced

URL Browse Server

Alternative Text

Width Preview Lorem ipsum dolor sit amet, consectetuer adiptscing Height a d elit Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commode non, facilisis vitae, nulla. Aenean dictum lacinia tartar. Nunc lawns, nibh non laculis aliquam, orci felts euismod neoue„ sad omare massy mauns sad veliL Nulla pretium ml et rises. Fusee mi pede, temper id, cursus H Space ac, ullamcorper nec, enim. Sed toner. Curabitur molestie. Outs velit augue, conchmentum at, ultnces a, luctus Ut, orci. Donec peltentesque egestas eros Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus just quis ligula. Etiarn Alignment eget toner. VeSUbulum rutrum, eSt ut placerat

Cancel

5. The Images folder should open and any images that have been uploaded by this method, will be displayed here. NOTE: This is not the same as the Associated Image field and any images uploaded as a primary associated image will not be displayed here.

6. If it does not exist, you can Upload images through here to use in your content.

51 7. If you have not already done so, upload the about-us-landing1.jpg file located in the /1-mura-admin/sample-content/about-us/ directory.

0 r` CKFinder L radinin tasiis'woigetsickfingerickfirider,hhhitH t -Otkolhold-2&type Hmages&CKEdenr-botiv&CK Folders RefreSh Segines iUrnvrs i PS, images

MouWe4sndin0100 5102013 021 PM 37 KB

1 Be

8. Once the image is uploaded, then you can select it by double- clicking on it.

9. The image should appear in the Preview window within the Image Properties form.

Image Properties 0

Image ^s LJOI0ed Advanced

URL klefaultlassetclmagetabouSus-landingt.jpg Browse Server

Alternative Text

Width Preview •75

Height fit 42

Border

ilSoace

VSpace loom irISUM dolor sit amet consectetuer adipacing alit Maecenas feugat Alignment consequat diem. Maecenas metus Vivamus diem mous, COWS a. commodo non, facIlists vitae, nuile. Aanean dictum lama honor. 9unc laculis, nibh non

Cancel OK

52 10. You can add Alternative Text (alt tags) for the image as well as adjust the Height and Width of the image.

11. Click OK to insert the image into your content.

12. The image will be inserted in the location of your cursor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus elementum vOlutpat eros, ac dictum urna malts id. Quisque hendreril, mi vitae adipiscing ullamcorper, orci mi pulvinar nisi, sit amet lacing neque era! vehlcula ord. Pellentesque luctus arcu ut ante auctor sagittis. Suspendisse in ligula vel arcu elerlend termentum. Mauris viverra placerat laculis.

Lorem ipsum dolor sit amet, consectetur adipiscing

Ut commodo quam at ellt accumsan eget tempus leo lacinia. Integer adipiscing enim quis au, rhoncus adipiscing. Donec quis sem sit amet neque blandit tempor. Quisque vitae justo diem. Sea uttrices sollicitudin nisi, id monis purus elementum consequat. Quisque alit mi, gravida eget viverra vitae, pornitor consectetur ligula. Sed hendrerit mates nisi vitae sodales. Suspendisse potenti. Aenean sollicitudin quam blandit purus vestibulum laoreet nec pharetra nal, per inceptos himenaeos. Cum its natoque penatibus et magnis dis parturient monies,

Class aptent taciti sociosqu ad Rota torquent per conubia metre

53 13. To align the image correctly, click on the image in the content field and select Align Image Right from the Styles drop down.

t:a EJ Source X à e , 8/us x, x'

/7 M

135$ 71.7.7t10,1D-= lm Ac Ia . Mead,no 2 "

Ob$oa Styles

i g Lorem ipsum dolor sit amet, con Align Image Lett slit.

Weamus eternentum volutpat eros, ac dictut Align Image Right e hendrerit, mi vitae adipiscing utiamcorper, orct mi puIvInar rttsi, amet Is '-"-ntesque uctue sit Ahgn Image Right arcu ut ante auctor eagittis. SuspendIsse in Souks Online Woo nestels viverra piacerat laculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

tit commodo quam at elit accumsan eget tempus Sec lac tnla, Integer adipiscing enim quis dui rhoncus adipiscIng. Donee quis sem sit amet risque Mande tempoe. Quisque vitae Justin, diam. Sed uttAces sollicaudin ntel, Id motIls purus elementum consequat. Quisque out cm, gravida eget viverra vitae, porttitor consectetur liguia. Sed hendrent maths nisi vitae sodales. Suspendisse potenti. Aenean sollicitudin quam blandit purus vestibulum laoreet nec pharetra nisi, per inceptos tyrnenaeos. Cum sociis natoque penatibus et magnis (its parturient monteS,

14. The image should now be right-aligned within the content.

15. Click Publish, then preview the page.

nosh us

mme Atm, Us About Us Lorem losum dolor as arnot, consectetur eainiseine Momentum voluMat ems, so Maar urns maths id. aunscsie lumbert, mi vase stlpiacing Ammon:es, ornmrteMrsoflIS. 0, 0,0,1 IMMO NW, met vanicula orcs Padenteseme Was alms Mente suctor sag.. SuspemiSsOnliguM val ems alesamcf fermentsr. Mathis warps Mame. isculgs, Lorem Immo dolor sit met, oonseetetur ediploolng ell. Si comfy,. scam at su accemsan eget tempus leo Sone. Integer adMacing arm pals MS rheemus eapiseng, DoMm glo w,, Mame news dartat tamper 5.10,10 0100 Into Item Sad WM., WIC.* MC Id maSIS purse Menmslum consoquat QM"oo ml, grevide eget Use,?, vase. pole. consectsisr guS. Sed harldall mettle Mal vase sods.. Suspend* po.S. AStle811 ace..., quern Nana eons vestMmlum leornet ses Mere. MM. per InssMos hImesesos. C. Bosh natOque pareatxm et mesmS do peraireM mantes. Class apt. 100111 socloaqu ad Mora tolluent per cambia rostra

54 Add Pages Below the About Us Landing Page To add pages below the About Us landing page, follow these steps:

1. From the Site Manager, mouse over the plus sign next to About Us.

2. Click Add Content, then select Add Page.

3. Enter the Title of the page in the page title field (e.g., Our History).

4. Publish the page.

5. Repeat this step for each of the following pages:

5.1. Our History

5.1.1. Go ahead and try adding the sample content provided in the accompanying .zip file as well.

5.2. Board of Directors

55 Adding Sub Navigation Most sections below the Home page contain sub-navigation in the left sidebar area. To add navigation to a section (e.g., About Us), follow these steps:

1. From the Site Manager, click the title of the page or section that you want to edit (e.g., About Us).

2. Click the Layout & Objects tab.

3. Under Inheritance Rules, select Start New Cascade.

Inheritance Rules 0

Inherit 0 Start New Do Not Inherit Cascade Cascade Cascade

4. From the Content Objects select menu, select Navigation.

5. The available Navigation content display objects will appear.

Content Objects

Available Content ()elects

Navigation

Folder Navigation Multi•Level Navigation Peer Navigation Sequential NV Standard Navigation Sub Navigation

56 6. Select Standard Navigation, then click the right arrow button to assign it to the Left Column Content Objects display region.

Content Objects er, (;0 ,

Navigation Standard Nay.gaton

Folder Navigation mob - Level Navigation Peer Navigation Sequential Nav Standard Navigation Sub Navigation Mawr Gonlent Content Objecrs

Mittit Column Content Otyeef

7. Click Publish, then preview the About Us section. Sub-navigation should now appear in the left sidebar area of the About Us area.

Abouttis•

About Us

LOU. ipsum dolor ad amet, consectetur adipsang alit

Veernus eiemeezum area, ao Man: erne need to Ou se. ie.., set rites agigisceg uleireoreee ma. mi weenie rise id atne: eerie nee,* mat veleum die:. geletresque idens act ui are mutton seg.. Susweisse m tigula arcu slaters eriinegern Miens ruin, placerar ages

Loren ipsum dolor sit smet, consectetur adipiscing slit.

td. eenereee Lee, eLt aceumsen eget curneue leg lac. Imarge adeiseing erg, gee dui Morelstap Led. Dere< ges um se enge neuee donee mingor. ;u. A( awe. Zed Wee, S.,. net. el geo. one.. guide. al, grevaa asst viesiee Leae. pole goose.. Ipula. Sea gene. deto eel Ade suttees Se eeeresse pat. Aegean sogeguren gun tend, gurus taste ., domed net pewee eat den ince/. hireenaeas Qum socie retteue p,atireis megne Les pane ient monies,

Class Went teciii social. ad litora tone,ent pet comb. nostra

57 Board of Directors Throughout the Internet, it is not uncommon to see a landing page that contains a listing of content that lives beneath it. For example, news sites, blogs, etc. In Mura CMS, there is a special content "Type" called Folder that does exactly that.

The Board of Directors landing page is going to be a collection of directors that displays a thumbnail image, name, title and summary of each director. This content node should be set up as a Folder rather than a Page in order to dynamically aggregate the director's summary information within this section.

Changing Content Type from Page to Folder To change the content Type of the Board of Directors page, follow these steps:

1. From the Site Manager, select Board of Directors below the About Us section.

2. On the content editing screen, select Folder from the Type select menu on the Basic tab.

Page if Folder Calendar Gallery

3. Click Publish.

4. The icon next to the Board of Directors content node in the Site Manager view should now look like a manilla folder.

TN* Uochned

01 , 62013 ,..01,E6PM jegio

01/162013 7', %2, 1, IQ pg. 0 01,144+0136:4;214PM /014 Ir 0

Add Pages to the Folder A Mura CMS Folder dynamically displays the title, summary, thumbnail image and a link to read more for each content node listed beneath it. In this example, you will be adding a new content node (Page) for each Director on the Board of Directors. Refer to the sample content found under /1-mura-admin/sample- content/about-us/board-of-directors/ from the mura-admin.zip file. 1. In the Site Manager, mouse over the plus sign next to the Board of Directors Folder. 2. Select Add Content from the menu, then click Add Page form the Select Content Type dialog window.

3. The content editing screen will appear. 4. Complete the following fields 4.1. Title: Name of the Director

TAle

4.2. Associated Image: This allows you to select a single image and Mura will create a thumbnail, medium image and large image for the selected image. For this example, use the sample images provided in the Board of Directors folder.

Select Associated Image to tiptoed

L'!uo >e File fetid Loostnu Image

4.3. Summary: Enter a brief description of the director.

Summary

; s 10,

1. fri 9 7 — 51 4

Executive Director Vivamus elementum volutpat aroe ac dictum urna mattes a. Quisque hendrerS, ml vitae adipiscmg tilamcorper, orci mi putvmar nisi, sit amet lacinte neque eras vehicula ore:.

59 4.4. Content: The content included within the sample document (bodl.doc)

Content

in 11 ck T„ ^ BJ!S x.

LiH 9 r-n - ?

Executive Director

Office 916-555-12'2 Mobile' 915-555-1,-13

Professional Background

Vivamus elementum volutpat ems, an dictum urns mates dd. Quisque hendterit. en vatte adin'scing utlamcorper, orcl mm puMnar MN, at amet !atom plague Brat vebicula OrOL Pellentasoue t.actus arcu ut ante auctor webs. Suspencasse km rgula eel arcu eleifand fermentum. Maude v nverra placerat ecmJlln

Education

5.5 Business Admmistration -UCLA - 1998 MS. Economics - Harvard • 2002

Follow Me

Ureter - twater.comfjohndoe Facebook facebook.comtphndoe

body •

4.5. Click Publish.

60 4.6. Since an Associated Image was uploaded, the Image Details screen should appear. image Details

c•Dmort

badl .ipg

Adjust Image Orientation

Small (80430)

Medium (180x180

Large (AUTOx600)

4.7. From the Image Details screen, you have the option to Re- Crop the image for any of the default image sizes (small, medium, large). 4.8. To Re-Crop an image, click the Re-Crop button to launch the cropping dialog window.

61 4.9. Click, then drag the cursor over the desired portion of the image. bodtjpg

4.10. Then, click Apply Cropping to save the cropped image.

Medium (180x180) 0 ,if,f;r1

62 5. Preview Jonathan Doe's page.

,Alta ko, LiocrolotLNercr,i John Doe

Executive Director

,LoLo doLoCwo..- crr 916-565-1212 910-555.1213 Professional Background

Warm, eierrerturo Lrofut0at erns. as Ctcturn Lona ova. M. Qum,. heroreot rm as acoasotng ,Okoricarpor, arc. mi POvroar rliaL. sat arnel lacr. Roque vat var,c131a ores. Pallantesqua arcu W ante aucar aagba. Suspandissa arcL ales. farmanaon. Mavis Livery. plaCeral

Education

BS. Business Aum oL.81,0nL - UCLA 998 M.S. EL:coo/mos Naroard 2002 Follow Ms

,war • v....cc:47,mm. FaeoCedo • .0,:otedt...,m000ncloo

6. The Board of Directors Folder will be updated to reflect the newly added content node.

bout

Board of Directors

John Due EXOCO6V0 Drector ?Wren,us elonerlom volutpat arc, at tictum urns ma* 9L OLOaqua hancleart, re vitae aciaiscing LOlarrcarpar, arc, rni pLOvanro mai, sot mat napLle ant vith.OLL or,

7. Repeat these steps to add Marty McNeil. 8. Remember, you can adjust the order of the directors using "click- and-drag" and then clicking Update to save the new sort order.

Board of Directors

Erte,tm atom: .111.5 *mentor ac dem Lora truP.La tl. Qtastpe !Land., rni ogee atioiaC ,n9 0140,,OrPar• Lacoia neque mat vehrtaa act.

Marty Male Wce President Vivamus o/ornentum vatut0at ems. ac COCUrl uma 1/111100 OLOtoalot honarartt, all Vat acapac.p uiarromper, mat m, pulvinar o9, Slam, snots rep. atm .411:LICLila Cott

63 News Much like the Board of Directors section, the News section is an aggregate display of news items listed by release date in descending order. In addition to the news item listing, we will also add a category filter to the News Section which will allow site visitors to find news items which match their interests.

Changing Content Type from Page to Folder 1. From the Site Manager, select the News section.

2. Set the Type to Folder.

Page Folder Calendar Gallery

3. On the Layout & Objects tab, click Start New Cascade, and assign the Standard Navigation content object (found under Navigation) to the Left Column.

4. Click Publish.

Adding Pages Below The News Section 1. In the Site Manager, mouse over the plus sign next to the News Folder.

2. Click Add Content, then select Add Page from the Select Content Type dialog window.

3. The Edit Content screen will appear.

4. Refer to the sample content included in the mura-admin.zip file to add a few news articles.

5. On the Basic tab, complete the following fields:

5.1. Title: The title of the news release (e.g., Widgets Proven to be Easier to Use Than a Can Opener).

64 5.2. Associated Image: Use the photos included with the sample content (e.g., news1 jpg, news2.jpg, etc.)

5.3. Content Summary: A brief description of the news item.

5.4. Content: The content copy included within the sample documents (e.g., news1.doc, news2.doc, etc.)

6. Select the Publishing tab, then complete the following fields:

6.1. Credits: Enter the name of the author (e.g., John Doe).

6.2. Content Release Date: Simply select a date from the calendar.

Content Release Date (Optional) 0

10/08/2013 12 t 00 t AM

0 Oct t 2013 t

!flea Tu W. Th Fr 8.

1 2 3 4 5

6 7 CI0 10 11 12 et Parent)

13 14 15'"

20 21 22 23, 24 25 00 t AM t 27 28 29 30 31

7. Publish, then Preview Page. 1111111111111111111=1.111111111111111.1111111.1111

Vids018 Paws+ to tie Esser to lse. TA Be EnSer TO Lkla ,an Can I, Then A Celn COW. Widgets Proven To Be Easier To Use Than A Can Opener

Leldel ipwm aNrx sa amez. consectatur adlptelng Me/ vei Worn at est .u. uancts. Ctirabitra ac Nam a mew. Sletque vNefre. 1700 ,e1:111 Le. et 0,g, .*pissing WIC CAMS ;n leo .0 mesas egestas ...rm. Num CO/Webe tamrencoset w: scesnspue 00425. SYSeerellefe ere mountu. rmus s000los sagrtt,s. vei pat. ants eeleet.,eleroe venens,e ,:ar,us ,eLguat cemernum 0onsesalt sculs. Phaseilus ass ;use' =0 Don. commcoc. Id amet venens. sodSas, , bero en,r, veree1011 are a , ,orern nulla qute erien. [tam abounm metes et puetie laucious sad matte ,eo .1uutate. Integer ruUurn APCesapen, 9961 110ero slicsam et, Vesatasum ntei augJa. w cor. a aunc. 0114,1131 veqnnstes reup.at ots non ponies. Malec el ip50r0 sit amertemis con.. 1/150(7,1a if: et ;Bale

Etiare gray. mews au est sampan rowan. ilyanaia aril Lama, pate», non tsrpor a, var,ue tent>, Prase.< or reale. Vat Vivamua Vauerra as au ports mates vet osmsh,pet CMS WS intro In aft comstim Isomer. GU et n••ntl gray eht lebonts patitsf. Kara vitas .1 quart, non tinckhnt ado. Dan. :sewn lacus, asaies,atle vaa coodrnenS,n u,s,orstr as Oda. MAW", amble eV 51 0:017 0onsimertur seglpn sent. 0011110000.00001100101100513010,10105.000501501

65 8. Preview the News Folder to see how the news article appears. Note that the Credits and Content Release Date appear along with a thumbnail image, Content Summary, and link to Read More.

News

Widgets Proven To Be Easier To Use Than A Can Opener Loren, enure dale, en erne: cones,-tater acleeseeg Meta m1 ,eera es; metes uenc,es. Come. , se darn a magna lesteue wane. Lore,/ ipeor dolOr met, cortaectete eeeptecIng eft Ores in Ica quis metes ettes.e &Wee Reee *Mee key Jeen Ihee

Dee,u1; 2013

9. Repeat this process for any other news articles you would like to add.

IOU

News

Kids Like Widgets More Than Video Games leer Ur dolor se Wee*. eenfeelette reeplaciog 01e. Nu% III mere at eet eCulie trot.. Centel., ac dem Is mare Veeps warn, totem room Wee ft meet, comeectettir adpiselne ent. eats ie lee tees mete egestas ateeer.

nee, Wee 14 Jaen Use

Laptops and Widgets Make Good Holiday Gifts Lamm ie.., dolor Mt Veal. coesecteee aaneecing er ,t. Nuna vel Were et Acuff Leeleies Doom. se

Widgets Proven To Be Easier To Use Than A Can Opener .11 are °sum dolor 14 env!. comet.. edipecng el. Nutt vie Ideere at ps.en deer se met, consenete ediescing ea. Greg In leo this rneNea egesees Reeve,

ey bin Dee

66 Content Sorting Mura includes various sort options that control how content on your website is displayed.

All top-level pages, or anything directly beneath the Home page, will always be Manual. In fact, the default sort order for content at all other levels in Mura CMS is Manual. With this option, you manually control of ordering content nodes which will affect how they are displayed on the front-end of the website.

However, Mura CMS offers other methods to sort content as well. Selecting any of the following values will sort content items in the specified section of the site as follows:

1. Manual: Sorted by manually dragging and dropping content items, then saving the sort order by clicking Update when finished as you did in the Setting Page Order section. Any new content items will automatically appear at the top of the list.

2. Release Date: Sorted by the value entered into the item's Content Release Date form field.

3. Last Updated: Sorted by the date the content item was last updated.

4. Created: Sorted by the date that the content item was originally created.

5. Menu Title: Sorted by the value entered into the item's Navigation Title field on the SEO tab.

6. Long Title: Sorted by the value entered into the item's primary Title field.

7. Rating: Sorted by the average number of stars the content item has received as voted on by site visitors.

8. Comments: Sorted by the number of comments the content items has received.

Each of these options can be sorted either Ascending or Descending.

67 Using the News Folder that you created earlier, let's change the default sort order from Manual to Release Date, Descending. This way, the newest article (based on Content Release Date) will appear at the top of the Folder's list of items.

Changing Sort Order 1. From the Site Manager, hover over the plus sign next to News and click Zoom

• 0. Zoom

• -r♦ Add Content O „. CFI Copy 0 Js Copy All O

2. Click Modify View, then select Release Date from the Sort Navigation select menu and select Descending for the Sort Order.

∎

Rows DiSakaked Manual 20 Release Date Acro1' r, Update Last Updated o 173 Laadoos and Widgeti Created 01/Igt2( Menu Tire • 17) Widgets Proven To Long Title V 01/10r2

Kids Like Widgets M o D :iRa 'o'dQneriis

3. Click Update to apply your changes. When using this sort option, you will want to make sure you enter Content Release Dates to your pages. This date is displayed on the front-end of the site when viewed on a Folder, along with other summary information.

68 Category Manager Mura CMS enables you to create a hierarchy of categories, and then assign content items to one or more of those categories. By categorizing content, you can create unique indexes or collections of content items that you can use throughout various sections of your site to highlight content. In addition, Mura CMS offers a built-in category filter as a display object that site visitors can use to drill down to content that might be of interest to them.

To view the Category Manager, click Modules, then select Categories from the primary admin navigation.

Modules

Content Staging

Components * Gefirethis N Content Collections

Forms

Ale Manager

Plugins ►

Within the Category Manager, you can create, edit , or delete categories. You can also add sub-categories, which become nested just like pages in the Site Manager. There is no limit to the amount of categories or sub-categories you can create.

69 Creating a Category Filter The sample project specifications include a categories filter in the right column of the news page.

In this example, we will create categories, categorize content and apply a Category Filter display object on the News Folder. To create categories, follow these steps:

1. Click Modules, then select Categories from the the primary admin navigation.

Modules Us

Content Staging

Components Camplet N

Content Collections

Forms

File Manager

Plugins

2. This will display the Category Manager screen. 3. Select Add New Category. Category Manager

0 Add New Category Permissions

Add New Category Ca

4. This will display the Add Content Category screen.

Add Content Category

0 Sack to

Name

URL Title

Patent Category Catogorylla

Is man an Interest Group? Allow Content Assignments? ActWe?

Restrict Acmes to Space. Groupls1?

Glehet Settings AI ow A, Groups kes, , A, :I/ours

Notes

4.1. Name: This will be the name of the category. 4.2. URL Title: If you leave this blank, Mura will automatically give your category a URL title based on the name you choose above. 4.3. Parent Category: The drop down list will contain all of the existing categories. If you do not wish this to be a subcategory, then select Primary. 4.4. Is this an Interest Group? Select yes to allow the category to allow Site Members to choose when completing or editing their profile. 4.5. Allow Content Assignments? If No, it will simply show as a heading on the Categorization tab under Available Categories, otherwise administrators will be able to assign any content to this specific category.

71 4.6. Active? If you would like this category to be active, select Yes. Otherwise, select No. 4.7. Restrict Access to Specific Groups? You can restrict access to any content with this category to any Site Member and/or Admin Group(s). To select multiple groups, hold CTRL (Windows) or CMD (Mac) + Click. 4.8. Notes: Simply an extra form field to store any notes pertinent to the category. 5. Complete the fields on the Add Category form as follows. 5.1. Name: News Categories 5.2. URL Title: Leave blank 5.3. Parent Category: Primary 5.4. Is This an Interest Group? No 5.5. Allow Content Assignments? No 5.6. Active? Yes 5.7. Restrict Access to Specific Group(s)? Allow All Groups 5.8. Notes: Leave blank 6. Click Add 7. You will now have a primary category created called "News Categories".

Category Manager

*Add Ne. Coate, 11,,,,s.,"s

Category Assignable Interest Goyim Mew

a Newt Categoleo

8. Mouse over the plus sign next to the primary category and select Add Sub Category Category Manager

Add New Category if Pemis,ornn!:

Tags

Baseball, Widgets, Blog

4. Click Publish.

5. Repeat this process for each content item you wish to "tag."

5.1. For the Blog article titled "A Short Trip To China":

Tags Bing wid get;

Travel, Blog

Notice the Tag Cloud above the form field. This will continue to take shape as you "tag" more content.

5.2. For the Blog article titled "What's In A Widget Anyway":

Tags

Baseball Blog Travel WO9ets

Widgets. Blog

Note that "Blog" is noticeably larger than the other tags. This is because there are currently two content items tagged with this keyword.

6. To remove a tag, edit the content item and click the Tags tab.

6.1. Edit the Blog article titled "A Short Trip To China."

6.2. You should notice the "Tag Cloud" as well as a listing of the current tags with a circle that contains an "X" next to each one. Simply click the circle with the "X" to remove the tag.

Tags

Baseball Biog Travei Widgets Trani •

6.3. Click Publish.

88 7. Preview the Blog Folder. Tags should be displayed on the Blog Folder near the comment count and average rating for each item.

Blog

In a Widget anyway? ppeart notor zit mot comm.. arip,scIng eft NUM vel Darn at CUM.a aC dam a masr. odor Sat smst consectsag sdpnso.9 e0G 0.5 egyatusMOml.

nos .Gor0..01 Tags: Vialgats, Rating: trir**

A Short Trip to China npsurn dam 00 met, consect.stur whm,ng gIR, RWmya3.. at uute Waxes. Con.. sc dam maSms Ms.F. 04. 7°. 016m 0010r at wet, concoct., •clipiscang eta, Cras M mo qutS meta& poSsaa

3* Ws tko S.Carn •Cl T • Wt.

Baseball and Widgets Lomrrs 10.01 Oder t amN. COnSftlscur Sdp,sCillg alt. Null ve 313e1,0 at est .acul,111010105. Curadlur lac damrare traticlue vIverra.10101,1 n>som dolor sn amet cals./Wu aclipiscing ea. Cass NI No quis melee ogestag al.e1

By AIM Sm.Conw.tsa1) Tow Wags.. 00,g Raw ^

8. Clicking any tag should invoke a site search for all content that is associated with that specific tag. For example, clicking "Widgets" should produce a Search Results page with the two Blog articles tagged with the keyword "Widgets."

,Ist's 0 s W

Displayhg • 2 of

1. What's Ina Vkhdget Anyway? Loren, :psum doles sit amt eorstctewr aoipiecireg leers at est 14. ;es. Cuts.wr en dam a magna viverts, Lorm sost0 dots to amat, Gras m 00

Tags: 0Ig00. 41 ,n,1 at Oca

2. Baseball and Widgets Loren 900000 dolor sit erns,. cwsecteaw umcma Gumheaff ac clam a mawna t.socsm vrverra. Loren, ipsurn 000 at B consec000e000s0 ,09 3as tr. wm meew spasms equet

Tags . Blog By Jane Sm.

9000100g. 2 a 2

find What yOu Mrs harlidrog tot/ Refl. youf saarts anti tty ego..

89 Adding a Tag Cloud A tag cloud is a visual representation for text data, used to depict keyword metadata (Tags) on websites, or to visualize free form text. Tags are usually single words, and the importance of each tag is shown with font size, and can sometimes color. This format is useful for quickly perceiving the most prominent terms and for locating a term to determine its relative prominence. The terms are hyperlinked to items associated with the tag.

To add a Tag Cloud to the Blog Folder, follow these steps:

1. In Site Manager, navigate to the Blog Folder and click to edit.

2. Select the Layout & Objects tab.

3. Select System from the Available Content Objects select menu.

4. Select Tag Cloud and use the right arrow to assign it to the Right Column Content Objects display region.

Content Objects AveglpMe Content ObjecN Column Content ObfeCTS

System Standard Navigation

AcctPt Comments Content Rater Dregs le Feeds Event Reminder Form Forward Email Go To First Child Related Content Main Content Content Onrects Site Mad Acoept Comments , WIEMIIIOIIIIIIIIIIIIIMIIMIIOIIMI " User Favorites User Tools

Rght Column Content 04ects

Content Rater Tag Cloud

5. Click Publish.

6. A Tag Cloud should now appear in the right column of the Blog Folder.

lbg Cloud f-alont , na C, Blog Blog Widgets

What's in a Widget Anyway? osum [Ica' WI sone, consaCtalw addaning Male .1 kbaro aandes. Caralatir ac dam a magma tnalidx varerra. 91ra01 inaum Coabr sa amoz. cOnsecteag aciaasdng elit..C.naa in leo guis matua egeataa capet

Faad Ifaa tly.lona (be •Cdnfirenta(1) 1001,aoo900, nIN Patna.: ****,

A Short Trip to China Loren, pawn dolor 11 amat, conapreturaddacina eat, 1119*1159110,0 01 eat acaus uanvea Coranaur at dam a magra Mangan antnas. Leann pawn odd 43 ore:. conlectetur atpacno eat Gras lao das me. agadas

dyJor 0110 Tags. .2 a naang:

7. Clicking any tag should invoke a site search for all content that is associated with that specific tag. For example, clicking "Widgets" should produce a Search Results page with the two Blog articles tagged with the keyword "Widgets." 1111=M111111.11111.11111111MIIIIII IIIINE

I a Anyway, Tag Cloud A Stual Tno lo China Blog- Basetaaa and Walpts Search Results Widgets Thom are 1 011(0' 09900300 to award 'BesPall

aasdaytrog. 1 - 1 OI l

1. Baseball and Widgets Ltl0,notbu' tt010rWr101 soasactotur ataptating aliAtt tel alma" at oat aouis n01188 Curancat PC dam a magna 010100 wawa. Lomas Van dolor 019 artlan cansonanar adp:adng tan Gras n it° cam rat. pastas al...

Disdaynro: 1 - I '11 [NMI 1100 what you worn toolang Cirofort Panne your swatch a. try pain.

91 Photo Gallery According to the Site Specifications, we need to add a photo gallery to the site. In this exercise, you will go through the process of adding a gallery to the site structure and adding images to the gallery itself.

Default Image Sizes For any images uploaded as either a file or as an associated image, Mura CMS automatically creates three thumbnail images; Small, Medium, and Large. These settings do not apply to any images uploaded using CKEditor (e.g., adding an image into the Content window).

To view and/or update the default image settings, follow these steps:

1. In the Mura CMS admin, click Site Config on the primary navigation, then select Edit Site.

Site Config

Edit Site r Permissions

Class Extension Manager i•

Create Site Bundle

Deploy Site Bundle

Trash Bin

Update Site

2. Select the Images tab from the Site Settings menu.

92 3. Here, you can alter the default thumbnail dimensions and even create additional default thumbnail sizes.

Small (Thumbnail Image

Medium Image

Large Image

Custom Images

4. Once you have edited your image sizes, you can click Update to save the the new settings.

93 Change Content Type to Gallery Mura CMS has a unique content Type for photo galleries called "Gallery." To create a photo gallery, follow these steps:

1. From the Site Manager, click the Photo Gallery content item to edit it.

2. On the content editing screen, select Gallery from the Type select menu.

Type

Page Folder Calendar 1111=1.11111,11.1111111111111 Photo Gallery

3. Go to the Layout & Objects tab and change the Layout Template to one_column.cfm.

Layout Template 0

Milani From Parent blank.cfm default.cfm home.cfm

111022222111111threecolumn.dm , 111111. two_column_SL.cfm two_column_SR.cfm xml dm PIN lenS∎noff

4. Click Publish.

5. The Photo Gallery should now have a unique icon and stand out from the other content items when viewed in the Site Manager.

PhOU Gal KY

94 Add Images to the Gallery Mura provides two methods for adding images to a gallery. Images can be uploaded either one at a time, or you can select multiple images to be queued for uploading which provides for a faster, more traditional file upload experience.

Adding One Image at a Time Follow these steps to add a single image to the Photo Gallery:

1. In Site Manager, mouse over the plus sign next to Photo Gallery and select Add Content.

la Zoom

♦ Add Ct rtent 0 9.1, Copy

Je Copy All

2. This should launch the Select Content Type dialog window with two options: Add Gallery Item and Quick Upload.

Select Content Type

Ira Quick lkked

3. Click Add Gallery Item.

4. The Edit Content screen should display.

5. Complete the fields as follows:

5.1. Title: This is the title of the image that will display above the image on the image details page. For example, "Cute Pandas,"

95 5.2. Select Associated Image to Upload: This is the image file that you would like to add to the Gallery. For example, /1-mura-admin/sample-content/photo-gallery/Image1.jpg

6. Click Publish.

7. The Image Details screen should now appear.

Image Details

Deck mConTert Sac, 1 o Ste Manager

Imageljpg

Adjust Image Orientation

Plbeee Sent t APPS

Small (80x80) OfSnstt *nn

Medium (180x180) e Crop

Le AUT0x6 *R,tvo

96 8. If, for some reason, you are not satisfied with the way that the photo was automatically cropped, you can generate a new thumbnail for any of the default thumbnails. To generate a new thumbnail, follow these steps:

8.1. Click Re-Crop on the desired thumbnail (e.g., Medium).

8.2. A dialog window should open with the original image.

8.3. Click and drag across the desired section of the image you wish to use ad the new thumbnail, then click Apply Cropping.

ageljpg

C,I,c .4,ppy

97 8.4. The new thumbnail should now appear on the Image Details screen.

Medium (1 80x1 80)

9. Preview the Photo Gallery. Your Photo Gallery should looks similar to the following:

Photo Gear,

Photo Gallery

Cute Pandas

10. Clicking the thumbnail image should launch a modal window to display the Large image.

98 Adding Multiple Images Follow these steps to add multiple images to the Photo Gallery:

1. In Site Manager, mouse over the plus sign next to Photo Gallery and select Add Content.

• Zoom

+ Add ClItent

th Copy

a& Copy AP

2. This should launch the Select Content Type dialog window with two options: Add Gallery Item and Quick Upload.

Select Content Type

Add Gallery Item Quick Upload

3. Click Quick Upload.

4. The Quick Upload screen should display.

Quick Upload

5. There are two methods to adding multiple images:

99 5.1. The first method is to click the Add files... button.

5.1.1. Navigate to where your images are located (e.g., /1- mura-admin/sample-content/photo-gallery/), then click one or CTRL+Click (CMD+Click on a Mac) to select multiple images.

about-us Itragel jpy dots bl oq 0 Image/jog L.L. sample-content a contact-us :11r=n11111111111111 npsum.txt imagerl.jpg news CO Photo-gallery • EMMIIITIONIMI

5.1.2. Click Open.

5.2. The second method is navigate to where your images are located, then drag and drop your images onto the browser.

Quick Upload a • v •

a Ifl

. i D ,, 42•ss,,,s, MIIIMn IOM.""Yr

100 6. Click Start upload to begin uploading the images.

Quick Upload

Insege,jpg Ia.

98.07 8,11. a 1111.0.9

3,0 S Gn

map6.pg SI. d Sono,

IOW ,4pc 2O3 t sna,

7. When finished uploading, you can click on any image to edit its properties such as Title, etc.

Quick Upload

brapnPay 3117.1.1,0

.rapia gap 08.47

ICO 111.8.11

0.43

MINACIDO 83.

101 8. When finished uploading, you can click on any image to edit its properties such as Title, etc.

Title '

Summary

(12

,A „L tJ fn.( •

body 0

Select Fao to Upload

C ,- oost F :le

rragi,C,

Downoac for OM:no Fortin

102 9. Click on the image to go to the Image Details screen where you can then Re-Crop any of the image thumbnails as desired.

Imag e6. jpg

Adjust Image Orientation

Pler. SAW

Sala (50x60)

Medium {180,0 BO)

Large (AUT0x600) •

10. Preview the Photo Gallery.

11111111

Photo Gallery woo t 14 Imagelleg ItnageS.arg Imagaapg Irnage.iP9 Insagee.jpg Cute Pandas

11. The Photo Gallery page should be updated to display the thumbnails of each image added to the Gallery.

103 12. Clicking on a thumbnail image in the gallery will display the large version of the image in a modal pop-up window. You can then navigate the images by using the Next and Previous links below the modal window.

104 Setting the Number of Thumbnails Per Page Mura CMS allows you to set the number of records displayed on a single page for Folders and Galleries. To change the number of items displayed on a page, follow these steps:

1. From the Site Manager, navigate to the Folder or Gallery you desire to change.

2. Select the List Display Options tab.

3. Locate the Records Per Page select menu and select your desired record count (e.g., 3).

Records Per Page

4. Click Publish.

5. The Gallery will be updated to display the number of records you selected and pagination will automatically appear if the total items in the Folder or Gallery exceeds the Records Per Page setting.

Photo Gallery MIL rill

, n.T.)1+,a MiageB.

105 Customizing Photo Gallery Thumbnail Sizes Mura CMS allows you to customize the height and width dimensions of image thumbnails within a Folder or Gallery. To modify the image thumbnail dimensions, follow these steps:

1. From the Site Manager navigate to the Folder or Gallery you desire to change.

2. Select the List Display Options tab.

3. Select Custom from the List Image Size select menu.

List Image Size

3 Small Medium Large 11112=1111111

4. Then enter 365 for Width and 150 for Height.

List Image Size Width Height

Custom 365 150

5. Click Publish.

6. Preview your Gallery (or Folder).

NEI

Photo Gallery

IMS9e54PS

106 Contact Us The Contact Us section in the Sample Specifications includes an embedded Google map and a contact form. This exercise will walk you through creating both of these features and applying them to this section.

Creating a Contact Form There are two methods in Mura CMS you can use to create a form to collect information and store the data in a database. You can create forms using either the normal content editor, or an easy-to-use, drag- and-drop Form Builder. In this exercise, we will use the Form Builder to create a basic contact form for the Contact Us page.

Building the Form 1. Select Modules > Forms from the primary admin navigation.

Modules

Content Staging Components

Categories

Content Collections

* FM*

Flie Manager

Plugins

107 2. This brings you to the Forms Manager screen.

Forms Manager

W Permissions

Display Last Updated Filters

These me es items Ire Met SACCO,

i.mys jme,

3. Click Add Form with Form Builder. Forms Manager

()Add Form with Form Builder 0 Add Form with Editor V Permissions

108 4. This will take you to the Edit Form screen.

Edit Form Ty. form Staffs. Draft Uptate: 01220003 31032 PM

3 Bac,: 10 100ns

1t1

Message

Send data to weal address (Separate multiple email addresses by combs)

5. Enter a Title for the form (e.g., Contact Us Form)

109 6. Click the Section button on the Content toolbar to create a new section to the form.

Content

Socto it!L SI

Cit. to msel a Sector (Fieldset)

Acid a kitm Select a forrneement on the let to edit ts properties. ailment using tIre toolbar above

7. Click on New Section in the left column of the Content area and enter Your Information in the Label field.

Content

Section • „I;

Your Information Your Int ormation

Your worn-non

r'4SOP yOunntortranon

8. Click the Text Field button on the Content toolbar to add a new Text Field to the form.

Content

Section ott

110 9. Click on the New Text Field to reveal and edit the form field details.

Content 57

Your Information ‘B ( New Text Field

zilistell•kt

Neer Text

Name

VAIM

10. There are three tabs available for editing the form field details: Basic, Advanced, and Validation. 11. Enter the First Name in the Label field.

Content

Your Information A. , First Name

usil MitMoms

Label first NarA

Name. firstnarne

vabA

12. Click the Validation tab

13. Type Please enter your First Name in the Validate Message field 14. Check the Required? field to make the form field required.

111

15. Your Advanced tab should look similar to this:

vt•Bc First Name

Basic Acvanced Vaximon

Validation Type None

Validate Regex

Validate Message Please enter your First Narre

Required?

16. Repeat the steps to add another Text Field for Last Name.

17. Repeat the steps again to add another Text Field for Email. 18. On the Validation tab for Email, select Email.

;ABC _ Email

Basic Advanced ValiciatIon

Validation Type None Numeric Date Validate Regex II b..

Regex Validate Message Please enter a valid Email Address

Required? g

112 19. Create a new Section called Your Message

Content

Sectem,

Your Information Your Message

Late* Your MessagM

laic Last Name Name yourroessape

1ASCC; Drag

Your Message

20. Click the Text Area form field tool to add it to the form.

Content

t, Ji k „or

21. Type Message in the Label field.

Contoot

SeC4,

Your Information Message

tame#1 Fits: Name r Advanced Werdation

Labd yessaod late' Last Name

Name message

Value Your Message

22. Click the Validation tab. 23. Type Please enter your Message in the Validate Message field and make the field required.

Message

VaAciati

Validate Message Please your Message

Req uired?

24. Enter a message in the Confirmation Message section. This message will be displayed after the form has been successfully submitted.

Confirmat n Mess

Thank you tar your message. If you need immediate assistance. please cat 1.800.555.12121

25. If you would like to send an email notification to anyone once the form has been submitted, simply enter the email address(es) in the Send data to email address field. NOTE: Please do not use this field unless you have entered your email server settings under the Site Settings!

26. Click the Advanced tab.

27. Deselect (uncheck) Display Title. Otherwise, the title of the form will appear directly above the form.

Show title above the form?

114 28. Click Publish.

29. The Contact Us Form should now appear in the list of forms on the Forms Manager Screen. F=orms Manager

0 Add Form with Rift 111PertinSID,

Title Dissisy Last Update/1

Adding the Form to a Page

1. From the Site Manager, select the Page you want to add the form to (e.g., Contact Us).

2. Select the Layout & Objects tab.

3. Select two_column_SL.cfm from the Layout Template select menu.

Layout Template 4)

Inherit From Parent blank.cfm default.cfm home,cfm one_column.cfm three column.cfm two_column_SL .cfm two_column_SR.cfm xml.cfm

ref Inh'd* r-r‘t. ta.4 Now

4. Select Do Not Inherit Cascade under Inheritance Rules.

Inheritance Rules

115 5. Select Forms from the Available Content Objects select menu.

Content Objects A va;abte Co, ter:

,/ Select Object Type System Navigation Mailing Lots Ad Regions Folders Calendars Galleries Components Forms Local Content Indexes Local Content Index Slide Shows ()Query Only) Remote Content Feeds Plogins

6. Select Data Collector - Contact Us Form and use the right arrow to assign it to the Main Content Content Objects display region.

Content Objects Arartooe Conronr Objects Left Column Content Otters

Fool's

Main Content Content Obiects

Cola Coltector Cornea Us Penn

7. Click Publish.

116 8. Preview the page. The Form should now be displayed on the desired page in the selected display region.

Con.c1 Us

Your Information

Name'

av Name

rnaff

Your Message

Messa,e

Detautt 2G13 P'cy Ste Map

9. Leave the form blank and click Submit.

10. Any messages you created for required form fields should be displayed.

The page at tat:1min says:

Please enter your First Name Please enter your Last Name Please enter a valid Email Address Please enter your Message

11. Click OK, then complete the entire form and click Submit.

12. Once the form is submitted by a user, the confirmation message will appear and an email will be generated to the specified email addresses (assuming the email server settings have been setup

117 properly for the site).

GOntaLl US EMI

P.m, mu I, mso TOW, It you now osmadiam usauelance siesas ea 11E00 55i '212

118 Viewing Collected Form Submission Data Each form developed in Mura CMS automatically collects the submitted data and stores it in the database for retrieval. To access this data, follow these steps:

1. Select Modules > Forms from the primary navigation in the Admin area.

Content Staging

Components

Categories

Content Collections

Raffia

File Manager

Plops

2. In the Forms Manager, click the manage data icon of the row containing the form you wish to retrieve data from.

Forms Manager ;

Fftle Display Last UPaatscl

Comac4 Us Form se 01/20/2013 10:5242 PM #

Ma ,cage Data

119

3. The Manage Data screen should appear. One of the items displayed on this screen should be the total number of records stored in the database.

Manage Data

013am to En-nx a vorm 5â 50 0 Di, -

11/0 Coate. Us Form

To5.0 its A001415o• I

From

0120,^213 0 03

01 ,20,27 03 5 03 5

Sort By

ErEared canting

Keyword Search

4. The From and To date fields are auto-populated with the oldest and newest form submissions still maintained in the database. If you wish to narrow the date range, simply change these as desired.

5. Choose the field you would like to Sort By.

6. Click the View Data button to display the data on screen.

Detaillme Entered EMAIL FIRSTNAME LASINAME MESSAGE

-Dram Ipsurn &NCI sit arPet, tensec7atut ac145,551n8010. Nutla ibern et est actilis 4111/1/1. CUrabaur ac 01/2072013 00 PM lonnOdoo .5yr- 05:501 000 dam masne Insique VIVerra Loren, n peum lobar sh anwI, ,ansectecur actipisoliV alit Eras in Teo quis mews 49e5141 atquet.

7. Or, click the Download button to download a .csv file of the data.

120 Embed a Google Map While there are several ways to embed maps on your website, including the use of Mura CMS Plugins, there's a quick and easy way to do it from right within Mura's Edit Content area. Here's a few simple steps on how to embed a Google map: 1. From the Site Manager, open the Contact Us Page to edit it. 2. On the Content toolbar, locate the Google Map Location button 9 and click it.

.1.51 1 151 117G1 11Z; • Ca, Fa T„ B I U S xx

Styles - Formal ?

Coos , Mao nocat ion

3. This will launch the Google Map location dialog window. Simply enter an address (e.g., 3195 Zinfandel Dr, Rancho Cordova, CA), set the Width, Height and Zoom to your desired settings, then click OK.

Google Map location 0

Insert an address and receive an image of your location 3195 Zinfandel Dr, Rancho Cordova, CA

Width: 250 Height: 250

Zoom: 10

Cance OK

121 4. You should see something similar to this in your Content editor window:

Content

Souftx C 0:8 n1i BIBS X Xe

xx IMO

E3 9 Seel, Nam • jj' ?

,01. 11,100 (211rUS HeightS 1,041 North t-i,gmands Folsom

Fair Oaks Gold R3ver Aide, A.1 ulde

Roseman

F10,11

Vmeyarri Map data V2013 Google

5. Click Publish. 6. You should now see a Google Map appear above the Contact Us form.

Ceeuct Us

....Ms 100,

Your Information

FirENarne •

Last Kama '

Your Message

ma aaaaa •

122 7. Add any other details and style as you wish.

Blue River Interactive Group

3,95 Zintardei azsci,rn ButrgngD,Srte rr

411. Ram,' Co...wt. CA 13567,, SAC a wort°

n18555,1313 Fax

etttoktemar

a.. seal a

Special Requests

it au ,ave spec. requests, Om. comp. %Ise contnatenn beNaw andS rS esentawa Wage, a louct, with you.

123

Building the Home Page Because the Home page is generally a unique page that aggregates content from a variety of areas of the site, we recommend building this page last.

This exercise will cover the following items related to building the various sections of Home page:

1. Content Collections 1.1. Local Content Indexes 1.2. Slideshows 2. Components

Content Collections Content Collections are simply indexes of content based on pre-defined search criteria or filters.

For example, Mura CMS can create an index of site content (Local Content Index) that has been flagged as "Featured" and categorized as "Domestic News" where the content resides under either the Blog or News sections of your site. This index typically consists of the Date, Title, Primary Associated Image, Summary, Credits, and Tags. You can control the maximum number of items you wish to display and more.

You can also broadcast these Local Content Indexes as RSS feeds (http://en.wikipedia.org/wiki/RSS), making it easy for visitors, or even other web sites, to consume information from your site and bring visitors back for details.

In addition to creating Local Content Indexes, Mura can also consume external RSS feeds and display pieces of that information on your site as well using the Remote Content Feed feature of Content Collections.

124 Local Content Indexes A Local Content Index is essentially a collection of content which has been indexed and aggregated from either the entire site or specified areas of the site based on desired filter criteria. Once created, these Local Content Indexes can be used to display a number of built-in display objects in one or more areas of the site.

These built-in, customizable display objects are generally a listing of content items which typically include the title, associated image thumbnail, summary text, content release date, author, and a hyperlink to the full version of the page.

Mura CMS also enables you to publish a Local Content Index as a RSS feed (http://en.wikipedia.org/wiki/RSS) to syndicate content automatically.

Create a Local Content Index

To create a Local Content Index, follow these steps:

1. From the primary admin navigation, click Modules > Content Collections.

Content Staging Components Categories

0 Content Collections r • F4xms Ale Manager

Plugins

125 2. The Content Collections screen should appear.

Content Collections

0 (K. n Oex 0 Pax] Remute 1- te, Pemmaions

Local Content Indexes

Index Lang“age May Items Features Only Restricted Active

There as oxTently no lc.. :r.c.es.

Remote Content Feeds

had Ufll Active

There as curently no remote teens .

3. Click the Add Local Index link near top of the Content Collections screen. Content Collections

O Add Local Index °Add Remote Feed IN Permissions

Local GAdd Local

126 4. The Edit Local Index screen should appear. Take a look at the default settings. These are the default "filters" that control which content gets indexed. In the following steps, we'll narrow the search criteria.

Edit Local Index

0 neil, o Con0, Co4octiltes

z50ey Deautts

Category Filters 0 ew&

sort By Son erection

Last Unchme

Include navigation tents on

Include items that have been excluded f rem site search/

Lock Name?

5. Enter a Name for your index. (e.g., Recent News)

6. Next to the Sections Pulled From label, click [Select Section].

Name

Recent News

Sections Pulled From: ISelec Secticol

Section TYPe

Theft, are cvornity no content Mem mated,

127 7. In the Content Search field, enter a keyword to locate a specific section or page of the site, then click Search (e.g., News).

Name Recent New

Sections Pulled From: News

Section Type

There we currently no content raters meted,

8. Results will be displayed below the search box. Click the plus sign next to the section you would like to include in the Local Index.

Name Recent News

Sections Pulled From: News

Select Section

Home a News (It Add

Section Type

Homey News folder 0

9. Once you click the Add icon 0 , the selected section should then appear under the Section area.

10. If you select the wrong section, simply remove it from the Section by clicking the Delete icon 0 .

11. Repeat the previous steps for each section that you would like to include in the Local Index.

12. You can apply additional filters to narrow the search results even more. For example, by expanding the News Categories and selecting the Domestic from the Category Filters, Mura will only include content that has been categorized as Domestic News.

128 13. For the Recent News Local Index, set Sort By to Release Date. Listed below are descriptions for each Sort By option.

sort BY

Last Update Release Date Start Date / Time Menu Title Long Title Rating Comments Created Local Manual Order Random

13.1. Last Update: date and time the content item was last edited/updated.

13.2. Release Date: date and time entered for the Content Release Date found on the Publishing tab when editing content.

13.3. Start Date / Time: date and time entered for the Display field found on the Publishing tab when editing content.

13.4. Menu Title: alpha sort based on the data entered into the Navigation Title found on the SE0 tab when editing content.

13.5. Long Title: alpha sort based on the Title field found on the Basic tab when editing content.

13.6. Rating: average rating received from the Content Rater display object.

13.7. Comments: number of comments received from the Accept Comments display object.

13.8. Created: date and time the content item was first created.

14. Set Sort Direction to Descending so that the most current release appears first in the list.

Sort Direction

Descending

129 15. There are a number of other optional filters available, and it definitely helps to know what the default settings are, and understand what they do:

15.1. Include features only? Default is No. If Yes, then ONLY content that has the field Feature in this section? checked to Yes will be indexed.

15.2. Include navigation items only? Default is Yes. If No, then essentially the Include in Site Navigation field from the Publishing tab is ignored for the purpose of this specific content collection.

15.3. Include items that have been excluded from site search? Default is No. If Yes, then essentially the Exclude from Site Search field found on the Publishing tab is ignored for the purpose of this specific content collection.

15.4. Advanced Filters tab: there are several additional filters that can be applied based on a variety of content item form fields.

130 15.5. Display Defaults tab:

List linage Sac

Display Name on Content Object?

Custom CSS Classes,

View At Link View At Labe

M. Items Items Per Page

Fields

Body

riesoMom

Comments

Harting

Tape.

15.5.1. List Image Size: List Image refers to the Primary Associated Image of any content. Options are Small, Medium, Large, and Custom. The dimensions for Small, Medium and Large are found under the Site Settings > Image tab. Custom allows you to enter your desired default Width and Height values.

15.5.2. Display Name on Content Object?: Selecting Yes, will display the name of the Local Content Index on screen above the results. An optional Alternate Display Name field is available in case you wish to use some other name/title for the local index. Selecting No, will not display the title at all.

15.5.3. Custom CSS Classes: This is for front-end developers who wish to add one or more classes to the outer wrapper of the final output. For example,

131 they could enter "myCustomClass homeContentIndex" and it would appear in the class attribute of the containing div element.

15.5.4. View All Link: If you would like to display a link below the indexed content, enter the URL here.

15.5.5. View All Label: Text entered here will be wrapped with an anchor tag and the href attribute will be the value entered in the View All Link field.

15.5.6. Max Items: The maximum number of items you wish to be displayed from the index.

15.5.7. Items Per Page: The number of items displayed before pagination would automatically appear.

15.5.8. Available/Selected Fields: You can control which fields you would like to appear when this Local Content Index is displayed on the screen. Simply drag and drop from and/or to the Available Fields and/or Selected Fields area. You can then drag each field up or down within the Selected Fields area to control the order each field is output when the local index is displayed.

AyWaltite Fields Selected Fields

Body DTke

ReadMore Title

Comments Ine,;e

Rating SurnmarY

Tags

Credit,

16. Click Add.

132 17. You should see the Recent News index appear in the list of available Local Content Indexes on the Content Collections screen.

Content Collections

0 Add Load 11045 0 Adel Rrnote ,ned

ocal Content Indexes

Index . Language Max Items Features Only R

Recent News

List Image We

Swan

Display Name on Content Object?

Custom CSS Classes

View All Link View All Label

Max Items Items Per Page

20 0 20

Available Fields Selected Fields

Body Date

ReadMore Title

Credits Image

Comments Summary

Rating Tags

9. Check Yes for Display Name on Content Object?

Display Name on Content Object?

136 10. Drag Image and Summary from Selected Fields and drop it under Available Fields.

Available Fields Selected Fields

Body

Image

Credits

Comments

Rating

11. Click Save.

12. Click Publish.

137 13. The Local Content Index of Recent News posts should now appear in the Right Column of the Home page.

A Short Trip to CIitfrp Lorin Mare Odor Mama cons.titrtut i p cm9 etk ttulte vN tOttere at owt scuts untsctits (. .iratovr , Gam. a magna treortue ,Itoturtt Looten pew alt, at arr. , cm tulpscIng ak Cm kt Iw qMaw metes evades alquett.

Widgets Proven To Be Emir To Use Than A Con Opener

laptOpa and Wkly.* Make Oot.td Holiday Gine

14. Note the slide show that's already running on the Home page. We'll modify this in the next section.

138 Slideshows Mura CMS offers built-in slideshow functionality. You can quickly create a feature area that cycles through a Content Collection. Before we can actually use a built-in slideshow display object, we need to create a unique index of the content we would like to display in this featured, high-traffic area of the site.

However, as you saw in the previous exercise, the MuraBootstrap theme that we're using already has a slideshow that appears on the home page just below the primary navigation. This particular slideshow was custom-coded and it depends on a Local Content Index specifically called "Slideshow." However, we haven't created it yet.

So we'll take a look the differences between the custom-coded slideshow that is included on the home page layout of the MuraBootstrap theme and the baked-in slideshow display object.

Create a "Slideshow" Local Content Index

The reason the slideshow on the home page is already "working" is because the custom code is attempting to use a Local Content Index called "Slideshow." Since the Local Content Index has not been created yet, it dynamically created an index of the entire site based on the default settings found when creating a Local Content Index.

In other words, if you create a Local Content Index, give it a title, save it and preview the RSS feed, you should see an index of the entire site based on the same filters (e.g., not narrowed down to any specific section(s) of the site, sorted by Last Update, Descending, etc.).

Follow the steps from the Create a Local Content Index section with the following settings:

1. Name: Slideshow

2. Sections Pulled From: Blog

3. Sort By: Release Date

139 4. All other fields should be left to their default settings and look something like the following:

Name

Sideshow

Sections Pulled From:

Select Section

Home stdOg

Section TYPO

Home Bldg Folds,

Category Filters

Sort By Sort Direction

Release Date Descending

Include features only? Include navigation items only?

Include items that have been excluded from see search?

Ytn lz!) No

Lock Name?

5. Click the RSS icon to preview the Local Content Index to confirm the filters are working as desired.

Content Collections

0Aad oncal 00sx GAM Pic:ante -on; -

Local Content Indexes

Index Language Wisdom. Feattres On* Restricted Act.

Recent News

Kids Uks Widgets More ThniMtlad I P.m

a ytti Widgets Proven To he Easter To Use Then A Can Opener

Met Map So

141 Place a Local Content Index Slideshow Display Object

1. From the Site Manager, navigate to the Home page and click to edit.

2. Select the Layout & Objects tab.

3. Select Local Content Index Slide Shows (jOuery Only) from the Available Content Objects list.

Content Objects Available Content Objeas

t Select Object Type System Navigation Folders Calendars Galleries Components Forms Local Content Indexes

Local Content Index Slide Shows- UQuery Only) Remote Content Feeds Plugins moRaIMPRIIMIXrr,

4. A list of available Local Content Indexes should appear.

Content Objects Available Content Obj ects

Local Content Index Slide Shows

Recent News - Local Index Slide Show Sliclesnow - Local Index Slide Show

5. Select Slideshow - Local Index Slide Show and assign it to the Main Content Content Objects display region.

6. This should launch the Configure Slide Show configurator.

142

7. Click Save to close the con figurator.

C te,t. Objects Le: Coko, ObjeVs

L,717,1 .on7ent index Slide Shows

Recent News - Loud Index Slide Show Slideshow - Local ItIdex Slide Show

• •• Ittliatelklalehata

8. Click Publish and preview the home page. You should now see the slideshow display object in the main content display region.

town Own dolor sit amet, wesectfl,acsascing &w Ntrlia ver, Shwa et. tectifie urrtSa Curadtte ac dam a macro .sque et."0. 1-csam ea.dt ddka amaa...... t. adbplecine eft Pas p to quO mkaa 050 0 00500

Recent News auskat12, ago Baseball and Widgets More Than Video GJI1/95 LAMM' Oa, Wasnt rorsecte, adp.song NdLa vs 110ro et est lacda u,,ces Gosheur at dkm maps rhea:ale Over ,3 1 010, 155 towe omotrlelatuad,ncOg e I C102 el as qua meha egeeas equal WIdgete Prween To Be Easier To By Jane Smith t•O0 04101000 Use Them A Cu. Opener

Laptops and Widgets Make (toed Holiday Gtrt%

Cefed,21, 3

143 Again, the main difference between these slideshows is that the main slideshow that spans the width of the page was created specifically for the MuraBootstrap theme, while the other slideshow is a baked-in display object that can be used on any site.

Since having two slideshows with the same content in them really isn't all that useful, remove the baked-in slideshow display object before starting the next section.

144 Components Components are reusable content objects that can be shared across multiple pages or sections within your site.

For example, maybe you have an announcement that you want to share across your site such as "Closed on Christmas." Without components, you would most likely have to contact a developer, then give the developer a listing of areas you want the notice to appear. However, in this scenario, you most likely would not be able to edit the content of the notice or control whether or not it is on display, etc.

Utilizing components shifts that control back to the content manager. You could create a notice, and choose which page(s) and/or section(s) of the site you would like it to appear, all using a single interface. This means that although the content may span several pages or sections of the site, you can simply edit the component once and it will update all instances throughout the entire site.

Another function of components is to use them as content templates so that non-technical users can recreate a visual style for a specific type of content without having to start from scratch.

In this exercise, we'll create a component to use on the Home page.

145 Creating Components 1. From the primary admin navigation, select Modules > Components.

Modules

Content Staging

Components r.

Ceteaodes

Content Collections

FOIMS File Manager

Plugins

2. You should be taken to the Component Manager screen.

Component Manager

Perm.

TA* Display Lao Updated Filters

Mere are no tems II., serbon KEYWORDS

CATEP3OFNES 0 Nam Calactotte•

3. From the Component Manager screen, click Add Component. Component Manager

0 Add C omponent Permiss,ons k

146 4. The Edit Component screen should appear.

Edit Component TM!' Component Statue OMR Conant: 01/29/2013923 PM

Lomponems

Beek

Title Categonrobon

Tafr Content

Sou,,e a' a a 9,?.;- Q t 77"1 I., 8 1 U& x, x r E 2 -A 2 log

El 9 — St Q d∎ )x: 3", "

Sertiper

11=3 1111:1=1:31111=10

5. This screen is quite similar to the Edit Content Page found within the Site Manager, with a few minor differences.

6. Basic Tab

6.1. Title: This is the title of your component. It is used to identify the component within the back-end admin area and is not displayed on the front end.

6.2. Content: Here you can enter the content of your component, identical to the content area of the Edit Content page.

6.3. Where would you like to use this Component? Check the appropriate boxes for each section you would like to use the component in. For example, if you wish to put a component on a content page (within a sidebar or in the main content area), select Site Manager. This will make the

147

component available in the Site Manager as a Content Object.

7. Publishing Tab

7.1. Display: The display field offers a select menu of display options:

7.1.1. Yes: This option allows the display of your component.

7.1.2. No: This option will make the component hidden.

7.1.3. Per Start/Stop Dates: This option allows you to set a specific display date for your component. It will remain hidden until the selected start date, and remain active or visible until the selected stop date.

7.2. Notify for Review: Selecting this option will notify desired Mura users to review any changes made to the component. The email message may be personalized as well.

7.3. Add Notes: A text area to keep track of any notes that content administrators wish to enter. By default, these notes are not visible by site visitors.

8. In the Title field, enter Home ] Columns

Title

Home] ColurrAs

Tip: Because components are sorted alphabetically, try adding a prefix to any page- and/or section-specific components with the page or section name so that those components will be grouped together. This can make it easier to locate and edit components from the back-end administration area.

9. In the Content area, click the Templates icon ID on the editor toolbar to launch the Content Templates dialog window.

148 10. Leave Replace actual contents checked, and click on 3 columns.

Content Templates

Please select the template to open in the editor

2 Columns An area with 2 equally wide columns

— 3 Columns An area with 3 equally wide columns

it/Replace actual contents

Cancel

11. The Content window should now look similar to the following (with Show Blocks turned on):

Content

0. c• B S x, x' '.7.en• •

R .4, 9 — 4.) :=' • "' ?

Edit or Delete Header

Content for the first column goes hem

Edit or Delete Header

Content for the second column goes here.

Edit or Delete Header

Content for the third column goes here.

149 12. Enter some headings and placeholder text for each column.

Content

dauted b:a I, Pr ¶ BI

I 'd> ,g&

9 — Sty e, ?

Sapere Aude

Lorem ipSUrfl dolor sit amet, consectetur adipiscing elit Nulla vet fiber° at est moults ultricies, Curadtur tic dam a magma tristique viverra. Lorem town dolor slt amet, consectetur adpiscing eht. Gras tn leo quis metus egestas aliquet.

Alma Mater

Lamm ipsum dolor sit amet, consectetur adipiscing eta. Nude vet ubero at est iaculis uttrices. Curabitur ac dram a magna triseque viverra. Lorem ipsurn dolor 5th amet, consectetur adipiscing all Cras in leo quis metus egestas aliquet.

Ita Vero

t otem psum dolor slt amet, consectetur adipiscing alit. Nutla vel tiller° at est iaculis deletes, Curabaur Sc atom a magna tristique vtverra, Lorem locum dolor sit amet, consectetur adipiscing etit. Gras n no quis metus egestas Ai:twat.

body th 5v p spar

13. Leave the other form fields at their default settings, then click Publish.

Component Manager

0 555 Callao's-el tit Pt.s n St. 04 n S

Title Display Last Updated

HoTelCoiurnns 01/24/203 5t72:37 PM /

150 Placing Components There are two primary ways to use components within Mura from a Content Manager's perspective; as a content object, and as a starter content template.

Adding a Component as a Content Object

By adding a component as a content object, the content remains linked to the original component. This way, edits to either the original component or any instance of that component will update all instances where the component was used as a content object.

To add a component as a content object, follow these steps:

1. Select any content node within the site to edit (e.g., Home page).

2. Select the Layout & Objects tab.

3. Select Components from the Available Content Objects drop- down menu.

Content Objects

d y'rPf r

.1 Select Object Type System Navigation Folders Calendars Galleries

Forms Local Content Indexes Local Content Index Slide Shows aQuery Only) Remote Content Feeds Plugins

4. Select the desired component from the list and assign it to the desired content object display region (e.g., Component - [ Home ] Columns assigned to the Main Content Content Objects display

151 region).

Content Oilmen Lett Column Corotaq Obiacts

" Components 4

Cc :to,) e)omen) Omeas

Component - ) Home) Columns

Agin Column Conran+ Otocgs

Recent News

Sapere Aude Alma Mater Its Vero Kids like Widgets Mora Than Wdoo Laren, nesum tlniar ante% COreeCtete 1,errt Icaliftl Odor at AMC, Ofmeaciam Laren, nGatAll color Sc emet, consecrator Games aclipEscIng Ye: ::Pere Vest taco. eap,neg NA. Palle vel item a: eat iac4115 adpecaw act NC., all :Oar.,, Sot sew.. ultnces_ Curet., az dem 6 mere uhroee. C.:J.1.." cc daft, Magna ac an a neva tr,seque wive,. Lawn lawn tneeque vooer'a Lace ipsum claior ad e.t.a Lonam paun 00101 od Widgets Proven To go Easier To awat, anaectea.r adipaczng Ores erne, consecten, adpIacingIcorocla w•nag canc,cac.lr awPwwg en On,,, Use Wang Can Opwer leo a.a3 meta neg. alp.. roc me4n6 egestal talc. Oc000 21,011A *gages alig,rel.

Laptops and WW9We Maim Geed Iololldoy GElts

Rark

152 Adding a Component as a Starter Content Template

Similar to using the Templates feature of the content editor, you can insert a complete copy of the custom component's content directly into the Content area of a page. Any edits to content added via this method will not alter the original component's content. Conversely, any edits to the original component will not alter the content that has been added using this method.

To add a component as a starter content template, follow these steps:

1. Select any content node within the site to edit (e.g., Members Only).

2. Simply click the Insert Component icon int on the editor toolbar.

Content

Qr ..50,9a a a (a Q. '4) ;: .71 :a r. L;;I U 9 — 0 gl .1; HI [m] Sv

Inset Component

3. This should launch the Select Component dialog window. Select the desired component, then click OK.

Select Component

Setect a Component to Insert

Select Component ( Home 1 Columns

153 4. The content of the component will then be placed into the Content editor window.

Content

4, B/uSx,x2

b'ves- • ?

Sapere Aude

Lorem ipsurn dolor sit amet, consectetur adiptscing Of. Nuke vet itrerc, at est laculis ulecies. Gurabaur as diem a magna tristique viverra. Lorem tpsurn dolor at amet, consectetur ad pissing Cras in leo qua metus egestas ahquat.

Alma Mater

Lorem tpsurn dolor at amet, consectetur adipiscing eht. Nutlet vet lbars at est taculis ultrtmes. Curabitur ac diem a magna tristique metre. Loremlpsum dolor sit amet, consectetur adipiscing eHt. Cras in leo quis metus egestas aliquet.

Ita Vero

Lorem *sum dolor sit amet, consectetur adtpischg ela, Nulls vet Ibars at est laculls uenctes. coralaitur as dam a magna tristique viverra. Lamm psum dolor sit erne". consectetur adipiscing Cras in leo guis metus egestas about:ft.

body Ms 01v p span

5. The content can now be edited as desired.

154 Editing Components There are two primary ways to edit Components; via the back-end administrator, or via the front-end when logged in.

Editing Components via the Back - End Administrator

To edit a component via the back-end administrator, follow these steps:

1. From the primary admin navigation, select Modules > Components.

Categories

Content Collections

2. Click either the Title of the component or the pencil icon.

Component Manager

0 Add Cortytonenf Poinustons

Display Last Updated

Igmns J 0 , /25;20 1 3 9,09:04 AM / IV 0

Edo

155

3. This should display the Edit Component screen.

Edit Component '100 Component 'Starve PUWaNE goats: 01/29/20139te AM

0 Sara to (:OrtpNlents •Verson P151.7 0 Japte cr‘me

Mete Tale Categoric.. tHOme/CdunIne

rage Content Usage Pepsi a 11 IB BIUS a, e'

I AL, ai ••

f,stesm,s 9 4 kA 011

Sapere Aude

Lorem ipsum dolor sit amet, cxsectetur acapiscing elit. Salle vet bete at est lama. u/tricies. Cutabitur as diem a magna tristigue viverra. Lorem gypsum dolor sit amet, consectetur adOseing alit Ores c leo gum metes egestas aliquot.

LOretrt tam, dolor se fcet, consactatur adbascIng alit NUlle Vol bete at est AC015 WIPCIeS. • Corabitur ac dam a magna tnstigue cverre. Lorann IpeLm Poky 54 amet, consectetur ado. • Cras o lea cps metes egastas aequet.

Ita Vero

Loren) Ipsum dolor alt amet, consectetur addiseing ellt. Culla vet bete at est Acura warbles, Curabitur as diem a magna alstique centre. Lorem esum dolor s..t amet, consectetur aditaseIng r Ores leo qua metes agestas aliquot.

betty div OM IP •

Where would you like to use thO Component?

Conon ,. :474 ,..,

4. Edith the component as desired and click Publish when finished to save your changes.

156

Editing Components via the Front-End

To edit a component via the front-end, log in to the site, then make sure the front-end toolbar is visible across the top of the browser viewport. Any editable content objects (e.g., components, content indexes, etc.) contained on the page should display a pencil icon in or near the lower, right corner of the display object. When you mouseover the area, you should see a red-dashed-outline appear around the display object. Click the pencil icon to edit the object.

Loam enure cider stIsmet, cosec's.. aceptseleg eat. Wee vet {Meru et est Waste Orioles. Cured. sic dism a magna states. of ens.. Loren, ism doe, set wet, eonsectenar adpiseng nett:Wes in tea guts metes Nee.. aWst.

Recent News Sapere Aude Alma Mater Ita Vero Kids tllm Wkigets More Than Yd oo.ar art, car sectetur Lve, {AL, oa or a t •, Jcior amet. conseur.E Clams aopec,eg NL115 vei hero al est At. eclipse .eg e.2 Nola eel abet° at est eaves ar6p.Ing e1. Nu. vet ..ro at est tad,. Ca•atut ac dam a magna ultrldes. Curabitur ac awn a mare Attires Curet,. no Sam a mars 071m. 71.20, tr steam Ow, WOrrl 01:111 dolor se !rotate mem tom, Imam dolor trl ,Int.Ou^ Avetrq(wen 1paumrlebr VAdeets Proven To Be Easier To saw at:nee:eve, adreecing eat <>as ne asset consectette atlipisc,g el. Cras COnnectoba adyscmg nM1! Use Then A Cen Opener leo 0(5 mots *pales &Mee lee tees mats egteatoo areitiet. 00 .19 rteri..15 sows 9 . 1que!

Leptnpe and Widgets Make Good ft,

Please keep in mind however, that Components are merely one of many different types of display objects that could be found on any particular page.

Clicking on the pencil icon of a Component display object will launch the Edit Component screen in a modal window. Make any desired edits, then scroll down and click Publish to save the changes.

157 Edit Component

II Vbs. HI..., fF

IMPORT/ 0T Edits will be llobally witiewtal mail papm mat win :Ns aim

Tete

Home Columns

Content

▪ ao.rs s •

PWW•iiiwig • El 9 ED CI GO

Sapere Aude

Usrell, mown odor el rime( consectetor add:tong slit Nuca vel Mato at eat odds ultscos. Curabtar ac dam a made tristrotteveverne. Lorem Mourn dolor se lona consectetur adorecing Gras o leo cps metus egestas sequel.

Alma Mater

Lorem lours tiolor sit antes consecrator actiptsdng ails Nolo vel 00em at era Ocoee ultricos. Corablor ac darn a magrut tongue rise,. Lorem psum Odor art ameu coneedetur addaddi OIL Cres rn leo quo rnetus egestes agues

la.. err. Please note that any edits to the component will update all pages that use the same component, including the original.

158 Members Only The Members Only section in the Sample Specifications is a password protected area of the site where one or more specific groups of users will have access to.

This exercise will walk you through creating a Member Group, adding users to the Member Group, and then restricting access to specific sections of the site based on group membership.

Member Groups Member Groups are sets of public users of your site who have either created a profile themselves (if Allow Public Site Registration is enabled under Site Config > Edit Site > Extranet tab) or had one created by a System User (administrator) of the site. Member Groups are most often used for password protecting sections of a site to either restrict access and/or provide additional functionality.

To view the current groups and users of the site, select Users > View Member Groups from the primary admin navigation.

Users Site •

View System Groups

Add System User

Add System Group

* iftwMembratoups

Add Mentor

Add Member Group

Tip: If you only see System Group links under the Users navigation, go to Site Config > Edit Site, then select the Modules tab. Select On for Extranet (Password Protection) and click Update.

159 The Site Members & Groups page should then be displayed displayed.

Site Members & Groups

()Add Mannar OAdc Group W own. ons

User Groups

Entati Update Author/Editor

Your sex& returned no results

Create a Member Group To create a Member Group, simply follow these steps:

1. From the primary admin navigation, select Users > Add Member Group or click Add Group from the Site Members & Groups screen.

Users Site e.

view System troupe

Add System User

Add System Group

A View Member Groups

Add Meatier 0 AO lambinatoup

2. Complete the following fields for the Group Maintenance Form: 2.1. Group Name: The name used to identify the group (e.g., Board Members). 2.2. Email: If the group has special "group" email address to contact all members of the group, enter that email address here. 2.3. Content Tab Assignments: If you eventually want to allow this group the ability to edit content somewhere within the site, select which tab(s) members will see when editing content (see CMS Permissions and Allow Front End Editing Only sections for more information).

160 2.4. Your form should look something like the following:

Group Maintenance Form

Malt Maw Engrg

Bond rereacts

Content Tab /tag orrrente

Sac SEA Maio iirar Ca./Canoe Loaner Oreas Categorization

2.5. Click Add. 3. The group should be displayed in the User Groups list. Site Members & Groups

°Add Member OAdderam 111Pers:sMoss

User Groups

Name /Members) Email Update ObberfEdnor

Board Members (0) 0 20'3 12 57 FM 5,75 WOO. noon AT '3

161

Add Users to Member Groups After creating Member Groups, you will want to add users/members to the groups. The process varies based on whether you are adding new users/members or adding existing users/members.

Add New Members to Member Group(s) To add new users/members to a Member Group, follow these steps:

1. From the primary admin navigation, select Users > Add Member.

use Site •

View System Groups Am System Use Add System Group

View Mernber Groups 0 and Mint* Acid Member Group

2. This should display the Member Maintenance Form.

3. On the Basic tab of the Member Maintenance Form, complete the following required fields:

3.1. First Name: The user's first name (e.g., John).

3.2. Last Name: The user's last name (e.g., Doe).

3.3. Email: The user's email address (e.g., [email protected]).

3.4. Username: The desired username (e.g., [email protected]).

3.5. Password: The desired password.

3.6. Confirm Password: Re-enter the same password from the previous step.

162 4. Your form should look something like the following:

Member Maintenance Form

Foot Name Last Name'

Jon', 1,,c6

Company Job Title

CEO

Ernar Maisie Phone

lebn docilese , ant

Username•

,oho dosaerral, corr.

Password.' confirm Password"

..... •••

Profile Image

o,noto tOt

5. On the Group Memberships tab, select the User Group(s) you would like to assign the user to.

Member Maintenance Form

G nu

"RrflJror Rou rp5qrczir

!Ins.

User Groups

.VC M11171,,i, Group Memberships

6. Click Add.

7. If you uploaded a profile image, you will be taken to the Image Details screen where you can Re-Crop the auto-generated thumbnails.

163 8. Otherwise, you be be redirected to the Site Members & Groups screen.

Site Members & Groups

User Groups

Marne daambePs) Update Addle"Editor

Beam r,^v,ber,..;, 20 25Y Pla

Add Existing Members to Member Group(s) To add existing users/members to a Member Group, simply following these steps:

1. From the primary admin navigation, select Users > View Member Groups.

2. Type either the user's first name, last name or company in the search box, then click the spy glass to search for the user.

04 Ad van ced

164 3. You can also use the Advanced Member Search form by clicking the Advanced button located next to the search box.

Advanced Member Search

Search Criteria

Seed ENO ErmaIs

Active

4. If more than one match is found, you should be taken to the Member Search Results screen. To edit the user, click either the user's name or the pencil icon.

Nam. Equal Update Tana AuthorfEdnor

10111.00n011frIMCCOrn 01252013 1:07 PM SlemeWithinglon IF

- a^y 01 ,2572013 1 . 113 PM Ste.e VatgIng, P

Otherwise, if an exact match is found, then you should be taken directly to the Member Maintenance Form.

5. From the Member Maintenance Form, select the Group Memberships tab.

6. Select the User Group(s) you would like to assign the user to, then click Update.

Member Maintenance Form

Use 0,0.0. J

Group MemberstIca

165 Restrict Access to User Groups To restrict access of a content node or section of the site to one or more User Groups, follow these steps:

1. In Site Manager, navigate to the content that you want to restrict access to and click to edit (e.g., Members Only). 2. From the Type select menu, select Folder.

Type

3. Click the Publishing tab on the Edit Content screen. 4. Locate the Restrict Access to Specific Group(s)? checkbox.

t c.

5. Check the box next to Restrict Access to Specific Group(s)? to reveal a listing of groups in use for your site. You can +Click (Windows) or +Click (Mac) any of the groups you wish to grant access to.

For example, selecting Allow All Groups for the Members Only Page will allow users of any group access to this section of the site, regardless of which group they are in, so long as they are a member of a group.

g Restrict Access to Specific Group(s)?

Global Settings Allow All Groups Restrict All Groups Member Groups Board Members

166 5.1. Global Settings 5.1.1. Allow All Groups: This allows all Site Member Groups and System User Groups access to the content. It doesn't matter which group you belong to, as long as you belong to at least one of them. 5.1.2. Restrict All Groups: Will not allow any users who belong to a Site Member group access to the content. However, System Users may still have access to the content unless they've been explicitly denied access to the content. 5.2. Member Groups 5.2.1. Select one or more Site Member group(s) that you would like to enable access for. 6. Check the box next to Include in Site Navigation.

1.4 include in Site Navigation 0

7. Click the Basic tab, and enter some text in the Content area (e.g., "You must be logged in to view this content.").

Content

Source a a la - t'a B f U -S x,

Sty.es Ei 9 --7 Si CO frni real .1:

You must be logged in to view this content,

8. Go to the Layout & Objects tab.

167 9. From the Layout Template select menu, click three column.cfm

Layout Template 0

J Inherit From Parent blank.cfm default.cfm home.cfm one column.cfm three_column.cfm two_columnSt..cfm two_column_SR.cfm xml.cfm 11.1igAiir"

10. Set Inheritance Rules to Start New Cascade.

Inheritance Rules tut

Inflect k,,n:) Stan New Do Not Inherit Cascade Cascade Cascade

11. From the Available Content Objects select menu, click System.

Content Objects

Avalable Content Objects

J Select Object Type System Navigation Folders Calendars Galleries Components Forms Local Content Indexes Local Content Index Slide Shows ()Query Only) Remote Content Feeds Plugins

168 12. Assign User Tools to the Right Column Content Objects display region.

Content Objects

'ye Content Obects Left Column Content 00ecv:

System

Accept Comments Content Rater Dragabie Feeds Event Reminder Form Forward Email Go To First Child Van Content Content Objects Related Content Site Map Tag Cloud User Favontes UserTools

Right Column Content Odiects EZE=1111111111111n111111111111

13. From the Available Content Objects select menu, select Navigation and assign Standard Navigation to the Left Column Content Objects display region.

Folder Navigation Mutti-Level Navigation Peer Navigation Sequential Nav Standard Navigation Sub Navn gat non 'elan Content Content OdNect3s

Right Column Content Obiects

14. Click Publish.

169 15. Preview the Members Only Section.

Meander. Onty

Nome Memnors On -v Welcome. Steve Withington 000 Profile C. logssit Members Only • Favorites You must toe :agged in to vow DOS 000000• You ct,reney nave no tavortea You may add sore .ttung re. 'ADO to favorites' dnk beim.

` Page Tools

o Ada tJ0 011001005 JI, Pent las Page

16. Click Log Out. 17. A Login Form should now appear in the Main Content display region of the page.

Members Only

Please Log In

ussmssra

rsseorre

Vismemrnr we

Forget Username or Password?

E., your erne eassees ane wee sera It to you .

Ertel

Get Peansord

Not Registered? Sign Up.

18. Log In with either a valid and authorized Member User or System User account to see the content on this page and any content

170 beneath it.

Vinton, John Doe inn, Menthes, ' A add Prone reLccont

Members Only 44, Favorites You must bggetl In to oary thl cn-tnnt ACKS. 41.0. or wow.

.4 Pogo Toed* o mfavornes A Pro, the Pagn

eire ti roe

171 User Tools When System Group Users are logged in, they have a Front End Toolbar (see Front End Editing for more information) that runs along the top of the browser viewport on the public facing side of the site.

Edit Add 'deism Hintory Woe Serellan

This toolbar includes a number of links and buttons such as Log Out. However, when a Member Group User is logged in, they are not presented with this toolbar, so they would not Welcome, Steve Withington have the ability to logout. Mura CMS offers a A E Pfothie `.4 Logout handy User Tools content display object which contains some useful "tools" to provide ♦ Favorites some functionality for authenticated users. You currenthy have no favorites. You may add some using the "Add These tools include: to favorites" link below. 1. User Recognition 2. An Edit Profile Link Page Toots 3. A Logout Link Add to favorttes a. Pile! this Page 4. User Favorites and More The User Tools display object can be used by editing any content item, then going to the Layout & Objects tab and s electing System from the

Available Content Objects select menu, Content Objects then selecting User Tools and assigning it to your desired content display region. SySteel Accept Comments Content Rata Otejeen Feeds Event Ramona' Form Fonstard En:el Go To F∎rst Crelo Related Contest Site Map Tap Cloud User Feentes =11111.11M111111.1.111111011

172 Multi-Level Content Restrictions Mura CMS can handle complex content restriction scenarios. For example, maybe you want to allow both Board Members and Employees access to the "Members Only" section, and then within that area, you may have a section that you only want to allow the Board Members access to, or vice versa. This would be considered a "multi-level content restriction."

To add additional levels of content restriction within a password protected area, follow these steps as a guide:

1. Create one or more additional Member Group(s) (e.g., Board Members, Employees).

2. Add one or more member(s) to the group(s) (e.g., add John Doe and Marty McNeil to the Board Members Group, add Sara Manager to the Employees group).

3. Add content below the current password protected page. For example, under the Members Only section:

3.1. Create a Folder for Board Members Only that has additional content such as board meeting minutes, etc.

3.2. Create another Folder for Employees Only that has some additional content such as a listing of employees and a link to an employee manual, etc.

3.3. For the Board Members Only Folder, restrict access to Board Members only.

3.4. For the Employees Only Folder, restrict access to the Employees only.

3.5. Now, when a member of the Board Members Site Member Group logs in to the Members Only area, they will see a navigational link to the Board Members Only section, but they will not see a link to the Employees Only section, and vice versa.

173 System Groups Mura CMS offers baked-in functionality to create and manage System Groups with roles such as authoring and/or editing privileges. It is important to understand that within Mura, content permissions are tied to System Groups, not individual users.

Before creating System Groups and adding users, it is a good idea to have a clear picture of the sections and/or pages each group will be responsible for and the permissions or roles you wish to grant them. Try not to think of the individual users themselves, instead, think in terms of the group, even if the group may only contain one user.

This section deals strictly with the creation and maintenance of System Groups and users. Permissions (roles) will be covered in the next section.

Super Admin The initial user account that is created when Mura is first installed automatically receives the special designation of "Super Admin." In addition, any user that you create can be designated as a Super Admin by going to the Advanced tab of the System User Maintenance Form. These users may, but do not necessarily have to, belong to any other group(s).

Users designated as Super Admin have the highest authority, rights, and control in Mura CMS. Super Admins can add/edit sites, edit Site Settings, create/manage System Groups, Member Groups, add/edit users, has full access to the File Manager, can install/delete plugins, and much more.

Yes, Super Admins have great power, and as the old saying goes, "With great power, comes great responsibility."

Obviously, anyone you choose to designate as a Super Admin must be someone you can trust.

174

Admin System Group By default, there is a single System Group labeled Admin. Any users added to this group will have full access to all enabled functions within Mura CMS except Site Settings and restricted access to the File Manager. Members of this group are authorized to create additional, custom System Groups and/or System Users as well as assign permissions for these groups/users.

System Users & Groups

System Groups

Name {Members) Email Updefe AuthortEzhor

Adorn I

Add New Users to Admin System Group 1. In the primary navigation from the main menu, click Users > Add System User.

View System Groups

0 Add Systarn User

Add System Group

View Molter Groups

Add Member

Add Merril:my Group

2. Complete the information on the Basic tab of the System User Maintenance Form.

2.1. First Name: Alice

2.2. Last Name: Admin

2.3. Email: [email protected]

175 2.4. Username: [email protected]

2.5. Password: enter any password you wish.

2.6. Confirm Password: enter the same value you entered in the Password field.

3. Click the Group Memberships tab and check the box next to the desired group(s) under System Groups (e.g., Admin).

System Groups

Adir,r1

4. Click Add.

5. You should have successfully added a user to the Admin System Group.

System Group Maintenance Form

O tirn

Group: Admin

Name Email Update Time Mawr/Edam

Aernin, Alice eacearkrind,01.1.carr 011252013 4.55 PM Sere Wrnington #0

176 Add Existing Users to Admin System Group To add existing users to the Admin System Group, simply following these steps:

1. From the primary admin navigation, select Users > View System Groups.

Site s

1111 View System Getups Add System Use. Add System Group

View Wilber soups Add Member Add Member Group

2. Type either the user's first name, last name or company in the search box, then click the spy glass to search for the user.

3. If more than one match is found, you should be taken to the System User Search Results screen. To edit the user, click either the user's name or the pencil icon.

eme Email Update Time AaMPreaditOr

AliGe(BtUeliwer a a. aCIIII1getT. corn 3,28'2013 3.33 P1.1 StereNAthIngton

rem OUP Rtver) ,anti. ,anagelVarad ,wrr /28'2013 3.37 PI, Steve NAMIngtan

Otherwise, if an exact match is found, then you should be taken directly to the System User Maintenance Form.

4. From the System User Maintenance Form, select the Group Memberships tab.

5. Select the System Group(s) you would like to assign the user to, then click Update.

177 Custom System Groups Creating custom System Groups allows you to assign content editing permissions to one or more specific group(s) for specific areas of the site. However, it is important to note that when adding custom System Groups, you need to explicitly allow the group access to the site, and let Mura know what permissions the group has and/or does not have on various content nodes.

In short, creating custom System Groups is a multi-step process:

1. Create Custom System Group(s). 2. Add Users to Custom System Group(s).

3. Enable the group access to the site (See CMS Permissions).

4. Tell Mura what permissions the group has on various content nodes within the site (See CMS Permissions).

Create Custom System Group(s) To create custom System Groups, follow these steps:

1. From the primary admin navigation, select Users > Add System Group.

Users Site •

View System Groups

M System User 0 Add ardent-21=p

Wee Member Groups Aea Member

Aaa Member Group

2. Complete the information on the System Group Maintenance Form: 2.1. Group Name: Enter your desired group name (e.g., Human Resources)

178 2.2. Email: If your organization has a group email address that would copy all members of that group, then you could enter that email address here (e.g., [email protected]).

2.3. Content Tab Assignments: Select which content tab(s) users who belong to this group should have access to when editing content. Simply +Click (PC) or +Click (Mac) to select more than one tab assignment.

System Group Maintenance Form

Or000 Email Haman Itaaoames huraan.rmou'amteeraa. oara

Conte/A .1'th A55•000500t5

anic 820 ebnb LCPsalm Opbons Ler. 6 Ottects '""=1.11.111.1111111..

3. Click Add.

4. The group should now appear on the System Users & Groups screen.

System Users & Groups CI

0 AcdWr000 0 Ackt Grot

System Groups

Emit UpIsts Auther/ECItor

Admin

Human Remo,. 00 hUMal resou55550ernal.own 0112 5/201 3 5:02 051 Steve With nmon # 0

179 Add Users to Custom System Group(s) To add users to a custom System Group, simply follow the steps from either the Add New Users to an Admin System Group or Add Existing Users to an Admin System Group above. Except on the Group Memberships tab, select the custom group(s) you desire the user(s) to be assigned to.

For example, try adding a new user with the following details to the newly created Human Resources System Group:

1. First Name: Marvin

2. Last Name: Manager

3. Company: Blue River

4. Email: [email protected]

5. Username: [email protected]

6. Password: enter any password you wish.

7. Confirm Password: enter the same value you entered in the Password field.

8. When completed, the System Users & Groups screen should look similar to the following:

System Users & Groups

System Groups

Name (Members) Emel4 00dets 14AhaelEditor

Aarrin (!)

Human Fieexcras hurnan.reSOUr000.mailmen 0125/2013592 PM SW. WMingtmi / 0

180 CMS Permissions Mura CMS allows you to control the ability of users to make changes to content. For example, you might want to allow a group "editing" capabilities so they can write, publish and/or delete content. On the other hand, you may want to allow some other group(s) the ability to "author" or write content only, not necessarily the ability to publish or delete it. In addition, you will most likely want to control what section(s) of the site each group has access to use these privileges.

User Pools Mura CMS is "multi-sited." This means that under one installation of Mura, there could be several web sites (each with its own unique domain name, subdomain, or any combination of unique domains and subdomains). Because of this, Mura CMS allows you to share User "Pools" across one or more sites. This applies to pools of both System Groups and Member Groups. Theoretically, you could use only one System User Pool for all sites under your installation. For example, you could create all of the System User Groups under the "Default" site. Then, you could share the System User Pool (and/or Member User Pool) by following the steps outlined below.

181 Sharing User Pools 1. Go to Site Config > Edit Site for any site you wish to share the user pool(s) on.

Site Config

Edit Site

Permissions

Class Extension Manager $,

Create Site Bundle

Deploy Site Bundle

Trash Bin

Update Site

2. Click the Shared Resources tab.

3. Here is where you can decide to use a different Member Pool and/ or System User Pool by choosing the desired site that contains the pool of users you wish to use from their respective select menus.

Site Settings

M Class Exarlsiol Atrsiyn ITnell Bro f U;:date S.ie Fil Site Burtcis

Member User Pool bisies. thew Peal Advertiser User Pool Disolay Oejaet Pool

This site 4 TIns srte This site : 1,, site

!Aired 14.20.004

4. Click Update.

182 Allow Groups to Edit Content The "Admin" System Group automatically has permissions to edit any content within any site that the "Admin" System group has been either created in, or shared with. However, because there could potentially be several web sites under one installation of Mura CMS with a multitude of user pools being shared across one or more sites, it is necessary to explicitly grant access/permissions to all other groups you create under each specific site within Mura.

To grant a group the ability to make changes to content, you will need to decide:

• Whether or not the group has access/permissions to edit any content.

• If so, what specific content/areas and/or modules the user group has access/permissions to edit.

• What permission level/role do you wish to assign to the group.

Permission Levels/Roles Before you begin granting and/or limiting access to any groups, it will be helpful to understand the two primary "roles" within Mura CMS:

1. Editor: the user group can create/write/edit and publish (make live) or delete content.

2. Author: the user group can only create/write/edit content. Groups under this role cannot publish or delete any content.

Outside of these primary roles, you will also be able to explicitly "deny" access or possibly allow "read only" rights in some areas as well. For example, the Human Resources user group could have "Editor" privileges within their specific area or section of the site, and have no other access/privileges anywhere else in the site.

183 Site Access/Permissions To grant site access/permissions for user group(s) to make changes to content, follow these steps:

1. Go to Site Config > Permissions

Ste Config

Edit Site W Powisions

Ciess Extension Manager f

Create Site Bundle

Deploy Site Bundle

Trash Sn

Update Site

2. Check the box next to the System Group(s) and/or Member Group(s) that you would like to grant permissions/access to edit content. If you wish to disallow access, simply uncheck the box.

Permissions

0N,,

0 0.0 set owns., s ter S''.0 4•'00 00:

System Groups

ANON Orcup

Human Resources

IT Department

Mattering

Member Groups

Thfte pe 00,0‘1,401 custom 0.er si «:uront t

Mow OrOUP

Board Members

Uwe

3. Click Update.

4. Members of the selected group(s) should have access to Mura CMS. However, they will not be able to edit any content yet!

5. Next, you will need to setup access/permissions to content and/or modules for each group you have enabled for the specific site.

184 Content Access/Permissions Mura CMS provides the ability to grant or limit editing permissions for each content node. It is important to note that permissions cascade, starting from the selected content node, down to its children and beyond. You can also explicitly deny editing permissions for any child(ren) under the content node as well.

Site Manager

Architectural Yaw vm

,tto.ltty

Tthe Objects Dispiay Tema.. Nay Updated

" Homo e , M V ttt.,,,,r11,..71Alte /0 • , Bog 9 V 000701 907 35 tnn /00#11.02 0., About US 4 V rm , 0125/2019121116 aM /0M firemIss.o,

• News 4 .,.., V 00200013 5:1910 PIP /0100/ 0

O 0,010 Gallery ..., 7 ,,, 01/20/2013 10D1 Oa PM /0000 • D Contact Us 0 4^ 7 ,e . 01120/2013 11 2529 nfd /Gallo Do WertterS Only 9 4 v al*v7O,a3selsem

1. In Site Manager, select the Permissions icon next to the content node that you want to set permissions for. Permissions „_„

set DtrittiS,Vls fur Hoene. s Maly ,44,tt ttle tattio nLttott atttte JcctCtOkOcyou naiad Oka.. aannenhoolng radio, Mang Derr s,liotts System Groups

biter Author Inherit Reed** Deny Group

Human Rethurces

;•.V Ivtartorkrig

Member Groups

perthssluns oor bested nth, Grath, exteithon moan06 net a cod ore thumpers to Akt cora, These senoths coth de any odac ne0000 se, Cl 01005$ a0,0,0 ,:tta

Editor Author Inherft need Only Deny Droop

LIEKtieE

185

2. Select the permission level or role for each user group. System Groups

Editor Author Inherit Read Only Deny Group Human Resources

(11)k 1T Department • Marketing

2.1. Editor: the user group can both create/write/edit AND publish (make live) or delete content within the selected content node and its child(ren). 2.2. Author: the user group can ONLY create/write/edit content (create "drafts"), but they cannot publish or delete any content within the selected content node and its child(ren). 2.3. Inherit: access/permissions as applied to its parent are used. 2.4. Read Only: the user group can only "read" the content within the selected content node and its child(ren). 2.5. Deny: the user group has NO access/privileges within the selected content node nor its child(ren).

3. Click Update.

186 Module Access/Permissions Mura CMS provides the ability to grant or limit access to the following modules:

1. Change Sets 2. Components 3. Categories 4. Content Collections 5. Forms 6. Plugins 7. Site Members

To set permissions for a module, follow these steps:

1. Go to Modules, then select the desired module or plugin (e.g., Components).

Content Staging

Components

Categories

Content Collections

Frans

File Manager

PlugIns

2. Click the Permissions button. Component Manager

Gonvoneit W Penres4ions

187 3. Select the permission level for each user group. Permissions

0 3o,

1 o set pomassaoria :or;rx,1r,,,..5, Sit ply 05Gb the rally tmtton ot the Uior GroOPs You to 100 Iriarh}al it System Groups

Editor Author Inherit Deny Group

R00n1(1.9

IT Departrrent

Marketing

Member Groups

These mr,,s1.1; ow) he unto *15 mens,on mmw.a that slow moot., n0 edit content. 1 top u.inis pyarlde ery Ws, perniss,ons set cc emu. as..

Editor Author Inherit Deny Group

Etheld Merri.rs

3.1. Editor: the user group can both create/edit AND publish (make live) or delete items within the selected module. 3.2. Author: has the ability to publish drafts within the selected module. the user group can ONLY create/edit items (create "drafts"), but they cannot publish or delete any items within the selected module. 3.3. Inherit: global administrative permissions are applied to the selected module. 3.4. Deny: the user group has NO access/privileges within the selected module.

4. Click Update.

188 Allow Front End Editing Only

All System Group Users will see the front end editing toolbar while browsing the web site.

However, all System Group Users also have keys to the back-end administration area of the web site where they may be able to access the Site Manager and one or more Modules such as Components, etc. You may want to allow a specific group of users to edit content, but not necessarily access the back-end administration area of the site.

To allow a group of users the ability to make changes to content, but restrict those users the ability to access the back-end, follow these general steps:

1. Create a Member Group (see the Members Only section).

2. Grant Site Access/Permissions to the desired Site Member Group (see the Site Access/Permissions section).

3. Grant Content Access/Permissions to the desired Site Member Group (see the Content Access/Permissions section).

Front End Editing Toolbar When a user of an authorized Site Member Group accesses a page on which they have permission to edit, a front end editing toolbar will appear. However, it will contain a limited set of features as compared to the toolbar that System Group Users are accustomed to. The most notable difference is that the toolbar does not contain a link to the Site Manager.

Tip: Instruct authorized Site Member Group Users how to log in by using the keyboard shortcut of pressing the Escape Key and the lower case letter L (e.g., esc+I)

When a Site Member Group User adds or edits content, only the tab(s) that were authorized for that group during the group creation process will appear. The example below shows only the Basic tab, because that is the only tab this particular group has been granted access to.

189 Content Staging Manager & Change Sets The Content Staging Manager provide a way to simultaneously publish multiple versions of content all at the same date and time. A Change Set is like a bucket where you can toss in any changes you want to make "live" at the same moment.

You can also preview a site as if the content assigned to specific Change Sets has been published. Mura CMS even has an option to have all content to be published via Change Sets.

Activate the Content Staging Manager To activate the Content Staging Manager, follow these steps:

1. Click Site Config, then select Edit Site from the primary admin navigation.

Site Config

/ Eclit MO

Permissions

Class Extension manager

Create Site Bundle

Deploy Site Bundle

Trash Bin

Update Site

2. Select the Modules tab.

3. Set Content Staging Manager to On.

Content Staging Manager

4. Click Update.

190 Create a Change Set To create a Change Set, follow these steps:

1. From the primary admin navigation, click Modules, then Content Staging.

Modules

Canto* Shift N

Components Cedegories

Content Collections

Forms

File Menage

Ptuglns

2. This should display the Change Staging Manger screen.

Content Staging Manager

0.0<1 Ch.rvr Se. If Pe.,

Name Date to Publish in Update There are mgr.

3. Click Add Change Set. Content Staging Manager

0 Add Change Set W P enn, salons bt Add Change Set Name

191 4. Complete the Add Change Set form.

Add Change Set

0 &OM Chano Sets

Name

Saamer Promo

O•acapti.

Somme Promo runs from June through August

Pub**. Des 0

06/61/2013 00 a AM

4.1. Name: A unique name for the Change Set (e.g., Summer Promo)

4.2. Description: A description that may be helpful for anyone viewing or editing the Change Set.

4.3. Publish Date: The date to make all items in the Change Set "live."

5. Click Add.

6. You have successfully created a Change Set.

Content Staging Manager

#AJd CheiAoSer *Prat, Lars

Name Date to Publish Lag Update

Promo 013/0112013 12:00:00 AM 031282013 7M104 PM 0

ShOltlffq 1 - 4 OS 1 ii136,1K5

192 Add Content to a Change Set Mura allows you to add standard content items such as Pages, Folders, Files, Links Calendars and Galleries to Change Sets as well as Components and Forms. To add content to a Change Set, follow these simple steps:

1. Either add new content or edit any existing content node from the Site Manager (e.g., add a Page under News titled "Summer Promo Begins Today!").

2. Make desired edits and instead of clicking Publish, click the Save to Change Set button.

3. This should launch the Assign to Change Set dialog window. Select the desired Change Set. Assign to Change Set

Name

4. Click Save.

5. If you click the Version History icon, you should see "Queued" in the Status column and the name of the Change Set that the

193 content item has been assigned to under the Change Set column.

Version History

t 0 Der 'Amon wumy bt)eiree Caner,

This Notes Grange Set States Display 01,,ecu Fealwe Nay Uctlate Time AlltharlErrfat

Sumner Promo Etog no NOW' S,e,rer Promo Que,an 0112W2013 / PHI Steve Wohonlon

6. Repeat as necessary to produce a complete set of changes.

The process is pretty much the same for Components and Forms, just select Save to Change Set instead of Publish, select the desired Change Set, then Save.

194 View Content Assignment List Mura also maintains a listing of all content that has been assigned to each Change Set. To view the assignments, follow these steps:

1. Edit a Change Set, then click the View Content Assignments List button.

Edit Change Set

o Back to Change Sots ER View Content Assignments us,

2. The Change Set Content List screen should appear. Change Set Content List

Name

:AMMO' Pl..0

rater MOW ritn ?Commis {UXIVe Writ le OeW

*view Ur*

Atsfrkk,kk.., 7k ,A- 7.497., CF3&CCEA3897,a

Summer ,um. Begins NOW

195 Preview a Change Set Once you have added content to a Change Set, you can preview your site to see what it will look like once the Change Set has been published. To preview a Change Set, follow these general steps:

1. From the primary admin navigation, click Modules, then Content Staging.

Modules

Content Staging

Components

Categories

Content Colleottons

Forms

File Manager

PluginS

2. From the Content Staging Manager screen, locate the desired Change Set and click the Preview icon on the far right of the row.

Content Staging Manager

0 Cnange Set VI Penntssions

0884 to Publish UM Update

20141220:00 00 AM 0 0222013 8 33122 PM 033 0

3. The Home page of your site will be displayed with the Change Sets toolbar displayed at the bottom of the screen.

tAt*ItettAti

196 3.1. Preview Change Set: Use this select menu to toggle between Change Sets and browse the site as if all items in the Change Set have been published.

Summer Promo (06/01/2014)

3.2. Items in Change Set: Use this select menu to go to and view any item(s) included in the current Change Set preview.

Change Set Assignments Contact Us Summer Promo Begins NOW! . . . Change Set Aasignmeats

3.3. Item Status: As you navigate the Change Set preview, this area will display whether or not the content currently being viewed is included in the Change Set.

3.4. Refresh Change Sets: If you create a new Change Set, add new content, or edit a Change Set item in the Admin area while previewing a Change Set, click the Refresh Change Sets to update the toolbar.

3.5. Exit Change Set Preview: Click to close the Change Set Preview and to view the site in its currently published state.

197 Publish a Change Set If you enter a Publish Date when creating a Change Set, the Change Set will automatically publish all of the content assignments on that date and time.

However, there may be times when you wish to publish everything ahead of schedule. So, Mura also allows you to manually publish a Change Set at any time.

1. From the primary admin navigation, click Modules, then Content Staging.

Modules

Components

Categories

Content Collect ons

Forms

File Mower

Plops

2. Click the Name of the Change Set or the Edit Ai icon.

3. If publishing manually, click the Publish Now button.

4. Otherwise, enter a specific date and time using the Publish Date fields, then click Update.

Publish Date G

06/15/2013 PM t,

198 Publish via Change Sets Only If desired, you can force all content changes to be published through Change Sets versus the standard publishing process. To enable this feature, follow these steps:

1. Go to Site Config > Edit Site

Site Contig

edit Bfte

Permissions

Class Extension Manager r

Create Site Bundle

Deptoy She Bundle

Trash Bin

Update Site

2. Select the Modules tab

3. Select On for Publish via Change Sets Only

t ent Venal

Content Collections Forma Manager Advertisement Manage,

Off ® On Crti .j.) Or Oft

Email Broadcaster Email Broadcaster Limit Modules

4. Click Update

199 Site Specifications Site Map

Pt1Ott C alt.

Press ! Financial I Rea/mass Photos Sparta

Calendar

Board of RSS imam Directors

LEGEND

Main Navigation

Second Level Navigation I I Custom Application Password Protected Area

Home Page

0 10 Search

Home f About Us He ntaet Us i Members Onty Recent News

" • • "-•••'"" Lorem ipsum door oil amet

Lorem ipsum dolor sit amet. no '• rmo, 001 r stt 0,m1ot-e.atct.00. .41 Pf Lorem ipsum do:or sit amet

:wade Lorem ioaum doer sit amet

Vtf2010 Lorem ipsum dolor sit amet

If112C10 Label Label tororn ipstirn dnior sit 'woof

$11109

Loreto sown dolor sir artist Lorem Scum Coln, sit anal. 1.0reft1rpsutr Oolor set arne• conseclelvr ed.pscing old come.. adOscing Old .10111901,3tur orbpssong el I P,Ieser111antlie P,sesentlaC011211x1 ,1.., .rent 100100 pulvinSn Bowe Qv. lu due 1MM. V,• , 1 5, us 1u01uS1000.r V715.5 908 n.11..910,1of vat,. 00.

Read Mots Reed More Read More

Page Feature Requirements 1. Rotating News Stories 1.1. Rotate through featured stories from, News and Blog section that are marked as "Featured". 2. Recent News Feed 2.1. Display the 5 most recent articles from News section. Display order by date of article in descending order (most recent on top). 3. Content Features 3.1. Include 3 graphic and text based call outs to the Members Only section, Photo Gallery and Blog.

201 About Us

Home C About Us I News l Bog Photos Contest Us I Members Only

About Us Recent News

Lorem ipsum dolor sit amet, consectetur adipiscing 9101 Praesent 1, 1,0 lu pulvinar augue, quis luctus torpor varius ac. Proin tempos magna in eros Lorem Ipso oonsectetur guts vulputate risus vutputate Lorern ipsum dolor sit arrtet, sit antra oonsectetur adipiscing elit. 1012010 Loren) poem Dolor Sit Amot. Lorem mourn dolor Fusco testroto, veld non lamest omelet., urns Mks tempo' lectirs, nee erase. Out also a: neoue Fusee seglottelln Moreel urea eget tot PrItct ultrimes Sed fit sent Urna 7060CROMS el onto In etas monsto molestie tnngille nec Solid sad at.. euismod sgula seolertmete Fusee else:pre, vekt non iaccent imam-dot. urna felts temper Iect00,. nec also 00 dot nisi a neque. Fusee solicitude) Fusco trfseque veto non lamest Imparoret, urns fats temper lacers. nec 1000000 Our rim a neque. Fusco sollotturen Wore.t erne eget WPM.. Sed orei earn urns Maecenas al meta in $105 manes moles.' Wardla non no Nulls sod Segue terlsmod Ft.'s s'AmlF,Frc

Lamm !poem Dolor Sit knot. Fusee Rots:lee veld non laoreet imperdiet urns fells temper lectus. nee 0011000 del nisi a neque. Fusco solbeitteltn Moroet lona eget Sed et sem urns. Maecenas id ado o eros Monous molest. frogille nec Ma. Sues peel auguo etesrned Saute seeterisque

Larsen tpstan dolor ea amet. consectotor adicisong Opt, Fraeeent odors Pt..ar at.... gels lupus WIet vanes ac. Proa tempts mawna n pros conseOetur quo vulputate nsus vulputate. Alisuarn erat volute.. Maecenas vet dap... gown. Elora facilites. moan ac ptatestal aliquot, Osunl eft 5051105 nom, at Wan& nuns Hoar° el totem. MOlti ac oral neque. sect lacues tato, Perientesque 0166 fiat suscine vat egestas eu, ',onerous sea Imam. Quote. Pomona:re atiouel tatscoot. Cras in 'honours too Yearn. at magna as old aligeet phar0Va Made telloe nuns. varies sec! [incident el, plebes sit amen bouts'.

Page Feature Requirements 1. Recent News Feed (right column) 1.1. Display the 5 most recent articles from News section. Display order by date of article in descending order (most recent on top).

202

About Us: Board of Directors List

About Us News 1 Blog (Phot0s Us (Memb

Board of Directors Upcoming (71• Ste Meetings Loren iosion dolor sit ornet, eonsectetto adiposang slit. Praesent Iacono Board or Director. 1''.111111 putmar auqUe, quo lodus 10110r Varit.5 aC. Proin temps magna in eros consectely getis vulputate riseS vutputatelOrem lasam dolor Sit amet, brim ipsurn dolor consectetur adipiscrtg slit. sit anal

John Doe n12010 ExecuiNe Loren ipsian dolor Lows ipsum dolorsit snort el #. 'no sit attlet posturer moo (pis MMus oor

o3o.Soso...V.Ont

III Marty McNeil 'Om Pr.10901 Lamm locum dolor St send, consecietur sitiyasong ekt. Praesem Isdnis puMnar Bogue. csiis ludas torts ven,1 as.

otosm Moos

Jackson Lorain. Treasurer

LOMA, )(Min dolor st met, consedetur aeOlsong sit. Praasent 000000 augue, t1uo lulu. torn yams ac,

propelo-on

Christy Moreno Seastary Lawn Owl dolor St most, eansedelor adiposang ell. Plsasv01 pltIvinar TIMM, Q0101(.105 tort, va,luS 00

00 18

Valerie Ipsum Assuaale °sector Loam Ipsurn dolor at emet, amsedetureeipisong ell Preemie ladnia puheinat 00500 1101311.01.151011101 021611100

Page Feature Requirements 1. Board of Directors List 1.1. Display headshot (thumbnail), Name, Title, Summary and link to complete profile for each board member. 1.2. Order based on title and command. 2. Recent News Feed 2.1. Display the 5 most recent articles from News section. Display order by date of article in descending order (most recent on top).

203

About Us: Board of Directors Detail

Home I About Us News I Blog I Photos I Contact Us Member's Only

Uv a

Or John Doe My Recent Blogs c^ao Executive Director Board of Directors • Lorem (pourer dolor .1,i111 Gas Office 91b-555-1212 sit amet 7s41, McNeil Mobile: 916-555-1213 ;aelee, I mem 1 , 1,21i10 Mmer, Professional Background Lorem ipsum dolor Fusco oislique. well non lamed impotmet, sit erne* uma taps temper Motu, rec longue Out rusi a neque. Fusee voleciludin Boreal Loma eget Orioles_ sea It sem urria. Maecenas id Odin in ern rhonos molestie net Nitta sad augue teetered 'Bola scelessoue.. Fusee In:Moue vela non leaver imperdiet, one fees boor bloat no trialtque Out 0101 o Fleets, Fusco soil Oudin eras Mona,. mowatie travail:in. nisi. WO see sunup creamer !pule etieli1.(1110. Fuer. OOP.. volt rem More.' snOtillat. U1110 fah, tempo- Moo, nee antique dui nisi a motors Fusee solecrtudin eros ftlancus moissae hinglea nen nisi beta and Sagas autsmod Gyula acelartsque. Fume Matelo t user von Motel Operate, ema feln armor tectos. nee bloom Mu nisi a neoue. Fused soatctituatn

Education

Buotess Adminisolloo - UCLA- 1998 M.S. Economics - Harvard - 2002

Follow Me

Twitter: Teeett ortiddhOto My Forebode Profile to rebook. COM, nndoe

Page Feature Requirements

1. Board Member Image 1.1. Display a larger version of the board member image 2. Recent Blogs Feed 2.1. Display the 5 most recent blog entries for each board member.

204

News

Logs

About Us I News I Blog I Photos Contact Us Member's Only

News Categories

Lorern issum dolor sit amt. consectelur adipiscing .lit. Praesent pulvinar augue. subs luctus [odor varius ac. Proin tempos magna in ants consectetu, subs vulputate Usti, vulputate. View ad

aunts torten ipsurn dolor sit met. Lows ipsum &Nor rirt amid, consetsetur stSoiscire denim. augue yobs lust. ton& varld•

totem plum dolor sit ardel, I diem ;pawn dolor ed amid Lxmatd 10, orteddne aft rhaeseet itddrdi pusirer twee, do* h0flistor101 Weide ad

1,2010 totem Mewm dolor slt amet Lawn Own Oulu sit omet eons...tor rued g ear R79330111 pukher *up.. Quid kudos terror twirls ac

titersn _stsm

1112710 Larnm ip stall dolor sit drodt, Lorern npratrn dolor sot aural. cooderetelut ...Odor) alit. 0,0 .00010010)0 purriner wood quer fOdor Adds ad

ttitnto torero Ipsum dolor sit amet. Lowe earn *kr etyma, eoneedielor adosong eft draesedt leanio puMnempue, eels emus mot mimeo ed-gstsli

201 4 IS tkol

Page Feature Requirements 1. News Listing 1.1. Display the most recent news items in a list based on news release date (most recent on top). 1.2. Display date, title, thumbnail (if available), summary and link to full story for each news item. 1.3. Display 5 items per page. 2. News Categories Feed 2.1. Display a filterable list of news categories in the right margin. 2.2. Display the number of news items within each category 2.3. Selecting a category should display the news items within that category

205 News: Article Details

Search 11E

Home About Us I News I Slog E Photos I Contact Us I Member's Only

totem Ipatun dolor sit Lorem ipsum dolor sit amet. Categories

ftJahn Dor Loren: IMP, tamer 9f amen. LONBIllosue: dolor of arnet consecrate adipisctng Loreto ,C.01 00.1.! ',let eon Praesant 100000 punimar augur.. has lams Slots Al! tutor caters at. Ptak, tempos magna In eros Loam ,penne 0001 se .ee: consesmair outs maputale nsos yulputate. Motown oral volutpal. Maecenas vat dapibus geom. Etlann, Peere dolor se non Lorem , Maims, Ipsum ac plazerat abquam. Ipsom est saglds mlt, at blanatt nunc Steno at Intern. Mord at seat n0000, sad Maoris tutor. Pellentesgue nibh • sosopt vet egestas Cu, yenenabs sad totem. Outsque formentom aliquot ta0Met Gras in *00005 ma. Viyamus at magna old aliquot pharetta. Iambi lellus nun, vanws sod tinddurg at, Ames srt amen

Fuse OMNIue 0e11 non moreet enperdiat urns tees lamp. Maus, roc Mellow ma nisi 0 new°. Foote solhatelin remote tone 0951 Andeg. Sad 01 seen um Maecenas m odic In eros Monaus motestia fringlas nac rxsi. Nolla sod segue ...ad itgeta scelerisqua Mann.. Integer • nuna a net melenstme pulyiner. Donee }turn 00000, ornate oat yananans malesee. volmilate vitae sale Chant bottle Jut sosmoil non emmor sc, nollicatucan non tons. Donee cunsactatuy sett at Weiland farreentoon, juste share mhor4s mate.. cal !lambent Msuro nil qns augur. Donee ulelcos sent 051 sant 500011 i1001 wiggles terms limationt Mauna tebrasang mobs dolor at malesuada. • Clam Sgula du, 005000 non umlaut ac. sonnitudrn non meets. Danes conseclelur, roil el almtend fannentotn. msto obaro !aborts nouns, vet 1-xnarear ipaum no guis augur.. Daum entices yarn yet sera susapit vet snobas lorpis linaMunt Mauna adloiscing sagees dolor M

Page Feature Requirements 1. News Image 1.1. Display a larger version of the thumbnail image within the Nevvs Article details.

206

Blog

Slog

Laren OMIT, dn.! 40 :071P1 r,Insedelur att+Msong Praesent tnan puhAnar supue, qt. 60.14004 vanus dc Cron lenpus1710gna emos Moseetettlf qua Wt.a

law ern ,N,113 dol-or arm, brim 'nor dabs oi amet emsac., itrIssrap, 4,1 044440 4)0441 rower ougue. twit hams wareea ic

*NM

YSE,

Laren, iO4010 04104 4 lame, Lamm v." doe, 4.1. come., ad p.m P me 0,444,4,40. as Nr.. IOW rani....

al .11.,,

Laren, Sp,um dolor 40 erne. Le044,41441.0 we 0.4640.4, 444444, 104.24, ou,clusino,,,e 44.

ircacc ,

Ira .41.74,

Lon. 044nr r10104 41 anva • Lem adlor Menu. 02450414. Pu. • I 41upuil q.t....O. W. ac .

4044 044,44*

t 040 , 4 Loren, 04040 0000 . AI,' Losrn maur, dat, 44 4444, a P.m, rep. aud .010,1440. 44,

.Ma

Page Feature Requirements 1. Blog Listing 1.1. Display the most recent blog items in a list based on blog release date (most recent on top). 1.2. Display date, title, thumbnail (if available), summary, author, number of comments, average rating and link to full story for each blog item. 1.3. Display 5 items per page. 2. Blog Categories Feed 2.1. Display a filterable list of blog categories in the right margin. 2.2. Display the number of blog items within each category 2.3. Selecting a category should display the blog items within that category

207

Blog: Article Detail

Logo

Home About Us J News a Blog 1 Photos I Contest Us 1 Members Only

Lamm,paamdoe oil Lorem ipsum dolor sit amet. Categories amet eV J... lor alt ate; Lorem amen dolor sit anteL oansectetur &damning it arm elit Pr-meant drama nlVNar augue. Cud SM. todar venue an. Prom tempts rnagna in ems a ante consedetur guts min..° rims MP.... MSS.m wart volutpat. Maecenas vet dapibus Guam Ettam Rate This dad- art Inlet faCilldsi apsurtl an puss at adds., locum est sAliths num, at Wanda our% !Moro at toren Marti ac mat nen.. sad Marls toms Pellentasquo ruhn nest. susapct eel egestas at venenal.Sed ioren, Odsqua lennuntum alquei usentnt Cras m mantas lea. Vivarnus at manna an eat slayer pnarona Mord team rears. vanus serf tinnidunt at. drones sit arnet Suss ends. vellt non lade. Overdid. Lana fees arrestor lectus. nee Metes. dur nisi a neque. Fusee soak:Crude dulcet uma Nat denies. Sent el sem urn. Meeeet id oche to else rtioncus molestie fringfilla nes Ns, tulle sod augue °ado'sed dada scelensque interdum Integer vtmrra male a In SeelenSeUe pulvinar. Seine insure INN.. ornate vet itenenatis molest.. vainutate ease ante. Elam sou. dun. dismet non tea.af an, sollicauctin non metes Donoc rmosocietur. volt at elmfeno fermetsum. 'pas doom lanai. muss. eel hendrent assure me cud augue. Dorm. ultn.s scan va son, yuscitat A, mg...kap. Unocruna Maoris arlipsdrg sagatis dolor at malesuada.

Elam figula dun ...pa non torpor an sulked:1in non melds Donee consent... veil at ernitend ferrneratern juste Went Warta mien{. ved hendnan upstart fill gds auyue. Dons, Latrines sem vel sem suscrprt sad sagatis Canis tinoidunt. Maui 3dt:racing sag.s dolor at malesuada

Past a Comment

Reinenehei My Ll litN111410. Satisuitre

;:.Reaatea CMS

Page Feature Requirements 1. Blog Comments 1.1. Allow readers to post a comment on the Blog Details page. 1.2. Comments should appear instantly without requiring approval. 2. Blog Ratings 2.1. Allow readers to indicate a rating (1 through 5 stars) for each Blog entry. 2.2. Display the average rating on the Blog detail page.

208

Photo Gallery

Home About Us Hews ' Slog i Photos Contact Us Member's Only

xo Photo Gallery Fusee trissque, veld non laoreet imperdiet, urea fells tempos lectus, nes tristique dui nisi a neque, Fusee solticitudin laoreet urea eget ultricies. Sed et sem urea. Maecenas id odic, in erns dioncus molestie fringilla not nisi .

Page Feature Requirements 1. Gallery Listing 1.1. Display thumbnails of each photo in the gallery in a grid. 1.2. Display 15 items per page. 1.3. Clicking on each thumbnail should open the selected photo in a modal window.

209

Photo Gallery: Image Details

Page Feature Requirements 1. Gallery Image Details 1.1. When selected, each photo should display in a modal window pop up. 1.2. User should be able to close the window and return back to the Gallery landing page. 1.3. User should be able to move forward and backward through the gallery from this position.

210

Logo ID

Wane About Us I News Contact Us J hteintier c Cot,

Our Address Sloe .ntr,a,Kle, Olive N.1,, 0. ante 21 Rancho Conlon, CA 95670

Call us: 1800-555-1212 Email us:

Special Requests

tr you need have special needs please canntinste the tonlect tear WI resentative will get in touch voilh you.

your internist.

wow.,

Tour Message

Mess., •

Page Feature Requirements 1. Google Map 1.1. A Google Map of the address should be embedded into this page next to the address content. 2. Contact Form 2.1. A contact form should be present on the page to allow users to submit a special request message to the company. 2.2. Once submitted, the user should receive a confirmation message on screen. 2.2.1. "Thank you for your submission. We will be in touch with you shortly." 2.3. User submissions should be emailed to info0widgetcompany.corn 2.4. User submissions should also be collected in a database for later review and exporting.

211

Members Only: Log In

Moore i About Us : Nessj 61og Fnotss I Contact to I Member's Only

Members Only Section

Please Log lo

For,' Usornam• o. Passwore?

4112=211,

Page Feature Requirements 1. User Access Restrictions 1.1. Users that are not logged into this section should receive a log in form when accessing it. 1.2. Only site members who are in the site members group "Members" should be able to access this page.

212

Members Only: Landing Page

Logs EMI

dome 1 About Us I News Ehog 1 Photos I Contact Us I Member's Only

Members Only Section

Loren ipsurn dolor sit amet, consectetur adtpiscing alit. Praesent locate) pulvirtar segue, quis tuctus tenor varies ac. Proin tempos magna eras consectetur guts volputate nsus surputate.

Pirutncial Reports Loren losum door sit amet, consectelut adiplscAnq ell eraesent laoinia putvear :epee, gee ledhs tonnr emus at

Documents

Loren JeStell debt sit amet, consectetur selpisang raesent Moire; potion, segue, pea luctus totter value ec

el!tle

Images Lome roman oohs el erne!. tionsectetur sdyNedtlg aPt emesant !stints Puleoar amble, quo luaus tuna venue ac

Page Feature Requirements 1. User Profile Recognition 1.1. Users that successfully log into this section should be able to edit their profile and log out. 2. User Favorites 2.1. While in this section, users should be able to add pages to their favorites list. 2.2. This list should be persistent while they are logged in and within the Members Only section.

213

Table of Contents