TTUHSC Information Technology
HomeInformation TechnologyInformation ServicesInformation Services TrainingLCMS

Luminis Content Management System

This document outlines TTUHSC's website style guidelines. All content published within the TTUHSC web site must adhere to these guidelines in order to maintain a consistent and professional look and feel. You are personally responsible for any content you publish for your department.

In this guide, you will see information for styles in Luminis CMS.

source code icon

Source Code Icon

When you see this icon, the information that follows involves HTML/XHTML code located in the 'Source View' tab in the Luminis CMS Editor.

You should be able to do everything that is needed in the WYSIWYG editor. The Source View is for those individuals that are familiar with code but does not necessarily mean that you will need to know any code. If there is a time when you need code, this guide will have explicit instructions to accomplish the goal.

Table of Contents

Introduction to the TTUHSC Style Guide

TTUHSC is currently using Luminis CMS to maintain the TTUHSC's organizations' and schools' web sites. These predefined templates help maintain a consistent look and feel for all of TTUHSC's web pages.

The following guidelines help reinforce these consistencies in the new TTUHSC website. Please follow these guidelines to develop and maintain any web pages for your particular department or school. The goal of this style guide is to ensure consistent quality and clarity for visitors.

back to top

Layout Guidelines

Accessibility

TTUHSC web sites must meet accessibility guidelines as defined by federal law in Section 508.

Remember: Add descriptive information to all pictures/images.

Opening New Windows

external class

Avoid opening new browser windows when linking within TTUHSC sites. Open a new window when linking out of TTUHSC.

Hyperlinks that link outside of TTUHSC should use the "external" class from the drop-down menu in the WYSIWYG.

Steps

  1. Once the link has been made, click once anywhere on the underlined, blue text of the link.
  2. In the drop-down menu at the top of your WYSIWYG Editor, select 'a.external'.

source code icon

Example of an external link

The following markup:

<a href="http://www.ttu.edu/" target="_blank" class="external">Link</a>

will produce the following result:

Link

back to top
Images

Avoid using unnecessary images when sufficient content will suffice. Extra images mean longer page load times for visitors, and more work for you because every image must contain a descriptive alt attribute.

Steps

  1. Once your picture has been made Web Ready* and imported into Luminis, click on the Insert Image icon (Insert Image Icon).
  2. A dialog box will come up with Folders on the left and Files on the right. Navigate to your file by double-clicking on the folder and single-clicking the file.
  3. Once you have the picture selected, make sure to enter the Alt text. This is information that we put into the system for those people who use site readers and are unable to see images. It is imperative that we include this information so that we are ADA compliant.
  4. Click on Insert
  5. If you would like to put a class on your picture (EXAMPLE: leftfloat which makes text immediately following the picture to be displayed to the right of the photo), click once on the picture in your WYSIWYG Editor.
  6. From the drop-down menu, select the appropriate class for your picture.

Web Ready images are set at a resolution of 72 dpi. An example of a moderate sized portrait picture would be 190 px X 240 px.

Image Styles

image with leftfloat class
image with rightfloat class
   
image with nofloat class
image with no class

As you can see, nofloat and having no class on the image are the same.

back to top

Image Wrap (for contact lists with photos)

The following shows an example of the class available for creating a vertical list of contact information with a photo of each person.

John Doe

John Doe

xxx.xxx.xxxx
john.doe@ttuhsc.edu

Jane Doe

Jane Doe

xxx.xxx.xxxx
jane.doe@ttuhsc.edu

source code icon

Image tag example

<img src="/id0900bbbc800e384f" alt="TTUHSC seal" />

Notice that the source of the image is a bunch of numbers and letters. This is the Documentum ID for the system, and for Luminis to work correctly, this ID must be in the code. Luminis uses this information to locate the file and correctly display it on both the WYSIWYG Editor and production server.

Image with a class of leftfloat

<span class="leftfloat"><img height="232" border="0" width="300" alt="map" src="/id0900bbbc800e384f" /></span>

Luminis will take care of putting the Documentum ID's as well as the height and width of the picture. All of this is done through the widget in the WYSIWYG editor.

back to top
Tables

At this point, we have not completely worked out how to create tables through the WYSIWYG editor. More information to come.

The WYSIWYG editor can, however, edit tables that have already been created. Below is information that you can copy and paste into your page and then edit the information to suit your needs.

Avoid using tables when possible. Tables should not be used for layout to position content.

  • Use tables when displaying tabular data (such as statistics) that would typically be viewed in a spreadsheet
  • Use tables when listing a long list of schedules of events with corresponding dates/times
  • For large tables of data, try to break the data into smaller tables.

Steps

  1. On this page, select the text below (between the ***Start*** and ***End*** marks) and copy the text
    Note: An easy way to copy is to select the text you wish to copy, hold down the Ctrl key and press C
  2. From the WYSIWYG editor of the file you wish to add a table, position your cursor where you would like to place the table and select the Source View tab
    Note: You might want to press the Enter button (carriage return) to create a space before you select the Source View tab
  3. If you pressed the Enter button in the previous step, you will need to select the <p></p> text before you paste the text into the Source View tab. Paste the text.
    Note: An easy way to paste is to hold down the Ctrl key and press V
  4. Select the WYSIWYG tab and edit your table
  5. Save your file like normal

source code icon

Fancy Tables example (bold text only for emphasis)

***Start***

<table class="fancy">
 <caption>This is an example fancy table</caption>
 <tr>
  <th>column header 1</th>
  <th>column header 2</th>
  <th>column header 3</th>
 </tr>
 <tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
 </tr>
 <tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
 </tr>
 <tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
 </tr>
</table>

***End***

The above markup will produce the following result: (hover over rows to see the effect)

This is an example fancy table
column header 1 column header 2 column header 3
data data data
data data data
data data data
back to top

Components

Left Page Navigation

The left navigation is used by visitors to navigate through a department or school's pages. The left navigation area includes mandatory and preset links.

  • The Quick Search and HSC Resources links are mandatory
  • Each department/school has a main set of navigation links
  • If a department/school has a sub-sections (training under HR, for example), the department/school's navigation must contain links to these sub-sections. The sub-section's navigation menu must include a link back to the main department/school's site in the left navigation.
  • If a link to another department or an external site is necessary in the left navigation, these links must be within a Quick Links flyout menu, and must not be a main navigation item.
  • Navigation in Luminis is handled as a series of links in a bulleted list where indented links are the flyouts usually located in the components folder on Luminis. Most often the name of the file is something like "tier_three_left_nav".

source code icon

Add the External class in the Navigation WYSIWYG Editor using the 'Source View' tab

Since the drop-down box in the Navigation WYSIWYG Editor does not display the external class, you will need to go to the Source View to enter that class.

Steps

  1. Once you have your link established, click once to position your cursor and click on the Source View tab
  2. Your cursor should be on the link. Look for the end of the link information (blue text) indicated by end quotation marks and click once in that position
  3. Type the following: target="_blank" class="external" inside the pointy brackets.
  4. Save your file like normal

The following markup:

<a href="http://www.ttu.edu/" target="_blank" class="external">Link</a>

will produce the following result:

Link

Portable Document Files (pdf)

Use a link to a portable document file (pdf) ONLY IF:

  • The document's visual format absolutely must be maintained
  • The document is longer than 3 pages
  • The user will probably want to save or print the document at a later time

Any time there is a link to a pdf file, a link to download the free Adobe Acrobat Reader must be provided. This can easily be done by adding a component at the end of your content.

Steps

  1. Position your cursor at the end of your content
  2. Click the Insert Component Icon (Insert Component Icon)
  3. Double-Click the HSC Root Web folder by double-clicking the two dots at the top of the folder dialog box (between 3-5 times)
  4. Double-Click the components folder
  5. Under the Files dialog, double-click the adobeFieldset file

The above will produce the following:

Download Free Adobe Reader Get Adobe Reader Adobe Acrobat Reader is required to view items marked with this icon:
Please click on the left image to download the free version.

Streaming Video Files (Windows Media)

Any time there is a link to a Windows media file (wma), a link to download Windows Media Player must be provided. This can easily be done by adding a component at the end of your content.

Steps

  1. Position your cursor at the end of your content
  2. Click the Insert Component Icon (Insert Component Icon)
  3. Double-Click the HSC Root Web folder by double-clicking the two dots at the top of the folder dialog box (between 3-5 times)
  4. Double-Click the components folder
  5. Under the Files dialog, double-click the winMediaFieldset file

The above will produce the following:

Download Windows Media Player Get Windows Media Player Free Windows Media Player is required to view items marked with this icon:
Please click on the left image to download the free software.


Streaming Video Files (Flash SWF Files)

Any time there is a link to a Flash media file(swf), a link to download Flash Media Player must be provided. This can easily be done by adding a component at the end of your content.

Steps

  1. Position your cursor at the end of your content
  2. Click the Insert Component Icon (Insert Component Icon)
  3. Double-Click the HSC Root Web folder by double-clicking the two dots at the top of the folder dialog box (between 3-5 times)
  4. Double-Click the components folder
  5. Under the Files dialog, double-click the flashFieldset file

The above will produce the following:

Download Free Macromedia Flash Player get flash Macromedia Flash Player is required to view items marked with this icon: flash file
Please click on the left image to download the free version.


back to top
Specifying File Types

When adding a link from a web page to a non-web file, add the class to the link through the WYSIWYG Editor by using the drop down box. Currently supported file extensions are: pdf, xls, doc, ppt, rtf. Any Windows Media file should use the wmedia class. More extensions will be added as needed. Please remember that pdf, swf, and wmedia links will need a component at the end of your content.

Steps

  1. Once you have created a link, position your cursor inside your link by clicking once somewhere in the blue
  2. Use the drop-down box to chose one of the following
    Note: the options listed below are only the most popular
Choices Results
a.pdf PDF file
a.wmedia Windows Media File
a.xls Excel file
a.doc Word document
a.ppt PowerPoint file
a.rtf Rich Text file
a.lock Secure Page
a.mail John Doe

note: a.mail should only be used when the link text is NOT the actual email address (as shown above).

back to top
TTUHSC Page Layout Elements

General Layout of a Page

The TTUHSC templates only allow certain regions to be editable. The following is an example of what would typically be present in the content area of the template for any given page.

To chose the following layout options through the WYSIWYG Editor, use the drop-down menu once you have selected your text (or before you type your text).

Choices Results
The page title is set up when you create your file (Title). To change the page title, select the information icon (i) located next to the View button on the folder page.

Page Title

Select your text and select Heading 2. Then, select h2.subtitle.

Page subtitle if necessary

Heading 2

First major section of page

Standard

Content for first major section.

Heading 3

Title for a sub-section

Standard

Content for the sub-section.

Headers

Heading 2

Header 2

Select your text and select Heading 2. Then, select h2.subtitle.

Header 2 subtitle

Heading 3

Header 3

Heading 4

Header 4

Heading 5
Header 5
Heading 6
Header 6
back to top
Ordered and Unordered Lists

Lists in Luminis are rather easy to accomplish through the WYSIWYG Editor but they do take a few steps.

To produce the following:

  1. item
    1. item
    2. item
    3. item
    4. item
  2. item
  3. item
  4. item

all you have to do is:

Steps

  1. Once you have either typed out your list or copied your list (using the Copy with Filter button on the WYSIWYG), select the list
  2. Click the Ordered List Icon (Ordered List Icon).
  3. Select the items that need to be indented and click the Increase Indent Icon (Increase Indent Icon).
  4. Now, you will need to change the numbers to alpha letters. To do this, select the items that you just indented (note: this will not show up in the WYSIWYG Editor) and click the down arrow by the Ordered List Icon and choose Lower Alpha Ordered List (shown below).
    Selections from the numbered list icon

To produce the following:

  • item
    • sub item
    • sub item
  • item
  • item
  • item

all you have to do is:

Steps

  1. Once you have either typed out your list or copied your list (using the Copy with Filter button on the WYSIWYG), select the list
  2. Click the Unordered List Icon (Bulleted List Icon).
  3. Select the items that need to be indented and click the Increase Indent Icon (Increase Indent Icon).
back to top
Column Layouts

2-column layouts are easy to achieve using the WYSIWYG Editor. The steps below will show you how to produce a two column layout.  If you prefer, the source code for columns is listed below as well.

Steps

  1. Position your cursor above the text you will be forming into columns by clicking once on the white-space of the WYSIWYG Editor.
    NOTE: nothing should be selected.
  2. Add 2 carriage returns (Enter Button)
  3. Position the cursor back at the beginning (up two lines)
  4. Select DIV from the drop-down menu.
  5. Select *columns from the drop-down menu and press enter twice.
  6. Press the arrow up button once.
  7. Select DIV from the drop-down menu.
  8. Select *columnsLeft from the drop-down menu.
  9. Type "Sample Left" and press the down arrow once.
  10. Select DIV from the drop-down menu.
  11. Select columnRight from the drop-down menu and press enter.
  12. Type "Sample Right".

You have now made the framework for your columns. You can either copy and paste information from another document (remember to use the Paste with Filter widget), or you can drag and drop text from the current page (steps below).

Steps

  1. Select the first half of your text
  2. Drag and drop the text by the words "Sample Left"
  3. Delete the words "Sample Left"
  4. Select the second half of your text
  5. Drag and drop the text by the words "Sample Right"
  6. Delete the words "Sample Right"
  7. Delete the extra lines.
  8. Save file like normal.


source code icon

2 Column Example (bold text only for emphasis)

***Start***

<div class="columns">
<div class="columnLeft">
<p>This is the left column</p>
</div>
<div class="columnRight">
<p>This is the right column</p>
</div>
</div>

***End***

The above markup will produce the following result:

Sample left column

Sample right column


 back to top
Anchors (Bookmarks)
back to top Anchors are used to direct users to several different places on the same page (Just like the 'back to top' and Table of Contents on this page). To do this through the WYSIWYG Editor:

Steps

  1. Once you have all of the text on your page, select the header that you’re linking to.
    Linking to header
  2. Click on the Bookmark icon (Bookmark Icon) and name the anchor.
    Name the bookmark
  3. Then, highlight the link to the anchor and click on the Insert Hyperlink Icon.
  4. On the hyperlink dialog page, select your bookmark to link to.
    Attaching the bookmark
back to top
©