海角社区

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.

This article features styling options on our Drupal 7 WMS platform. Looking for information about content styles on the new WMS platform? Read our article, What you see is what you get!" guide to the new WMS.

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鈥攁nd, in fact, everything that 海角社区 is today鈥攃omes 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:听