Posts under the ‘Styles’ category

Have you created a new Generic (Page) and can’t get the styling just right? Does the right sidebar look funny? Aren’t sure when and where to use headings or bulleted lists? The UMC web team can help “clean up” your web page so that the look and styling more closely matches today’s web standards.

Send us an email at <cmshelp@mtu.edu> with the URL of your web page (a live page or a CMS preview link) and let us know that you’d like a “style and coding clean up”. We will take a few minutes to clean up your web page and have it looking great.

A Link List is a useful template for displaying a list of links. Using the Link List template has its advantages. A standard style is used along with a standard and automatic use of display titles as linked text. What does a Link List look like? Here is an example:

A standard, left column link list

(more…)

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:

Paragraphs

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

This is an example of a right aligned paragraph.

Images

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

Centered Image

(more…)

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

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.

Note: The icons will not appear automatically when previewing in the CMS. They will appear, however, in most browsers once your web page is published to the live website.

You may guarantee that these icons show up at all times and in all browers. To do so, you will need to add a class to the HTML code of your link. If you are linking to a PDF, add a class of “pdf”. The same goes for “word” (Word Doc), “excel” (Excel Spreadsheet), and “ppt” (PowerPoint). Here is some sample code:

<a href="myfile.pdf" class="pdf">Annual Report</a>

Note that the code will be more complicated for CMS links, but the concept is the same. Simply add a class to your link and your file icon will always appear regardless of browser.

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

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

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

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:

• Modify existing FAQs
• Add New FAQs
• Remove FAQs
• Reorder FAQs
• Group FAQs

(more…)

We have provided you with some CSS class options for formatting your unordered lists. You may include bullets and spacing. You may remove the bullets, but leave the spacing. Or, you maybe remove the bullets and the spacing. To create an unordered list, use standard HTML similar to this:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2
<ul>
<li>Sub Sub Item 1</li>
</ul>
</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>

(more…)

This post is aimed at making you aware that there are a number of ways that you can layout a web page within the CMS. Most of the time, you will be using Figure 1, 2, 3, or 4 as your layout. We will outline a number of different possibilities for you, though. Note that a layout will already be chosen for any web page already created in the CMS. If you are creating a new web page, you will be able to choose your own layout based on what components and slots you use. Below, you will find an image of a layout followed by a description. There are 12 layouts in total.

(more…)

This post covers the different formats available to you when slotting items into the Right Sidebar. You have the following styling options:

• Boxed Right Sidebars
• Open (Unboxed) Sidebars
• Spotlights

Note that we have a separate post discussing how to slot items into the right sidebar. There are a number of different format options when slotting a Highlight into a sidebar. We will discuss the main ones: A boxed right sidebar with and without a title, an open right sidebar (box) with and without a title, and a right sidebar spotlight.

You can slot Highlights and Images into the right sidebar. There are two right sidebar slots available for you to use: Right Sidebar Slot – Boxed( 565) and Right Sidebar Slot – No box( 539). Open your Active Assembly Table Editor for a Generic and you’ll notice these two slots (with or without items slotted):

Empty right sidebar slots

(more…)