Category: Content

Content managers may occasionally want to search for specific phrases within the content of their CMS website. To search your site for a specific phrase, follow these steps.

1. Log into the CMS and select the search icon in the main toolbar
   
2. Click on the Advanced dropdown menu
   
3. Open the Type dropdown menu
   
4. Select only the text-based files and/or assets options
   
5. Enter your search phrase in the Contains the Words textbox
   
6. If you chose only the text-based files option, you can select a specific Location (folder) in the CMS to search within.
   
7. Click the blue Apply button in the bottom right corner to see results.
   
8. To edit content, click on the blue Title link as outlined in the above example.

You can add customizable social media icons to the footer of your website, just below the contact information. This is only available in the _props.pcf file within the root folder for your site or the folder where navigation is restarted.

1. Open the _props.pcf file in the root folder for your site.
2. Look for the Social Icons Editable Region and click the green button to enable editing.
3. For each icon that you want to appear, enter the URL for that social media platform in the corresponding cell.
4. Save your changes.
5. Publish.

You can choose to add call to action buttons at the top of the footer on your website. You can choose to add just the Give button linked to a page of your choice, just the recruitment buttons with preset links, or all four. The default is no buttons. This is only available in the _props.pcf file within the root folder for your site or the folder where navigation is restarted.

1. Open the _props.pcf file in the root folder for your site.
2. Go to Properties in the Page Actions Toolbar.
3. Be sure you have the file checked out (if not, click on the lightbulb icon in the Page Actions Toolbar).
4. From the Parameters menu on the left, find the “Site Footer Contact Information” section. The Call to Action Buttons fields are the last two items in that section.
   
5. Select which button(s) you would like to display using the Call to Action Buttons dropdown.
   1. No Buttons
      
   2. All Give and Recruitment Buttons
      
   3. Give Button Only
      
   4. Recruitment Buttons Only
      
6. If you selected an option that includes the Give button, use the file chooser to select a page within your website that the button should go to or paste in a URL to a page that is not within your site. If you do not indicate a Link, the button will go to the default page.
7. Click the blue Save button.
8. Publish.

You can link to a specific place within your page using anchors. You can also link to individual sliders or FAQs. This is useful when you have a long page and want to provide shortcuts to certain sections or when you want to direct the user to a specific piece of information within a page.

Setting Up Anchors

The first step is to create the anchor on the page in the place where you want to link to. Sliders and FAQs already have this code, so you would not need to do this step.

1. Put your cursor in the location where you want to link to.
2. Click the anchor icon  in the toolbar.
3. Enter a name for the anchor. This should be short, one to two words, using only use lower case letters, numbers, and hyphens. Each anchor you create on the page must be unique to the page.
4. Click the blue OK button.

Finding the Slider or FAQ Anchor ID

Sliders and FAQs already have assigned IDs that you can link to. The page the slider or FAQ is on must already be live.

1. Go to the live page.
2. Right click on the slider or FAQ title that you want to link to.
3. Select “Inspect”.
4. Look at the highlighted code and go up two lines.
5. You should see something like id=”slider-d11e2783″ for sliders or id=”question-d11e1234″ for FAQs. The text in quotation marks is the name you need to link to.

Please note, if the title in the slider or FAQ snippet changes the ID will also change and your link would need to be updated.

Linking to an Anchor

1. Select the text you want to link from.
2. Click the Insert/Edit Link icon  in the toolbar.
3. Enter the appropriate URL.
   1. If the anchor is on the same page as the link you are creating, in the URL field enter #name (hash followed by whatever you named the anchor or the slider/FAQ ID).
   2. If the anchor is on a different page than the link you are creating or you are creating the link in a navigation file, first enter the URL for the page that the anchor is on by using the file picker to select the page within your site or pasting the outside URL. Then add #name (hash followed by whatever you named the anchor or the slider/FAQ ID). For an internal page your URL may look like {{f:123456}}#name.
4. Click the blue OK button.

Academic departments have the option to automatically pull in research project information to their CMS website. The information comes from a database of projects that are approved for public knowledge by the Research Office. The standard information that is pulled in is:

• Principal Investigator
• Co-PI
• College/School
• Department(s)
• Sponsor
• Center/Institute

The PI and Co-PI fields will automatically link names to their faculty page if one is set up in the CMS.

Departments can be given the ability to override this information (as viewed on your departmental website only) or manually add projects that are not listed. If you have never used this function before, you must contact cmshelp@mtu.edu to get set up. Departments currently set up are Mechanical Engineering-Engineering Mechanics, Electrical and Computer Engineering, and Computer Science.

1. From the Pages List View navigate to the research projects folder.
2. From the dropdown next to the green +New button at the top of the screen select Research Project.
   
3. Page Title: Enter the name of the research project.
4. Filename: Enter the IR Number or a short project name in the filename using only lower case letters, numbers, and hyphens.
5. Leave the Research Project Options as is.
6. Click the blue Create button. The item will open you up to the Edit screen which is not used.
7. From the Properties tab, go to MultiEdit Content.
   
8. Project Title: This field will already be populated based on what you entered when you created the Research Project item.
9. Start Date: Select a start date for when you want the content to go live.
10. End Date: Select an end date for when you want the content to no longer be live.
11. IR Number: Enter the IR Number for the project. If this number matches an existing IR number that is displaying on your page, the information you enter in the fields will override the information that comes from the database.
12. Award Amount: Enter the award amount for the project including the $.
13. College/School: Enter the college or school name that the project is under.
14. Department: Enter the department name for the project.
15. Sponsor: Enter the name of the sponsor for the project.
16. Center/Institute: Enter the name of associated centers or institutes for the project as needed.
17. Principal Investigator Name: Enter the name of the principal investigator for the project.
18. Principal Investigator Email: Enter the email address for the principal investigator for the project in order to link to an existing personnel item.
19. Co-Investigator 1-4 Name: Enter the names of up to four co-investigators for the project.
20. Co-Investigator 1-4 User ID: Enter the corresponding user ID for the co-investigator(s) listed in order to link to existing personnel items.
21. Body: Use the mini-editor to add additional information to the research project.
22. Save the changes with the blue Save button at the bottom of the screen.
23. Publish the item.

It is important to use properly structured HTML headings when organizing your web content. Think of webpage headings as a table of contents for a story.

Headings are not required on webpages. However, they help break up and organize lengthy informational webpages—improving readability. Proper heading use is not only important for accessibility, it also has search engine optimization benefits, which can help your webpages rank higher in Google’s search results.

Heading Order

A webpage should only have one heading level 1 <h1>. Your page’s title is automatically the <h1> of the webpage, so you do not need to apply that heading level yourself.

Any headings used in your body copy (after your page title) with then be an <h2> or lower. In total you can use headings 2-6. At Michigan Tech, we recommend sticking to headings 2-5 as an <h6> is not typically needed.

Nesting Headings

If you “nest” headings—in other words if you have a subheading of a heading—you should not skip heading levels. If you have an <h2> and you want to follow it with with a subheading, use an <h3>. If you follow that with a subheading of “equal weight”—use an <h3> again. A subhead of a subhead would be <h4>. Once you are done with subheadings, you can return to <h2>.

Please also keep in mind that sliders titles and sidebar titles are automatically <h2>s. If you choose to nest any headings inside a slider or sidebar, you should begin with the <h3> heading level.

Summary

Properly ordering your headings is important. You should not use headings to achieve visual-only results. For instance, if you have an announcement that you want to stand out, but which is not a heading for the content afterward—you should not use a heading. You can instead use bold, italics, or the options in the Styles dropdown like Large, Larger, Largest, Small, or Smaller to style paragraph text to look unique and stand out.

Creating Headings

To apply a heading style to a line of text, put your cursor inside of the line of text that you want to turn into a heading and then select a heading level from the left-most dropdown menu in the editor bar.

To learn more about creating special heading styles:

• H2 Graybar and H2 Top Title Snippets
• H2 Top Title w/More Links Snippet

There are three button colors that can be used in the CMS. They can easily be created when you set up your link or you can use the List Spread Buttons snippet to created multiple buttons in a row.

Yellow

Black

Blank

Primary Button

Good for calls-to-action, think of it as a main purpose for a user on a page. You can find examples on our Apply Now page and in the sidebar of our magazine which prompts the user to download the magazine.

Primary Button

Secondary Button

This button compliments a primary button in some format. Generally, you only use this button if you already have a primary button somewhere on your page.

Secondary Button

Styled Button

If you’re looking to have a link that is a bit more stylized but not necessarily a call to action, this is a good option. These links can be seen on our homepage as the link to more news and on profiles with CV’s. This is the default button style in the List Spread Buttons snippet, the RSS Feed Combined snippet, and the Top Title w/More Links snippet.

Styled Button

Creating a Single Button in the CMS

JustEdit Editor in an Editable Region

1. Type the text you want to be in the button.
2. Select the text and choose the Insert/edit Link icon from the toolbar. 
3. Enter the URL for the button to link to or select the appropriate CMS link using the file picker.
   
4. From the Class dropdown at the bottom of the window choose “Link Button Yellow,” “Link Button Gray,” or “Link Button Blank.”
5. Click the blue OK button.

“Mini Editor” in an Asset

1. Type the text you want to be in the button.
2. Select the text and choose the Insert/Edit Link icon from the toolbar.
3. Link the text using the Link URL field.
   
4. Go to the Advanced tab.
5. Enter the appropriate button code in the Classes field (without quotation marks).
   1. “button” for a yellow button
   2. “button-black” for a black button
   3. “button-blank” for a blank button
      
6. Insert.

Creating Multiple Buttons in a Row in the CMS

Use the List Spread Buttons Snippet to create multiple buttons in a row.

Data tables present tabular information in a grid. They are made up of columns and rows that communicate the meaning of the information. There are several options for styling your data in tables to allow for a clean, visually appealing look.

The use of HTML tables is reserved for displaying data in an organized manner. It is not proper to use table code to control webpage layout or design. To display content on your webpage in multiple columns, please refer to the Boxed Sections Snippets or the List Spread Buttons Snippet. 

Items marked with * are required for accessibility.

Insert Table

From the table icon  in the editor go to Insert Table and select the number of rows and columns for the table. Insert the data into the appropriate fields.

General Table Properties

Using the table icon or right clicking on the table, go to Table Properties.

 Advanced Table Properties

In the Table Properties window, select the Advanced tab.

Cell Properties

When you have one or more cells selected, right click or go to the table icon, go to Cell and choose Cell Properties.

General Row Properties

With your cursor in a cell in the row or the entire row selected, right click or go to the table icon, go to Row and choose Row Properties.

Advanced Row Properties

In the Table Properties window, select the Advanced tab.

Table With Lines

To make a table with the borders turned on, such as:

1. In the General Table Properties select “(custom)” from the Class dropdown.
2. In the blank field that appears, enter “lines” (without quotation marks) and click OK.

Basic Sortable Table

A sortable table allows the user to sort the table by any of the columns. Creating this type of table does require a small amount of code editing. You can also add caption or footer content to these tables, but not spacer rows.

1. In the General Table Properties select “(custom)” from the Class dropdown.
2. In the blank field that appears, enter “striped table-sortable” (without quotation marks) and click OK.
3. Enter your content in the fields as needed.
4. Change to the code view. 
5. Find the table code. It should begin with <table class=”striped table-sortable data” . . .
6. The first row of the table must be designated as a header row. If it is not already, change the code to make the header row (<thead> and </thead> around the cells). After the <table> tag it should look like:

   <thead>
   <tr>
   <th scope="column">First Column Header</th>
   <th scope="column">Second Column Header</th>
   <th scope="column">Third Column Header</th>
   . . .
   </tr>
   </thead>
   <tbody>
   (the rest of your table content)

7. Add the class attributes to the header cells. The column you want the information to be sorted by default should get a class of “table-th-sort header”, the rest should get a class of “header”. The beginning of your table code should now look something like:

   <table class="striped table-sortable data">
   <thead>
   <tr>
   <th scope="column" class="table-th-sort header">First Column Header</th>
   <th scope="column" class="header">Second Column Header</th>
   <th scope="column" class="header">Third Column Header</th>
   . . .
   </tr>
   </thead>
   <tbody>
   . . .

8. Click the OK button to save the code changes. Your table should now have arrows next to each column heading and when you save the content in the editor, you should be able to interact with the table in the Preview screen.

Sortable Tables with Custom Sort Titles for Cells

This advanced use of sortable tables would allow you to define the text used to sort for each cell. For example, if your cell includes a person’s name with the first name followed by the last name, but you want the sort to go by last name, you can set that with this table. Creating this type of table does require quite a bit of code editing.You can also add caption or footer content to these tables, but not spacer rows.

1. In the General Table Properties select “(custom)” from the Class dropdown.
2. In the blank field that appears, enter “striped table-sortable data” (without quotation marks) and click OK.
3. Enter your content in the fields as needed.
4. Change to the code view.
5. Find the table code. It should begin with <table class=”striped table-sortable data” . . .
6. The first row of the table must be designated as a header row. If it is not already, change the code to make the header row (<thead> and </thead> around the cells). After the <table> tag it should look like:

   <thead>
   <tr>
   <th scope="column">First Column Header</th>
   <th scope="column">Second Column Header</th>
   <th scope="column">Third Column Header</th>
   . . .
   </tr>
   </thead>
   <tbody>
   (the rest of your table content)

7. Add the class and data-parser attributes to the header cells. The column you want the information to be sorted by default should get a class of “table-th-sort header”, the rest should get a class of “header”, and they all need data-parser=”title”. The beginning of your table code should now look something like:

   <table class="striped table-sortable data">
   <thead>
   <tr>
   <th scope="column" class="table-th-sort header" data-parser="title">First Column Header</th>
   <th scope="column" class="header" data-parser="title">Second Column Header</th>
   <th scope="column" class="header" data-parser="title">Third Column Header</th>
   . . .
   </tr>
   </thead>
   <tbody>
   . . .

8. Each cell in the rest of your table (look for <td> then needs a title attribute that lists the content that will be used for alphabetizing. For example, if you have a field that is their name (first, last) and you want the table to sort by their last name you could designate the content with the last name first in this attribute. You must include some value in the quotation marks for title=”” or the column will not sort properly. Here is an example of what the <tbody> section of your table could look like:

   <tbody>
   <tr>
   <td title="Rockwell, John J.">John J. Rockwell</td>
   <td title="1979, Rockwell">1979</td>
   <td title="Business Administration, Rockwell">Business Administration</td>
   </tr>
   <tr>
   <td title="Bernard, William J."><a href="{{f:18483798}}">William J. Bernard, Jr.</a></td>
   <td title="1969, Bernard">1969</td>
   <td title="Metallurgical and Materials Engineering, Bernard">Metallurgical and Materials Engineering</td>
   </tr>
   <tr>
   <td title="Nowosad, Joseph"><a href="{{f:18484643}}">Joseph M. Nowosad</a></td>
   <td title="1987, Nowosad">1987</td>
   <td title="Metallurgical and Materials Engineering, Nowosad">Metallurgical and Materials Engineering</td>
   </tr>
   </tbody>

9. Your full table code could look like:

   <table class="striped table-sortable data">
   <thead>
   <tr>
   <th scope="column" class="table-th-sort header" data-parser="title">Name</th>
   <th scope="column" class="header" data-parser="title">Class Year</th>
   <th scope="column" class="header" data-parser="title">Major</th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td title="Rockwell, John J.">John J. Rockwell</td>
   <td title="1979, Rockwell">1979</td>
   <td title="Business Administration, Rockwell">Business Administration</td>
   </tr>
   <tr>
   <td title="Bernard, William J."><a href="{{f:18483798}}">William J. Bernard, Jr.</a></td>
   <td title="1969, Bernard">1969</td>
   <td title="Metallurgical and Materials Engineering, Bernard">Metallurgical and Materials Engineering</td>
   </tr>
   <tr>
   <td title="Nowosad, Joseph"><a href="{{f:18484643}}">Joseph M. Nowosad</a></td>
   <td title="1987, Nowosad">1987</td>
   <td title="Metallurgical and Materials Engineering, Nowosad">Metallurgical and Materials Engineering</td>
   </tr>
   </tbody>
   </table>

10. Click the OK button to save the code changes. Your table should now have arrows next to each column heading and when you save the content in the editor, you should be able to interact with the table in the Preview screen.

Interactive images, where the user can move around in the image to view the scene from every angle. 360 photos are becoming more widespread and easier to create. Now you can embed them on your OU Campus CMS website in the upper page image or within the body content.You 360 image must first be set up in Flickr. Check out some of the 360 images we have done.

As the Page Image

1. Select the page image location option in the Page Parameters. You can choose Feature, Banner, or Sub-Banner.
2. In MultiEdit Content select the Video option from the Banner Type dropdown.
3. Paste the .jpg URL from Flickr in the Banner Video ID field.
   1. To get the URL, go to the Flickr page for the 360, click the Download icon, right click the Large option and choose Copy Link Location.
4. Save your changes.

Within the Body Content

1. Insert the Video snippet in location where you want the 360 to appear.
2. Paste the .jpg URL from Flickr in the URL field.
   1. To get the URL, go to the Flickr page for the 360, click the Download icon, right click the Large option and choose Copy Link Location.
3. If desired, enter a value in the height field.
4. If the default preview location of the image is not where you want it, you can change it.
   1. With your cursor in the field to the right of width, press tab to add a new row.
   2. In the left column of the new row type “default_yaw” (without quotation marks).
   3. In the right column enter the numerical angle in degrees that the view should be adjusted by. The degrees move the image counter-clockwise (as if you were dragging from left to right). During the initial loading of a page the automatic pan spans approximately 40 degrees.
5. Save your changes.

To remove content from a live site, pages and files must be moved to the Recycle Bin. Pages that are moved to the Recycle Bin can be restored, if necessary. When a page is recycled the published content is automatically removed. Once a page is deleted from the Recycle Bin or a folder is deleted, it can no longer be retrieved.

If you are removing an entire folder, you should first recycle all content items within the folder then delete the folder itself. If you delete the folder it will delete all items within it and that content will not be able to be restored. Before removing any page you should first check its dependencies.

Check Dependencies

Before recycling or deleting content, you should always check to see what other pages or files are linking to that content. You can do this with the Dependency Tag Info sidebar gadget.

1. Go to your main folder.
2. Open the sidebar gadgets using the plug icon in the upper right corner. 
3. Open the Dependency Tag Info gadget.
4. Type the path of your file, without the first site folder, in the search box. For example, if you wanted to check on https://www.mtu.edu/umc/services/digital/, from within the /umc folder you would enter /services/digital/index.pcf.
5. Click the search icon.
6. Information about the item will show up below the search box. For personnel items, be sure to click on the .html link to see the correct dependencies.

Subscribers are any other files in the CMS that are linking to the file you searched. Be sure to update those links or contact the other department to let them know the page is being removed.

Recycle

From the Pages List View, hover over the item, go to the File menu, and select Move to Recycle Bin. Alternatively, you can select multiple items using the checkboxes then select Move to Recycle Bin from the top menu.

Be sure to read the message that pops up as it will tell you any other items in the CMS that are linking to this item. Those pages should have their link updated. If that page is not one you have access to, you should notify that department.

Redirect

Once your page is recycled, people with the link bookmarked will get a 404 broken page error. Google will also still have the page indexed and it will show up in search results for up to a few weeks. To avoid this issue, you can request a redirect. When a redirect is in place, anyone going to the old, recycled URL will be automatically moved to a different, working URL. To have a redirect put in place, please email cmshelp@mtu.edu with the old URL that you have recycled and the new URL that it should be redirected to.

Restore

To restore items, the Recycle Bin can be found under Content in the Global Navigation Bar. Find the item(s) you want to restore from the list or by using the filter on the Name or Original Location. You can hover over a single item and select Restore or select multiple items using the checkboxes then select Restore from the top menu.