Converting to new dotCMS templates (offices), updated 8/30/2019

Examples of sites with the new template include: Anthropology, Communications, Outdoor Ed & CC Bound.

Converting webpages to the new template

*You will repeat these steps for each page on your website 1. Select “Lock for Editing” on your first page, then select “Edit Content”

2. Select “Lock for Editing”

3. Select “Save / Publish” to save content.

4. For widgets, select “Edit Widget”

5. (1) Take note of the type of widget, then (2) the widget’s title. I usually type these into a blank word document or text area. (3) Select “Cancel.”

Pro tip: mytextarea.com is a great space for quick memos:

*We save content containers because dotCMS saves them chronologically, whereas widgets are saved in

alphabetical order according to the type of widget, which is why we record them. 6. Once all content containers have been saved and widget types/titles noted, select “Page Properties” on

the page.

7. Go to page properties, select the drop-down arrow where it says “Template”

8. Select "2018 BETA”

9. Select “Save”

10. Page now does not have content, but it is in the new template. To add back content, select the bottom “Add Content.”

11. Select “Reuse Content,” because we are merely adding back the content we just saved.

12. Because we just saved the content, and content adds back chronologically, we can just select “Search” and the content you just saved will be at the top of the list (or near the top if there are other web editors also updating their pages).

13. “Select” the content for your page

14. Repeat this step for all other content containers; aka select “Add Content,” “Reuse Content,” then select the correct containers of content that should be re-added to each page on your website.

15. To add back widgets, select "add content" (just as in step 13), then select “add widget” from the drop-down.

16. From the pop-up, select the type of widget from the list on the left, and then search the title of your widget. Click “Select” next to the appropriate widget name.

17. Ensure all of content is on the page using another browser to see the live version of the page. You can rearrange content containers with the arrows on the top right-hand side of the containers. To delete containers from the page (they are still in dotCMS, so not gone forever), select the red “X.”

18. Select “Publish Page” once all contents are on the page and it is ready to go live.

19. This process is tedious, but the results are well worth it. You will repeat these steps on each page of your website. We recommend not publishing updated template changes until all pages on your website have been converted. To do this, only select “Save” as you convert pages and add content to them. When ready, you will go to each individual page and select “Publish” to make pages go live.

Mostly, we so appreciate your efforts to convert your website to the new template, as the new template is not only more modern, customizable, and user-friendly, but it also functions better!

Page settings/layout (horizontal menu, sidebars, etc.) The default page settings are an expanding menu and no sidebar. Horizontal Menus look like this:

To add page settings to create a horizontal menu and add side bars 1. Select the "add content" button that is highlighted in pink at the top right of the page.

2. Select "New Content" from the dropdown.

3. You will be brought to a page called “CC – Page Settings.” First, select the Host/Folder to be your office/department/program's folder name.

4. Give the page settings a title that includes your office/program/department name and describes the settings (e.g., “academics – dept – classics – left side bar – horizontal menu”).

5. Check “Show Menu” if you would like the page to appear in the menu. It will be checked for you if the page is already in the menu.

6. Check “Use Horizontal Menu” if you would like a horizontal menu. *See below photo of horizontal menu (and left side bar) in editing mode.

*Horizontal menu and left side bar:

7. For “Show Sidebar,” you can select if you would not like a sidebar and whether you would like a right or left side bar. *See above photo of left side bar in editing mode.

8. Select “Save / Publish” to have your settings go live

9. Once you have created a page settings container on this page, you can reuse the page settings container

on other pages instead of making a new one for each page. You will want to create one page settings container for all pages that will have the same layout. For example, create one page settings container that will be reused on all pages will have a right sidebar, and create another page settings container that will be reused on all pages that will have no sidebar.

Reusing a “CC - Page Settings” on multiple pages 1. Select the “add content” button that is highlighted in pink at the top right of the page. 2. Select “reuse content” from the dropdown. 3. Type in your office/program/department name in the “Title” field and search. 4. Select the appropriate page settings to add to the page, e.g., “academics – dept – classics - horizontal

menu” Setting an index page (or any page) to show on the menu: An existing index page of any subfolders will need to be set to show on the menu. Otherwise, the index page will not be clickable directly from the menu if there are other pages in the folder. The menu link displaying the subfolder name will display the submenu dropdown when clicked. On the older templates, the index page for a subfolder is typically not set to show on the menu because clicking the menu link would automatically open the index page as well as display the submenu.

1. Navigate to the folder where there is an index page that you would like to display on a menu/submenu 2. Right click the page name (“index.html”) and select page properties 3. If you would like to change the title of the page, replace the title under “Title.” This title will both display

on the dropdown menu and on the top of the page itself 4. Click on the “Advance Properties” tab toward the top left of the page 5. Check the box next to “Show on Menu:” 6. Select “Lock for Editing” if you haven’t already done so, then “Save and Publish” toward the bottom left

Re-ordering menu items and content containers

1. Once saved, the page should re-direct to the default editing mode. If not, double click on the page name in the admin screen if you need to re-order the menu items

2. To re-order the list of items/pages on the menu and its submenus, select the up and down arrows to the right of the menu. It should look like this:

Menu Length

• We recommend having no more than six options in menus. Keep it simple. o Great example:

o Things get overwhelming when there are many menu options:

Adding new content in the page body 1. Look for the “add content” button(s) below the page title 2. Select “new content” from the “add content” dropdown 3. A dialog box will display with two options:

• CC – Web Page Content

• CC – Full-width Striped Section Heading

4. Select CC – Web Page Content for regular content. This will allow you to create the same type of content that is the default on the old template.

• These are the containers that function like word documents in editing mode.

5. Select CC – Full-width Striped Section Heading to create striped headings. A striped section heading will demarcate a new section on the page.

• The “title” field is internal to dotCMS and should include your office/program/department name

and be specific as possible, e.g., “offices – outdoor education – index – events”

• The “Folder/Host” field needs to be your office/program/department’s folder name

• The “Heading” field is what will display on the page.

• The “id” field is optional. It will allow you to create an anchor on the page so that you can link directly to the section. Id’s are case sensitive, must start with a letter a to z, and must not have spaces.

Half-width web page content

1. Web page content containers on the new template has the option to display at half width or full width. The default style is full width, but you can make two pieces of content half width, so they appear on the live site like this:

2. Select “Edit Content” on the first container you want to make half width.

3. the bottom of the content there is a drop down for “Display Style” where you can select full width or half width.

4. When selecting half width, the next container (which could be a new web page content you create) will be shown below it in editing mode.

5. You must also set that second container as half width. To do this, repeat Step 3 for the other container you’d like to display half width.

6. Although in editing mode they appear stacked on top of each other, they will appear side-by-side on the live site.

Adding a hero image/hero slider to homepage and web pages.

1. Crop and re-size images on your computer before uploading to dotCMS. Recommended dimensions 1920x725 px.

2. Go to the page of your website where you’d like a hero image to display. Hero images are the big photos right below the black menu where there are often photos of CC students doing cool stuff. See below example of hero image on Outdoor Education website.

3. Select “Lock for Editing” on page where you’d like a hero image.

4. Select “Add Content” below the menu and above the page title.

5. Select New Content

6. Fill in title with standard labeling for your department folder path and select folder/host of your subfolder

7. Upload photos you’d like to be featured on the homepage from your desktop. We recommend having one unchanging photo, or having three or four photos that flip through. Uploading one image creates unchanging hero image, whereas uploading 3-4 creates a hero slider.

8. Add Alt Text to each photo. This is an important accessibility feature for screen readers. allows those who are visually impaired to get an idea of what sort of image is on the page.

9. Once you have added all the images and alt text you’d like to appear on the webpage, select “Save /

Publish” so that your changes go live.

*When making a new page, choose the “CC - 2018 BETA” template, and the “Title” is will be whatever you want the page to say. *titles for content on new pages are the more drawn-out, standardized titles we use; i.e. “academics – dept – obe – senior thesis information” Widgets

1. “CC – Card Deck” widget • The card deck widget allows you to create up to four “cards” that will display in a row, or stack

vertically when placed in a sidebar • Choose a background color • Choosing white as the background color will make the cards display as if there is no background • Create 2 to 4 “cards” that will display next to each other • There will be 4 sections to add content. Each section is a separate card • You can choose to add a title for each card • You can add an icon next to the title for each card by copy and pasting an icon code from

fontawesome.com Examples:

a. One card:

Two single cards stacked on top of each other:

b. Two cards:

c. Three cards:

d. Two rows of three cards:

• To add icons, use: fontawesome.com. CC typically uses the “lite” icons.

i. Once on the site, you can directly search for icons:

ii. Select the icon you like. CC typically uses the “lite” ones.

iii. Select “Copy HTML” above icon you like. Clicking will copy the HTML to your clipboard.

iv. When prompted, simply “paste” the HTML code into the widget where it asks.

v. Always “Save / Publish” so your changes go live!

2. “CC – Image card” widget

• The image card widget allows you to create a row of three or four links accompanied with square images. Create a new widget for each row.

• There will be 4 sections to upload an image, a title, and a URL. Each section is a separate image card

• You can add an icon as part of each card by copy and pasting an icon code from fontawesome.com

• Select “larger” size to display three cards so that they fill the width of the page • Select “normal” size to display four cards

Examples a. Two rows = two separate widgets:

b. One row = one widget

*When editing a widget, in dotCMS, it will look horizontal; however, once you save it, it will appear horizontal on the webpage. i.e. The editing screen will appear like the image below; however, on the live site, the images will be side-by-side.

• To add icons, use: fontawesome.com. CC typically uses the “lite” icons.

j. Once on the site, you can directly search for icons:

ii. Select the icon you like. CC typically uses the “lite” ones.

iii. Select “Copy HTML” above icon you like. Clicking will copy the HTML to your clipboard.

iv. When prompted, simply “paste” the HTML code into the widget where it asks.

v. Always “Save / Publish” so your changes go live!

3. “CC – Button” widget a. three separate ones)

i. live on website: ii. In editing mode:

b. Single button with icon (see how to add an icon with fontawesome.com in the widget

descriptions above.

c. Batch (only for high-priority pages): Web Communications Paraprofessional can code these for

you.

That’s all for now! All in all, thank you for your efforts on converting your website; we appreciate you! Also, don’t forget that the Web Author Community website is an online reference guide for using dotCMS. Last, don’t hesitate to reach out to the current Web Communications Paraprofessional (Lo) with further questions or for specific editing walk-throughs (she has lots of those). Lo Wall ‘19 Web Communications Paraprofessional 719-389-6139 lwall@coloradocollege.edu