Classy touches for your WMS site

Ever feel like your web page needs a little something to make it pop? With a bit of CSS styling, you can break up dense text or add contrast by highlighting certain items. Your page becomes easier to scan and this helps visitors get the information they need quickly.

With the upcoming release of Drupal 9, keep a eye out for changes to this content in the near future!

How to apply a class

Add styling by applying CSS classes directly to your HTML elements. A number of classes are available in the WMS for various tags. While working in the source view, simply edit the HTML by adding a class to the opening tag, typically using this syntax: <p class="classname">.

Here are some classy additions you can consider:

Ordered list

Use the "enhance" class in your ordered lists and the numbers will appear in a pretty accent colour. 

Example: <ol class="enhance">

1. Track your application status
2. Submit your supporting documents
3. Arrange for external test results to be sent
4. Apply for scholarships and/or financial aid
5. Find out when you can expect a decision

Pull quote

Use the "pull-quote" class to add magazine styling; lift a key quote and set it off from the rest of the page. 

Example: <span class="pull-quote">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Aenean sit amet enim ut ante dignissim congue in ut odio. That reputation—and, in fact, everything that McGill is today—comes from the efforts, contributions and achievements of hundreds of thousands of people. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec imperdiet scelerisque nulla sit amet imperdiet.

Suspendisse eu turpis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pretium commodo diam, condimentum cursus ligula tempus nec.

Highlight

Highlight an important message

• Use the "highlight" or "highlight-inline" class to set a yellow background.
  Example: <p class="highlight-inline">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu turpis sapien.

• Use the "highlight-icon" class to add an information icon over a yellow background.
  Example: <p class="highlight-icon">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu turpis sapien.

Note

Use the "note" class to create a yellow box with red dotted border.

Example: <p class="note">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu turpis sapien.

Box

Use the "box" class to create a 1-pixel box around an element.

Example: <p class="box">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Suspendisse eu turpis sapien.

Tables

Choose from a variety of classes that can be applied to tables:

• "zebra"
• "no-zebra"
• "zero"
• "tablesorter"

Example: <table class="tablesorter">

For more detailed instructions, visit the IT Knowledge Base: Basic HTML markup in the WMS