All posts by qwfranke

New Headers and Footers

Today we’re launching our new headers and footers. For many years now, we’ve offered our headers and footers as iframe codes, which worked well, until our new template came along in 2016. The new brand brought in different dimensions, styling, and navigation. This caused us a bit of trouble as the new dimensions and functionality would not work with the iframe setup found across various Tech-associated properties. This led us to seek out a new, long-term approach for headers.

Problem

Iframes are an easy way to embed pieces of content from other websites. However, they are limited in their integration with subpages. Our main issue dealt with height: all iframes were locked at 100px high. Whereas the new header changes in height depending on navigation type, and if the header is loaded on a mobile device. The same issues were found on the footer as well; the footer iframes simply can’t show enough detail, leading to contact information and other relevant links being cut off.

Solution

Use JavaScript! The new headers and footers are built with JavaScript which solves the issues mentioned above. The new headers allow you to have our horizontal navigation found throughout Tech’s site; you can pull in navigation from the CMS or build your own. Customize the navigation font size, the header type (same as before: mini, logo-only, full), custom search location, and to follow Tech’s main template: fixed header to stick to the top. Footers ship with the default contact information for the university, but information from a CMS site or custom contact information can be fed in.

Get Your New Header/Footer

Integration

Set up your new header or footer starting here. Then, copy the HTML/JavaScript snippet into where the banner(s) should show on your page. If you used our iframes in the past, you can just replace the iframes with your new snippets. And that’s it! Nothing difficult, but now you have a header or footer that follows the same style and technical build of the CMS banners. If you have any questions, please feel free to email cmshelp@mtu.edu.


Buttons buttons buttons

Q is such a cool…

Person

Dude

Guy

We’ve had buttons in the CMS for a long time, although they looked a bit different than the ones above. There used to be only one button style! Now there are three to choose from. So how should you prioritize which button(s) should be used? The key thing to keep in mind is importance. If you have a main call to action (apply, download, etc.), this can work as a primary button. But what if you needed a button that was to compliment other buttons? Such as a “View more downloads” or “Application Information”, this would work as a secondary button. These two core buttons should serve all needs that you have. But maybe you’re looking for a button that isn’t necessarily a call to action? In this case, a styled button may work for you. Look below for the appropriate buttons and styles.

Continue reading


New Blog Theme—Michigan Tech 2016!

new-blog

Look to the left, the top, or the right of this post. What do you see? You should be seeing our new WordPress theme! Earlier this year, we launched the new Michigan Tech homepage to much fanfare and with all the positive reactions, we had the idea to rollout the new design for our blogs.

OK, I admit: this was the plan all along. Starting now, as long as you are an admin for a blog hosted here on blogs.mtu.edu, then you have access to the new design and can enable it in just a few steps.
Continue reading


Creating a Pop-Up

Please refer to here to build a pop-up. The below is legacy and may not work as expected.

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 content.

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, videos, and most anything that you would normally slot into the rest of the page inside of this div.
Continue reading


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 cmshelp@mtu.edu.

  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 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.

Continue reading


Embedding a Video

Many users would like to embed a video on their webpage as it offers a more interactive experience for their users. Videos are also a great way to easily share information that may otherwise be a lengthy read. In this tutorial, we’ll walk you through the process of adding a YouTube video to your webpage in the CMS.

Step 1

If you haven’t already, upload your video to YouTube and get the URL. It will look like “http://www.youtube.com/watch?v=fXeEqwWp-Tw.
Continue reading