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 “meter- center” 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.