A Beginner’s Guide to DotCMS Last updated 10/24/2016 This manual will cover: • •

•

•

•

Logging in The Website tab o Finding your site in the folders navigation pane o Tour of the website tab Pages o Locking and unlocking pages o Web Page Content and how to edit it o Coded vs WISYWYG content o Adding files and making them a link on the page Widgets (& Content Structures) o What’s a widget? o Department Homepage o Events o People profiles o Publications o Announcements o Accordions o Banner Images o Contact Page Contact Information for further help

For more guides and resources, visit the Communications and Marketing website.

Logging In If you are unsure whether or not you have dotCMS access, email us at [email protected]. Go to calvin.edu/go/c to log in. Use your Calvin ID and passphrase.

Welcome to dotCMS! This is the Admin screen. If you look at the top of the Admin screen, you will see a number of tabs. We will be working only with the Website and Content tabs. Use the Content tab to add or edit the content of certain widgets like CC-People, Events or CC-Announcements. This tab will be covered later. For now we will focus on the Website tab. Use this tab to navigate through your website, to edit your pages and to add certain files and images to your website.

The Website tab Sites and Folders Click the “Website” tab to access the Sites and Folders structure. DotCMS works the same way that the files on your computer do, like a large virtual file cabinet. Folders can have files, as well as other folders, inside them. Click on individual folders, or the small + or - sign next to them, to expand or collapse them. The main folder of Calvin’s website is calvin.edu, noted at the top of this screenshot by “upbeat.calvin.edu.”

If you click on a folder, its contents will appear on the right side of the screen. All of Calvin’s dotCMS web pages (not W drive/dreamweaver pages) are housed inside of these folders. To find your website, just look at its URL. Folders determine the site’s URL, so you can use the URL to find the location of your site in dotCMS. Just follow the breadcrumbs! For example, I’ll use the Meeter Center’s homepage. Their URL is: https://calvin.edu/centers-institutes/meeter-center/ So to get to the homepage in dotCMS, you would click on these folders: centers-institutes → meeter-center

Now that you’re here, on the right side of the screen, you will see what is inside the “metercenter” folder. Right now, it is a list of folders as well as an “index.html” page asset.

What exactly are we looking at here? • •

“index.html” is a page asset. This is the actual homepage. As stated above, pages always live in folders. Each folder houses another page of the website. Each of these folders should have another “index.html” inside of them. The only exceptions are “images” and “files.” These folders do not have pages inside of them, they are only used for storage of images and files that the site references. We will learn more about these two later.

• • •

• •

Extra.css is a special custom style file for this page. You will never have to do anything with this, ignore it. The numbers under “menu” dictate the order that these folders will appear on the page’s main navigational menu (on the right side of every page). “Status” indicates whether or not an item is currently published. Green means people can see it; yellow means they can’t. To change something from yellow to green, right click on the file and select “Publish” from the pop up menu. The column to the right of status shows the pages’ titles. These are what appear at the top of the screen on the pages themselves, but not necessarily in the URL. Mod. User shows the name of the last person to edit a page. Mod. Date shows you when the last edits were made.

Pages Now, let’s take a look at one of these “index.html” files. Earlier I referred to it as a “page asset,” that’s its technical name. Double-click on a page asset to view and edit the content on the page. You should be taken to a screen whose structure looks like this (pictured right) though the actual content will vary from page to page. If you scroll through this page, you’ll be able to view it, click on its links and that’s about it. Currently, this page is unlocked, so you are only able to view and not edit it. To edit a page, you must lock it. The locking and unlocking system assures that no two people will ever be editing the same page at the same time. So, to lock a page for editing, go to the top of the menu on the left side of the screen and click “Lock for editing.” Please note: When you are done editing a page, remember to unlock it. No one else will be able to edit it (besides you) until you unlock it.

When a page is locked for editing, it will look something like this:

Now you can edit content on the page. You will find that pages have two types of content, Web Page Content and Widgets. To add Web Page Content or a Widget to a page, click the + Add New Content button at the top of the editable module, then select the type of content you need. Note: Typically there will be two content containers on every page, which means there will be two “+ Add New Content” buttons. Use the top one only for banner images, use the bottom one for everything else beneath the banner image. To re-order these modules on the page, click the up and down arrows at the top right of the content’s box (next to the red X). To delete the content from the page, click the red X. Note: if you delete the content from the page, it will still exist in the dotCMS database, and you can find it.

Web Page Content You will be able to tell if something is “Web Page Content” if it has an “edit content” button at the top left (pictured, right).

If you click on this “Edit Content” button, you will open the content editor, pictured below.

What exactly are we looking at here? • • •

•

•

The Content Tab displays the content you are working with. The History Tab shows you all past versions of this content. You can use this to revert back to a previous version if something goes wrong. The References Tab Shows you every place that this content is currently being pulled. Most Web Page Content is specific to the page it is created for, so it is typically only being pulled into one place. Title is the title of this content. This is only used for organizational purposes; it will not show up anywhere on your site. Content should be titled according to its location, so for example, a blurb of text on the History Department’s “About” page would be titled “Academics: Departments Programs: History: About: Body”. Note: Titling your content correctly is INCREDIBLY helpful when it comes to trying to find the content later on. Make sure you name it something you’ll be able to search for easily even if you don’t remember exactly what was in it. Body is the content itself. Depending on how complex the content, or its layout, is, it will either be code or just plain text. Here, we’re looking at the layout of the “Top Links” on the Meeter Center’s home page, which requires remaining in code view. A simple bulleted list on the other hand would not require coding, so it would be more straightforward.

• • •

•

Lock for Editing follows the same principle of locking a page for editing. In order to make and save edits in web page content, you must lock it first. Assign Workflow is not a function many sites currently use. Click Cancel if you want to exit the editor without saving any changes. NOTE: Only use cancel if you have not yet locked the content for editing. Cancelling will NOT unlock the content if it has been locked for editing. Below the content editor box, you will see a drop-down menu that currently is set to “code”. Clicking on the drop down menu will give you another coding option, “plain”, and something called “WYSIWYG” (colloquially pronounced wiz-ee-wig). This stands for “What you see is what you get.” Simple content that doesn’t require special coding can be made easily by selecting the WYSIWYG option. It will turn the window into something resembling a standard word processor, with options to bold, italicize, hyperlink, make lists, make headers, etc. o NOTE: You can switch the editing window from WYSIWYG to code, but do not switch it from code to WYSIWYG because some of the coded functions may be lost. A pop up window will appear to remind you of this.

To edit content 1. Starting from the page itself, open the content you want to edit by clicking Edit Content. 2. Once in the content editor (pictured above), click Lock for editing. That side menu will change to give you these options: • Release Lock will unlock the content and exit the editor without saving changes. • Save will save your edits without publishing them and keep you in the editor. It’s good to save your work this way every once in a while if you’re working on a large piece of content. But when you are done with everything, click Save and Publish. • Save and Publish will save your changes, publish them (so they will be public), and exit the editor. This also automatically unlocks the content. 3. Make your edits in the editing window. Once you are done, click Save and Publish. If the content is in code, but you want to make edits If you understand code, or feel comfortable making simple textual edits inside of code, then go for it. If not, you can contact us and we will help you. Note: If you make a mistake, dotCMS automatically backs up every version of that content that has ever been saved in the “History” tab, so it is easy to get it back to the way it was before. Just open the content, click the history tab and restore the previous version. For example, you might see something like this:

Paragraph text here! If you need to change the “Paragraph text here!” part, perhaps to fix a typo or update some information, you can just change that text without editing the code around it. Basically, leave anything inside brackets, like , alone, but text that exists between sets of brackets, like this text , is fair game (in code view, this text is black).

Some common code you might come across: makes a new paragraph or (in our case) bolds text or (in our case) italicizes text , … are different types of headings indicates a hyperlink does a lot of different things, but mainly it sections off a piece of content so that it can be formatted in certain ways.

“Files” and “Images” folders Content in these folders functions in similar ways, but you will primarily utilize the files folder, so we will focus on that one. Use this folder if you want to add links to documents (PDF, Word, Power Point etc.) on your website for people to view or download (ex, pictured right). You can create more folders inside your “Files” folder to organize all your files. But, ALL of your files should stay inside your Files folder (do not upload them elsewhere). Note: This method makes managing files more efficient by using the dotAsset ID, instead of the file’s URL, to link to it on the page. This allows you to replace or update the file without having to change the link on the page. But, it requires that the link be hard-coded (Not in WYSIWYG). To add a file link to your page, first upload the file. 1. Go to the Website tab and navigate to your website. Click your “files” folder to open it. Once inside it, click the down arrow next to“+ Add New” to pull up a drop-down menu.

2. 3. 4. 5.

6. 7.

8.

9.

Select “Image or File” if you’re uploading one file, and “Multiple Files” if you’re uploading more than one. A dialog box will appear, prompting you to upload the document(s) directly from your computer. Follow the instructions. Once they are uploaded, click “Save and Publish”. That should bring you back to the Admin screen. Now, double-click the file you just uploaded to open it again. At the top, click the “History” tab. You will see something like this: “Identifier : 6389fba3-02f7-4436-981c-8a04e36d3413” Copy that long set of numbers and letters (after the semi-colon). Go back to the “Content” tab and click “cancel” to exit the document. Navigate to the page where you would like to put the link. Open the content (Click “Edit Web Page content). Make sure the content you are editing is in “Code” view (you can toggle to this with the drop-down menu beneath the content editing box). Code your link like so: I am going to put a link right here! Click Save and Publish.

Widgets & Content Structures In dotCMS, widgets and content structures make it easier to organize and use large amounts of information. They are also 100% pre-styled and pre-formatted. If Web Page Content is a blank canvas, consider Widgets more like a paint-by-number. With a content structure, you can make one entry into a specific database, whether that entry be about a book, an event or a person, and pull that entry onto multiple pages (using widgets) without having to re-create the same content every single time. It also means that if something about that entry changes, say the event gets cancelled or you need to update a person’s profile photo, you can make the change in one place and it will update that entry everywhere it is listed across the entirety of calvin.edu. Widgets and content structures are also more user-friendly and functional than Web Page Content. Instead of navigating around code, users can enter text into fields (like filling out a form) which then allow for that content to pulled and displayed on pages automatically and with the correct formatting. If you’re unsure how to fill something out correctly, there are little speech bubbles next to some fields which will tell you how to fill them out (pictured left).

Types of widgets you’ll come across & how to use them: DEPARTMENT HOMEPAGE This widget pulls a banner image and introductory text onto your department’s homepage.

To change content in this widget, go to the Content tab on the Admin Screen. From the “Type” drop-down menu on the left, select “CC-Department”. Then, search for your department and select it on the right to open it. “Homepage Banner,” “Banner Title,” “Lead,” and “Description” will show up on your home page. When you’re done click “Save and Publish”

EVENTS To create an event, see this guide. To edit an existing event, see this guide. CC-PEOPLE Use CC-People to edit people profiles for Calvin faculty and staff and to list them in departments, offices, etc.

To add or edit a person, go to the Content tab. From the “Type” drop-down menu on the left, select “CC-People.” First, do a thorough search to make sure the person does not already have an entry in the system. If not, you can add them. To add a person click “+ Add New Content” on the top right. To edit a person, search for their name and click on the correct result to open their profile. Fill out the required fields and any additional ones you need. To have a person show up on a departments website’s “Faculty” page, go to “Academic Department” and select it from the drop-down menu. To have them appear in multiple departments, add the department codes, separated by commas, in the “Display in multiple departments” field below (ex ART, HIST, CLAS).

Note: there must be an existing People widget on these sites in order for the publication to appear.

When you’re done click “Save and Publish.”

CC-PUBLICATIONS Use CC-Publications to add a book, article, or citation for a work authored or contributed to by Calvin faculty, staff or students.

To add or edit a publication, go to the Content tab. From the “Type” drop-down menu on the left, select “CC-Publication.” To create a new publication click “+ Add New Content” on the top right. To edit a publication, search for it and double-click on the correct result to open it. Fill out the required fields and any additional ones you require. To have a publication show up on a department/office/center’s website, go to “Placement” at the bottom, click “Select Categories,” and select the sites in which it should appear. Note: there must be an existing publications widget on these sites in order for the publication to appear. When you’re done click “Save and Publish.”

CC-ANNOUNCEMENTS Use announcements to create your own departmental news and have it appear on your home page in the “Announcements, News, & Events” widget. You can warn of upcoming deadlines, showcase students or alumni, or write about interesting projects or research happening in your department.

Note: Announcements will only show up in the “Announcements” tab of the “News, Events, Announcements” widget usually found at the bottom of department and office homepages. They will not appear anywhere else. To create an announcement, go to the Content tab. From the “Type” drop-down menu on the left, select “CC-Announcement.” To create a new announcement, click “+ Add New Content” on the top right. To edit an existing announcement, search for it, then click on the correct result to open it. Fill out the required fields and any additional ones you require.

To have it appear on your website, go to “Placement” at the bottom, click “Select Categories,” and select the sites in which it should appear. When you’re done click “Save and Publish.”

ACCORDION Accordions are now widgetized to make it easier to edit their information.

To add an accordion to a page, navigate to the page in the “Website” tab folder structure. Lock the page for editing. At the top of the page click “+ Add Content,” then “Add Widget.” Select “Accordion.” Title the accordion based on where it appears. For example, the accordion above is on the “Support” page in Academic Services, so its title would be “Academic Services: Support.” Fill out headers and content for each accordion tab. When you’re finished, click “Save and Publish.” Note: If accordions need to be created as tabs or in other special case locations, they will need to be hand-coded. BANNER IMAGES Use the RESPONSIVE: Simple Banner widget to add or edit a banner image on the top of your page, with or without a caption.

Note: some department homepages still use basic banner widgets instead of the Department Banner and Intro widget. To add a banner image to a page, navigate to the page in the “Website” tab folder structure. Lock the page for editing. At the top of the page click “+ Add Content,” then “Add Widget.” From the list, select “RESPONSIVE: Simple Banner.” Upload the banner image directly into the Simple Banner widget from your computer (you don’t need to upload it to dotCMS first). All banner images should be cropped to a 16:9 ratio and be exactly 720x405 pixels large. See our guide on how to save and crop images for the web in Photoshop. CONTACT PAGE Use the contact widget to update your department’s contact information or address.

To edit department contact information, go to the Content tab on the Admin Screen. If you are an academic department, select “Academic Department contact page.” If you are an office, select “Offices Services contact page.” If you are a center or institute, select “Centers Institutes contact page.” Edit the necessary fields. When you’re done click “Save and Publish.”

Contact Information for further help If your site requires upkeep not covered in this document, or if you try to edit something and it doesn’t look quite the way it’s supposed to (it could be either outdated or recently updated), contact your coordinator (or our office directly) with questions. 616-526-6896 [email protected] http://www.calvin.edu/offices-services/communications-marketing