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.
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 topLayout 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
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
- Once the link has been made, click once anywhere on the underlined, blue text of the link.
- In the drop-down menu at the top of your WYSIWYG Editor, select 'a.external'.
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
- Once your picture has been made Web Ready* and imported into Luminis, click on the Insert Image icon (
). - 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.
- 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.
- Click on Insert
- 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.
- 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
 |
 |
 |
 |
As you can see, nofloat and having no class on the image are the same.
back to topImage 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
xxx.xxx.xxxx
john.doe@ttuhsc.edu
Jane Doe
xxx.xxx.xxxx
jane.doe@ttuhsc.edu
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
- 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 - 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 - 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 - Select the WYSIWYG tab and edit your table
- Save your file like normal
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".
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
- Position your cursor at the end of your content
- Click the Insert Component Icon (
) - 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)
- Double-Click the components folder
- Under the Files dialog, double-click the adobeFieldset file
The above will produce the following:
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
- Position your cursor at the end of your content
- Click the Insert Component Icon ()
- 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)
- Double-Click the components folder
- Under the Files dialog, double-click the winMediaFieldset file
The above will produce the following:
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
- Position your cursor at the end of your content
- Click the Insert Component Icon ()
- 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)
- Double-Click the components folder
- Under the Files dialog, double-click the flashFieldset file
The above will produce the following:
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
- Once you have created a link, position your cursor inside your link by clicking once somewhere in the blue
- 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 topTTUHSC 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 |
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:
-
item
- item
- item
- item
- item
- item
- item
- item
all you have to do is:
Steps
- Once you have either typed out your list or copied your list (using the Copy with Filter button on the WYSIWYG), select the list
- Click the Ordered List Icon (
). - Select the items that need to be indented and click the Increase Indent Icon (
). - 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).
To produce the following:
-
item
- sub item
- sub item
- item
- item
- item
all you have to do is:
Steps
- Once you have either typed out your list or copied your list (using the Copy with Filter button on the WYSIWYG), select the list
- Click the Unordered List Icon (
). - Select the items that need to be indented and click the Increase Indent Icon ().
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.
Steps
- 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. - Add 2 carriage returns (Enter Button)
- Position the cursor back at the beginning (up two lines)
- Select DIV from the drop-down menu.
- Select *columns from the drop-down menu and press enter twice.
- Press the arrow up button once.
- Select DIV from the drop-down menu.
- Select *columnsLeft from the drop-down menu.
- Type "Sample Left" and press the down arrow once.
- Select DIV from the drop-down menu.
- Select columnRight from the drop-down menu and press enter.
- 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
- Select the first half of your text
- Drag and drop the text by the words "Sample Left"
- Delete the words "Sample Left"
- Select the second half of your text
- Drag and drop the text by the words "Sample Right"
- Delete the words "Sample Right"
- Delete the extra lines.
- Save file like normal.
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
- Once you have all of the text on your page, select the header that you’re linking to.
- Click on the Bookmark icon (
) and name the anchor.
- Then, highlight the link to the anchor and click on the Insert Hyperlink Icon.
- On the hyperlink dialog page, select your bookmark to link to.
