Publishing Schedule

CMS webpages and files automatically publish on a set schedule. You will have to wait for the CMS to publish your modified files before they become live on the web. Only files in the Public state will be published.

Mobile Publish Schedule

  • 3 a.m.

Desktop Publish Schedule

All publishes take about one hour to complete from the starting times listed below:

  • 1:00 a.m.
  • 12:00 noon
  • 4:00 p.m.

Unsure if your page published? Check the last-modified date of your webpage by viewing the page source (right-click -> View Page Source) and finding:

<meta http-equiv="Last-Modified" content="2014-02-08T15:00-0500" />

NOTE: In addition to viewing the source of the page, you may view the “Page Info” in some browsers.

Full Publishes

Full publishes (entire site) of all of the CMS websites will be run every Saturday. They are staggered depending on the site, and should be completed by 8 a.m.

Need an immediate publish? Please email

Enhanced Image Sizes in Preparation for New Templates

As a part of the new CMS template upgrade, the image editor sizes have been enhanced—some sizes added, existing sizes made larger, and some sizes phased out. These changes can be seen in different size options in the image editor, different slot names, and different template names.

Existing images will continue to work. The new sizes will provide greater flexibility and quality and the new names will be more intuitive and consistent across the system. Although vertical images are difficult to use on the web, any ‘horizontal’ image can be cropped vertically if needed.

Here is a look at how the new sizes compare to the old ones along with our suggested uses for them. For a full tutorial on using the Image Editor, refer to the Using the Image Editor post. If you have any questions about these new sizes, please contact us at

Old Name Old Size New Name New Size Suggested Use
Small Thumb 90 x 90 **Phased Out**
Medium Thumb 112 x 112 **Phased Out**
Large Thumb 170 x 170 170 Square 170 x 170 •In content, supplements short paragraphs, to add visuals
•Can be used in the Personnel Image slot within Profile items (be sure to crop the 250 square also)
**New Size** 250 Square 250 x 250 •In content, supplements longer paragraphs, to add visuals
•In content, used for a 5-column layout
•Can be used in the Personnel Image slot within Profile items (be sure to crop the 170 square also)
Personnel Image 135 x 170 Personnel Image 170 x 230 •Faculty and staff listing photos
•Can be used in the Personnel Image slot
Right Sidebar 213 x Variable 350 Sidebar 350 x Variable
(175px height recommended)
•Images that fit in the right sidebar
•Can be used in a highlight in the Right Sidebar Slot – Boxed or Right Sidebar Slot – No box
•In content in a 3- or 4- column layout or as the 1/3 of a 2/3 to 1/3 split
Single Column 333 x Variable **Phased Out**
Horizontal 465 x Variable 515 Sub-Banner 515 x Variable
(250px height recommended)
•Images that fit between the left navigation and right sidebar
•Can be used in the Sub-Banner slot
•In content in a 2-column layout with equal spacing
Fullsize Horizontal 700 x Variable 765 Banner 765 x Variable
(325px height recommended)
•Images at the top of a page that are the full page next to the left navigation or right sidebar
•Can be used in the Banner Image slot
•In content, used for the 2/3 of a 2/3 to 1/3 split
Fullsize Vertical Variable x 500 **Phased Out**
Large Horizontal (1024W) 1024 x Variable 1024 Feature 1024 x Variable
(400px height recommended)
•Homepage mediazone images, banner images that take the full content width
•Can be used in the Featured Images slot or a Mediazone item
Jumbo Horizontal (1600W) 1600 x Variable 1600 Feature 1600 x Variable
(520px height recommended)
•Homepage mediazone images
•Can be used in the Featured Images slot or a Mediazone item

Best Practices: Search Engine Optimization and Usability

Do you have pages with a lot of text and wonder if that is OK? Are your pages user-friendly? Do you want to increase your search engine rankings? Here are some tips to make your website better for your users and increase your visibility in searches.

Content-Rich Page Examples

The What is Biomedical Engineering page shows good use of headings in a page that has a lot of content. The sections don’t drag on because the headings break up the content. They also make the content more scannable for both users and search engines. Using the images to break up the large amount of text rather than placing them at the top or side of the page is another way to make the page more user-friendly.

Notice the keywords that are bolded and others that are linked to relevant pages. Highlighting the keywords in this way makes it look better to search engines and may increase your rankings. It also makes the most important topics pop out to the reader. Just be sure not to overdo it (a couple times per story should be enough). Google knows when you’re trying to cheat and there is a penalty for it!

The What is Mechanical Engineering page also uses these principles. In addition, this page includes bullets to further break up the content and make it feel less overwhelming. Properly using headings and bullets makes your content easier to read.


Keywords, and how you use them on your pages, play an important role in search engine optimization (SEO). But keep in mind there can be too much of a good thing. You can be ranked lower for “keyword stuffing.” Write naturally, then pick out the keywords to highlight.

  • Use keywords in the URL. The URL is determined by the names of the folders.
    • Keep folder names to one to two keywords separated by a hyphen.
    • Always use lower case; never symbols or spaces.
    • These guidelines also apply to filenames (PDFs, Word Docs, etc).
  • Use keywords in the page title.
  • Use keywords in the headings.
  • Link keyword phrases across your site and to other relevant sites on campus.
  • Use keywords throughout the body copy and add style to them where appropriate (bold or italics).  Avoid underlines—they can be mistaken for a link.

Search Engine Optimization (SEO)

Besides using keywords strategically there are several other things you can do to make your pages rank higher in searches. The University Marketing and Communications website provides more information and resources on these methods for improving your site’s ranking.

  • Publish relevant content.
  • Update your content regularly.
  • Include metadata, information about the content of your pages, via the keywords and description fields in the CMS.
  • Have a link-worthy site.
  • Use alt tags to describe your visual and video media.


Think about your users when writing the content and designing the layout for your pages. If it isn’t easy for them to navigate or is too overwhelming, they will not stay long enough to get the information you want them to have.

  • Use headings, lists, and bullets.
  • Don’t make the user click. They are happy to scroll.
    • Instead of 10 pages that each have one paragraph on them, it’s better to have one page with strong headings and several paragraphs.
    • Sliders were a great way to make a lot of content easier to digest, but clicking sliders to open them has become a problem, especially with mobile devices. Try using more headings, images, and bullets to break up your content rather than putting it in a slider.
  • Don’t overload your navigation—the tabs and links that give users access to your pages. The typical human brain can only handle so much information at a time.
    • Follow the rule of seven—keep your navigation down to seven tabs. The same applies to the page links under each of those tabs.

Posting Events to the University Calendar

There are two ways to post events to our Events Calendar:

General Campus Community

Calendar Admins

  1. Login to the calendar using the link in the header
  2. Once logged in, click the “Admin” shortcut in the header
  3. Click the “Add an Event” button

Please note that calendar admins have access to additional fields that do not exist on the public event submission webpage.

If you are a calendar admin, please use the event submission form available through your Admin login, as specified above.

Tips for Posting an Event

The following is a step-by-step guide for filling out your event information:

  1. Name: This is the title of your event. It should be descriptive, but not more than 7 words, if possible.
  2. Description: Please describe what your event is about. It is not a bad idea to include information about who the event is for, where your event is located, and who is hosting the event in case someone copies your event information. Calendar Admins posting via their Admin login have access to add links and media sources to descriptions.
  3. Start Date: On which day does your event start?
  4. State Time: At what time does your event start?
  5. End Time: At what time does your event end?
  6. Recurs: Use this feature if your event is reoccurring (ie: daily for a week, monthly for the semester, etc).
  7. Event Place: Enter the venue on campus where your event will take place. As you type your venue, you’ll see location options per-populate. Please select your venue from the list, so that you are linked to that venue.
  8. Room: Please enter the room number for you event, if applicable.
  9. Address: Non-admins only. Adding an address will include a link to Google Maps for directions.
  10. Photo: You have the option to upload a horizontally cropped photo of your choice. If you need to edit your image to make it horizontal, you can use an online image editor.
  11. Event Type: You can select one or more event types from the dropdown menu. To select multiple types, simply select one, return the the menu and continue selecting others. It is important to select relevant event types to make it easier for users to find your events.
  12. Department: Selecting a Department will automatically add your event to that Department’s calendar. You can select one or more Departments from the list.
  13. Audience: Select one or more Audiences from the list. Selecting relevant audiences is important to make it easier for users to find your events.
  14. Group: UMC only. Please leave this blank.
  15. Host: Please indicate who the host of the event is, using free form text. It could be a department, a group, or a person. We recommend the name of the department, when possible.
  16. Ticket Cost: If your event requires tickets, please enter the cost. I can be a single dollar amount, a range, or a description such as “Youth: $5, Adults: $20”.
  17. Ticket URL: If users can order tickets online, please enter the URL to your ticketing website here.
  18. Eventbrite ID: Calendar Admins only. If you have created an event in Eventbrite, you can enter the ID here.
  19. Keywords: Calendar Admins only. Enter 3-7 keywords related to your event, to make it easier for users to find your event when they search.
  20. Tags: UMC only. Leave this blank.
  21. Twitter Hastag: If a hashtag is associated with your event, such as #mtuwc for Winter Carnival, please enter your hashtag without the “#” symbol.
  22. Event Website: If you have a webpage or website that explains more about your event, please enter the URL here.
  23. Facebook Event Page: If you have set up a Facebook Event under your Facebook Page, you can enter the URL here.
  24. Vanity URL: Calendar Admins only. If you would like to advertise your event in print media, you can customize the URL by entering a keyword here.
  25. Sponsored: UMC only. Do not check.
  26. Allow Reviews: Calendar Admins only. If you would like to allow reviews, leave this checked.
  27. Featured: UMC only. Do not change this.
  28. Visibility: UMC only. Leave set to “Visible”.
  29. Venue Page Only: UMC only. Do not check.
  30. Exclude from Trending: UMC only. Do not check.

Events Calendar Management

Our new Events Calendar has been a huge success so far, with over 43,000 views in the past month, representing an 85% increase in calendar use compared to last year. We have learned a few things along the way and want to explain a few changes that we have made, along with some best practices, and new features.

The Problem

Consider the following scenario:

  • Career Services adds Career Fair to the calendar
  • Many different departments want to put this event on their calendar as it is a very popular event
    • Some departments use the Contact Us form to have the event properly added to their own department’s calendar
    • Some departments duplicate the event onto their calendar
  • We end up with 7 copies of the same event floating around in the system, causing user confusion
  • The original event now appears to involve several departments instead of only the originator (in this case, Career Services)

Sounds like a nightmare, doesn’t it? Luckily, we have made some adjustments and have developed some ‘best practices‘ to alleviate this common issue.

Field Changes

We added one new field, relabeled another, and added some tooltips.

Subscribing Departments

On the live website, we have relabeled the “Departments” field to be “Subscribing Departments” to better reflect what that field actually means. When you’re listed as a “Subscribing Department”, it only means that you’ve added the event to your department’s calendar. It does not mean you’re involved in the event. On the backend, there is no change. This change is to help users of the calendar website.

Host Field

We’ve added a “Host” field to better show who is the true/actual host. This field is freeform text, so you could put “Career Services”, “Kinesiology and Biological Sciences” or even “Dial Help” if the event is hosted by an entity off camps. This will help address interdisciplinary events in that multiple hosts can be listed. “Host” is a new custom field on the backend.

Host and Departments Fields
We’ve have added a “Host” field.


Host and Subscribing Departments
An example of the “Host” and “Subscribing Departments” fields on an event.


View live example

You can also add important details to the event description. For instance, if it is very important that a department is recognized for putting the event together, you are welcome to add this information to the description.

Best Practice: Adding Existing Events to your Calendar

In our example, Career Services would create the “Career Fair” event. It is understandable that many departments would want to add that event to their calendar as well. Rather than duplicating the event, please click on the event that you want added to your calendar, scroll to the bottom, and click the the “Contact Us” link.


Adding an Existing Event
You can ask UMC to add an existing event to your calendar.


The UMC Digital Services team will make sure that you are added as a Subscribing Department and we can avoid event duplication and the confusing user experience that it can cause.

Not sure if someone has already created an event? Do a quick search using the search box in the header. If an event exists, click on it, use the “Contact Us” link and ask UMC to add it to your calendar. If no event exists, you are free to make your own.

I understand that we will need to make more adjustments along the way, so if there are any questions, concerns or new ideas, you can contact Joel Vertin, Digital Services Manager, at

Thanks for helping us make this a great services for all of campus and the community!

Creating a Pop-Up

Interested in having a pop-up on your webpage, similar to what you see when you click here? This tutorial will help you to accomplish such a task. However, I will warn you now, that this will require some HTML knowledge.

Step 1

Locate the page/highlight in the CMS that should have the pop-up and edit said item. In the TinyMCE editor make a new line at the bottom of the content, this area will be the location of your new pop-up. With the new line created, from the “Format” dropdown in the styles bar, select “Blocks” and “Div” from the submenu. This will create a block that will wrap the content of your pop-up and is the actual pop-up.

Creating a Div block to wrap the content of your pop-up. This can also be done manually in the source code.
Creating a Div block to wrap the content of your pop-up. This can also be done manually in the source code.

You may place images, headings, and most anything that you would normally slot into the rest of the page inside of this div.

Step 2

With the pop-up content created, it will now start to get a bit more tricky. Switch to the code view by clicking the source code button (located on the style bar and looks like “<>”).

The source code button allows you to edit the HTML source of your page directly.
The source code button allows you to edit the HTML source of your page directly.

Find your content at the bottom of the code. It may look something like this:

<div><p>Your Pop-up Content Here</p></div>

Make sure that all of the content that is meant to be within your pop-up is contained inside the div block; if it isn’t then the content will not show up within the pop-up.

Adjust the div tag by giving it a unique id (this should be as unique as possible to prevent issues). Here is an example: “popup-cms-1”. Add this id to the first div tag, so your code may now look something like this:

<div id="popup-cms-1"><p>Your Pop-up Content Here</p></div>

Then wrap the whole pop-up div inside another div. This will prevent the pop-up content from automatically showing up at the bottom of the page when loaded. This div must have the “popup” class assigned to it. So you should have something similar to:

<div class="popup">
<div id="popup-cms-1"><p>Your Pop-up Content Here</p></div>

Step 3

Start by moving back to the design view by clicking the blue “OK” button at the bottom of the code editor. With the pop-up created appropriately, you will likely have a trigger item on the page somewhere that actually launches the pop-up. For example: “Click here to view information”. Highlight this content and click the Insert/edit Link button. In the Url field type your ID from step 2, but add the pound sign “#” to the beginning. For example: “#popup-cms-1” (minus quotes).

Now you will need to move back to the code view. Locate your link that you just created. It may be similar to:

<a href="#popup-cms-1">Click here to view information</a>

In the anchor tag (a), before the “href” attribute, type: rel=”popup{x:500,y:350}”. The x:value and y:value define the pop-ups width and height in pixels. It is not required to specify a width and height, and typing: rel = “popup” will attempt to find a suitable size for your content automatically, but if that looks too small/big adjusting the width and height values will help. It may take several edits to get the dimensions just right. Your final code may look something like:

<a rel="popup{x:500,y:350}" href="#popup-cms-1">Click here to view information</a>

Close the code editor by clicking the blue “OK” button.

Step 4

Update/save the editor window and close it. Preview the page to verify that it is working appropriately. If any issues are occurring, you may use the editor to adjust any widths or heights. More than one pop-up can be added to the page, but it is important that each popup has a unique ID. Once correct, you may send the page/highlight and any other associated files to public.

Examples of popups

Still need help? Please contact

TinyMCE Editor

We are transitioning the Ephox EditLive editor to TinyMCE. The main reason for the change was to try to limit the need for Java plugins to be run. Once you begin to edit an item, you will notice that you do not have to “load” the editor anymore. This will mean that there will no longer be “Design” and “Code” buttons at the bottom anymore since the editor is pre-loaded onto the page. This should speed up the process when editing your items. Most of the changes will be minor but there are a few things that you will notice either have changed slightly, or are located in a new area.

TinyMCE Screenshot
Click to enlarge the image


One of the larger changes is how the Formats menu is now displayed. Previously all of the style options were just listed in the Styles menu, now they are categorized to allow you to find an appropriate style much quicker.

The new categorized menu options
The new categorized menu options


Editor Labels
TinyMCE window with button labels.


When entering fullscreen mode, make sure that you click the fullscreen button to return back to the main editing screen. If you close the window, you will lose your changes and have to start over. As always, make sure to click update on the main editing screen to save your changes.

The code tab that was previously at the bottom of the editor is now available on the Toolbar, or under the Tools menu. If you notice anything not working as expected or you have any questions, please email

How to Restore a Previous Version of an Item

Once in a while, an item is edited and sent back to public when it shouldn’t have been. Or, older content is more accurate. To roll an item back to a previous state requires a few clicks, but is an easy process. Follow these steps and if you have any questions, contact

  1. Locate the item that will need to be rolled back in the CMS.
  2. The item will need to be checked-in, in the Quick Edit state. (Only items in Public/Quick Edit can be revised.)
    1. If the item is in Public, right-click the item and select “Change State (Workflow)” -> “Move to QuickEdit”.
    2. If the item is in QuickEdit (check out), right click the item and select “Change State (Workflow)” -> “Check-In”.
  3. Determine which version the item should be rolled back to. This can be done by right-clicking the item, “View More Information” -> “Revisions”.
  4. From the Revisions window, the latest revisions are at the bottom. You can View Content (left column) to verify which version is best. After you identify the best version, click Promote (left column).
  5. The Edit Content window will launch. Click the Update button and Close.
  6. Right-click and Change State (Workflow) > Return to Public. OK.

The new version of the page will show up after the next CMS publish. Note: if a whole page, including Right sidebars/Sliders (Highlights), Images, and Files need to be rolled back, the steps above need to be followed for each item.

Creating Rollover Buttons

Rollover buttons are a very common feature on many of Tech’s webpages and are used for multiple destinations. In the past, buttons were more difficult to create and required a separate image. They can be created by adding a simple “button” class to any link. Here’s a demo of a button:

My Button

Add a Button to the Main Body

Adding a button to the body, similar to what you see above, can be done very easily. Open up your desired Generic Page in Quick Edit/Edit and scroll to the Body section and launch the Ephox Editor. Start by creating your link just like normal, learn more about creating links in the Ephox Editor. Once your text is linked, from the Formats dropdown in the anchor styles, select “Button”. This will add the necessary styles to your link that will turn it into a button.

Add a Button to the Left Navigation/Right Sidebar

Buttons are not restricted to the main body content and can be used above/below the left navigation and the right sidebar. View an example on the Admissions website. Start by creating a new item, a Highlight, set the title so that it is relevant to the button, the title will not show up. A good idea might be: “Contact Button RH Sidebar”, this indicates the button’s purpose. In the Callout section, launch the Ephox Editor. Create a link just like normal. Highlight the linked text and apply the “Button” style (found in the style dropdown). Save your new Highlight item.

With your Highlight created (this item contains the button and then is slotted) you can now slot it onto a Generic Page or NavTree.

Utilizing the Button in the Left Navigation

Start by switching to the Admin community, this will allow you to edit the NavTree item. Open the NavTree in Quick Edit/Edit and click the “Edit All” button to launch the Slot Editor. Once in edit, open the Slot Editor and find the “Global Nav Bottom Highlight (735)” or the “Global Nav Top Highlight (715)”. The difference is in the name, just positioning of where the button will be. Select the appropriate position and once the Highlight is located in the Content Browser, select it and select the Callout template. This will add the button to the left navigation. Check in the NavTree and preview the website to verify everything is working. When going public, contact to notify us that your website’s left navigation has changed, it will require a full publish.

Utilizing the Button in the Right Sidebar

Start by opening the desired Generic Page that this button should appear on in Quick Edit/Edit. Scroll to the bottom of the window where you will find Related Content with a button titled “Edit All”. Click this to launch the Slot Editor. Scroll to the “Right Sidebar Slot – Boxed (565)” or “Right Sidebar Slot – No Box (539)”. The different between the two slots is whether there will be a box or no-box. A boxed version is what you see on this Enterprise page. The no-box version simply leaves the button to float freely with no background or border. Select the correct slot and locate the Highlight from before using the Content Browser. Select the Callout (no boxed or title) template. This will add the button to the Right Sidebar. Now check in the Highlight and the Generic Page. Preview the Generic Page to verify everything is correct.

Creating and Adding Sliders

Sliders are a very common feature on many sites, they’re found on a variety of pages including degree pages and informational pages. Sliders are the titles that, when clicked–slide down revealing more content. Here’s an example of one:

Department History

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend leo id dui blandit congue. Nulla velit lorem, cursus sit amet cursus eu, imperdiet scelerisque nibh. Nunc ut libero nulla. Cras consequat elit tempus justo egestas, id fermentum lacus placerat. Ut cursus adipiscing leo ut convallis. Nulla facilisi. Duis rhoncus, sem ut faucibus posuere, metus nisi congue dolor, id porta sem libero vitae lectus. Vivamus semper convallis ipsum ut congue. Vestibulum accumsan, erat eu auctor pretium, ligula erat sollicitudin diam, et aliquet nunc quam blandit neque.

Creating a Slider

There are two pieces in creating a slider, a Generic Page for which the slider will show up on and a Highlight–the item that holds the slider. For this tutorial, you’ll notice that I mention Highlight and slider, several times–don’t get confused, the Highlight is the item in the CMS whereas the slider is simply a template that is applied to the Highlight.

To create a slider, start by creating a new item, called a Highlight. For the System Title field, fill this out with what the title of the Slider should be. You may want to append the purpose of what the Highlight will be used for to the title, so: “Department History Slider”. For the Title field, it will be the same, minus anything you’ve appended, so: “Department History”. Add your content to the Callout box. Save your new Highlight to the CMS by clicking the button titled “Insert” at the bottom of the window (it may also be titled “Update”.)

Now that your Highlight is in the CMS it is now time to add it to an actual page.

Adding A Highlight to a Generic Page as a Slider

There are several places that a Highlight can be added to on a page, the most common place is right in the content or in the left and right columns of a page. For this tutorial we will slot the Highlight into the List Slot and directly into the body content. The benefit to adding highlights to the List Slot (in the Slot Editor) is that it makes it much easier to manage the Highlight’s position. However, the downfall is that it always shows below the Body content.

Adding a Highlight as a slider to the Slot Editor

Add a Highlight as a slider to a page by opening the page in Quick Edit/Edit and scroll to the bottom of the window. You will find a field titled Related Content with a button titled “Edit All”. Click this to launch the Slot Editor. Scroll to the bottom to add a Highlight to the List Slot (you may also use the Right and Left columns). Click the title “List Slot (509)”, this will launch the Content Browser, which will allow you to select the Highlight you’ve created. Select the Highlight. A new window should appear with a preview and templates to select from, select the Slider template. Refer to the following screen shot:

Once “Open” is clicked, the Highlight will now show up below “List Slot (509)” as a slider template. The Highlight is now on the page as a slider. You can Update any other associated items, Check-in any associated items, and Preview the Generic Page. You should see your slider listed at the bottom of the page. You can view our’s here. You may want to adjust the order of your sliders if there are multiple. You can do this from the Slot Editor utilizing the blue arrows listed to the right of each slotted Highlight.

Adding a Highlight as a Slider In-Between Content

Sometimes you may need to add a slider inside the Body content. The benefit to adding a Highlight into the content versus the previous method is that it will allow you to do this. Start by opening the desired page in Quick Edit/Edit and scrolling to the Body section. After launching the TinyMCE Editor, Select where you would like to have your new Highlight (indicated by a “1” in the following screen shot). Then click the “Insert inline template” button that is indicated by a “2” in the following screen shot. This will launch the Content Browser.

From the Content Browser, navigate to where your Highlight is and select it. From the template selection (left side), select the Slider template. Click “Insert”. This will add your Highlight to the content with a border. There may be an extra newline after inserting, remove this as it will create excessive spacing. Even though it looks editable, if any edits are needed, the edits will need to be done from the actual Highlight. The Highlight is now a slider on the page. Any changes should be saved and the page should be previewed. View the example here.

Removing a Slider

The Highlight item that was added as a slider in previous steps can be removed easily by either going into the slot editor and clicking the red “X” to the right of the Highlight. Or, by right-clicking the slider in the TinyMCE editor and select “Remove Inline Template”. Depending on how the Highlight was slotted, will determine how the slider can be removed.