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">
- Track your application status
- Submit yourÌýsupporting documents
- Arrange forÌýexternal test resultsÌýto be sent
- Apply forÌýscholarships and/or financial aid
- 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">
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:Ìý