Category Archives: Styles

Buttons buttons buttons

Q is such a cool…




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

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

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

Aligning Items

You can align paragraphs, divs, tables, images and other elements using CSS classes. Alignment options include left align, center align, and right align. You may align items using the following classes in ePhox code view:


<p class="right">Right aligned paragraph.</p>

This is an example of a right aligned paragraph.


<img src="test.jpg" class="center" />

Centered Image
Centered Image

Continue reading

File Icons—How do they appear?

You may notice file type icons appearing after your links that link to files. This includes Word documents, Excel spreadsheets, PDFs, and PowerPoint presentations. Here is an example from the Research website:

Example: File Icons
Example: File Icons

Where do these icons come from? They are automatically inserted after your link in most modern browsers. They will not automatically appear in most versions of Internet Explorer. They are automatically inserted to indicate to the user what type of file is being linked to. This helps to let them know what to expect and what they may be downloading.

Continue reading

Adding yellow arrow preceding a link

Sometimes it’s useful to give a link a little extra visual weight in order to draw the users attention to it. This may be appropriate for a link to a form that needs to be downloaded or to a new Word Document that needs to be reviewed. We have provided a link class to accomplish this feat. Use the CSS class “arrow” on the link that you wish to draw attention to:

<a class="arrow" href="#">Download PDF</a>

This CSS class will produce the following link:

Yellow arrow preceding link
Yellow arrow preceding link
If you would like to learn about the PDF icon that also appears with this link, please review our blog post entitled “File Icons—How do they appear?“.

Predefined CMS background colors

Note: this documentation only applies to the old CMS template.

There is a predefined set of  element background color classes available for use on CMS webpages. The following colors are available:

  • gold
  • black
  • white
  • gray
  • light-gray
  • steel-blue
  • royal-blue
  • light-blue
  • teal
  • olive-green
  • light-green
  • burgundy
  • crimson
  • tangerine
  • khaki

You may use these colors to style the background color of HTML elements such as paragraphs, divs, and headings. Do so by giving an HTML element a class of the color that you wish to use. Here is an example of each color applied to a paragraph:

<p class=”gold”>This is gold</p>

<p class=”black”>This is black</p>

<p class=”white”>This is white</p>

<p class=”gray”>This is gray</p>

<p class=”light-gray”>This is light-gray</p>

<p class=”steel-blue”>This is steel-blue</p>

<p class=”royal-blue”>This is royal-blue</p>

<p class=”light-blue”>This is light-blue</p>

<p class=”teal”>This is teal</p>

<p class=”olive-green”>This is olive-green</p>

<p class=”light-green”>This is light-green</p>

<p class=”burgundy”>This is burgundy</p>

<p class=”crimson”>This is crimson</p>

<p class=”tangerine”>This is tangerine</p>

<p class=”khaki”>This is khaki</p>

Creating and Managing FAQs

A number of CMS websites take advantage of our Frequently Asked Questions (FAQs) feature: styled, expanding sections of frequently asked questions eloquently organized and displayed to the user. Since your department’s website most likely already has an FAQ section, we will first explain how to maintain yours. We will then explain how to create a new FAQ section from scratch.

Maintaining Your FAQs

Your department’s website may have one or more groups of FAQs on its website. You may want to:

Continue reading