Responsive Portal Styles
Our goal with this project is to provide an accessibile, responsive, and future-proof template for applications throughout the University of Mississippi landscape. To facilitate this goal, we have developed new stylesheets and a templating mechanism to make use of them.
New Applications and Overhauls
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ... <script src="https://common.olemiss.edu/templates/um-templater.min.js"></script> <link rel="stylesheet" type="text/css" href="https://common.olemiss.edu/_css/application.min.css"/> ... </head> <body> <main id="main" class="container"> <h1>Page Title</h1> ... </main> </body> </html>
Portal Theme examples (simulated internal/external):
- Style Inventory — Includes HTML5 elements (more examples to come!)
- My Profile
- My Profile - Edit
- Change Specializations and Minors
- At Risk List (with revised advisor-v2.css and advisor-v2.js)
- Course Schedule Examples
- Degree Progress (Uses tabs and Tablesaw)
- My Schedule (Improved handling of multiple events!)
- My Favorites (Needs improvement)
- Faculty Activity Report example with left menu (under construction)
- Web Directory
- Diploma Application (Example uses "aria-labelledby" to reduce number of
- Elections (Example uses Pickadate and Stepper.)
- Survey (Example code shows methods of handling forms that expand with each answer.)
This UM Templater script is also capable of including a header and footer for applications that live outside the portal. Applications may utilize the full UM template by implementing a basic HTML5 structure, or specifying a class on the body tag like so:
<body class="um-full"> . The end result is an application that looks as though it were built as a part of the main UM website. Documentation for this will be available soon.
Relocation of Resources
- <script src="https://common.olemiss.edu/_js/jquery-2.1.0.min.js"></script> (if you need to stick with a particular version of jQuery)
- <script src="https://common.olemiss.edu/_js/jquery.js"></script> (really, this is just a copy of jquery-2.1.0.min.js)
- <script src="https://common.olemiss.edu/_js/lazyload.js"></script>
- <script src="https://common.olemiss.edu/_js/placeholder.js"></script>
Applications that are already in production can benefit from minimal changes to their HTML.
Step 1. Update CSS Link
The original code for legacy applications included calls to portal.css and (sometimes) ptemp1.css. More recent ones used portal2011.css, as well:
<LINK href="https://secure3.olemiss.edu/irj/go/km/docs/documents/UMStyleSheets/portal.css" rel="stylesheet" type="text/css" media="screen" > <LINK href="https://secure3.olemiss.edu/irj/go/km/docs/documents/UMStyleSheets/ptemp1.css" rel="stylesheet" type="text/css" media="screen" > <LINK href="https://secure3.olemiss.edu/irj/go/km/docs/documents/UMStyleSheets/portalprint.css" rel="stylesheet" type="text/css" media="print" > <LINK href="https://secure3.olemiss.edu/irj/go/km/docs/documents/UMStyleSheets/ptemp1print.css" rel="stylesheet" type="text/css" media="print" >
These should be replaced with this:
<link rel="stylesheet" href="https://common.olemiss.edu/_css/legacyportal.css" type="text/css">
The new legacyportal.css should handle most of the styles of the previous stylesheets, though we expect to find some snags that need correcting as the conversion process continues. If your application had stylesheets developed specifically for it, be sure to include those after the legacyportal.css link.
This may be all that is needed to make things "look" okay.
Step 2. Update Structure
The new layout lets you remove some of the structure we originally created to mirror SAP's theme framework, and at the same time, it makes the page titles more accessible. Here's some sample legacy code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> ... <body> <div id="container"> <div id="pagetoolbar">Page Title</div> <div id="page"> <div id="content"> <div id="information"> ... </div> </div> </div> </div> </body> </html>
We can now use a more semantic structure with the simpler HTML5 doctype and <html> tag:
<!DOCTYPE html> <html lang="en"> ... <body> <main id="main" class="container"> <h1>Page Title</h1> ... </main> </body> </html>
The following examples illustrate how the changes will affect the documents.
See information on testing your applications for valid HTML5 and accessibility.