Ã山ǿ¼é

Classy touches for your WMS site

Add style to your web pages using classes in the WMS.
Image by Olu EletuÌýonÌýUnsplash .

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 Ã山ǿ¼é 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">

Ìý 2017 2018
AMERICAS 300 350
EUROPE 450 420
ASIA 600 670

For more detailed instructions, visit the IT Knowledge Base:Ìý

Back to top