CSS Updates 2017

Transparency Overlay

This class gives you an option of laying text over an image or graphic piece. You can modify the font of the text. Text-based titles make your content more accessbible and takes up fewer storage capacity.

The Code Structure

<div id="header">
  <a href="linking the image"><img alt="your alt tag" src="your image source file" /></a>
  <div id="header-overlay">
    <a href="linking the image overlay">
    <span class="header-name" style="font-size: 16px;">OVERLAY TITLE</span></a>
  </div>
</div>

Sample Code

<div id="header">
  <a href="http://www.uwo.ca/classics/" rel="noopener noreferrer" target="_blank">
  <img alt="Classical Studies Department" class="image" height="200" src="http://www.uwo.ca/arts/programs/images/classics290.jpg" width="290" /> </a>
   <div id="header-overlay">
    <a href="http://www.uwo.ca/classics/" rel="noopener noreferrer" target="_blank">  
    <span class="header-name" style="font-size: 16px;">Classical Studies</span> </a>
  </div>
</div>



Buttons

A set of multi-purpose buttons was added. These are text-based (vs. graphics), which makes them more accessbible and takes up fewer storage resources. These buttons are especially useful at the end of content block areas, e.g. to break up paragraphs with Read more or More Information.

Functional Buttons

In addition to existing buttons, we added a set of buttons that you can use for any purpose. These are text-based (vs. graphics), which makes them more accessbible than graphic buttons and they takes up fewer server resources. These buttons are especially useful at the end of content block areas, to break up paragraphs, e.g. Read more or More Information.

The width of the buttons will adjust to accomodate the number of characters in it.



<a href="http://uwo.ca"><button class="btn btn-primary">Primary button</button></a>





<a href="http://uwo.ca"><button class="btn btn-light">Light Button</button></a>



 

<a href="http://uwo.ca"><button class="btn btn-dark">Dark Button</button></a>

Callout Buttons

The callout buttons should be used very sparingly and occasionally, to emphasize an important piece of content. e.g. Register, Sign-up, etc. 

The width of the buttons will adjust to accomodate the number of characters in it.



<button class="button-purple">Callout Purple Button</button> 





<button class="button-green">Callout Green Button</button> 


Quotes

The Quote classes give you an option to draw user attention to a content piece. Also, it presents a great way to break up text flow. You can align the quote classes to right, left, and centre.

class .quote
Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. 

Praesent scelerisque eros sem, ut consequat arcu efficitur ac. Morbi consectetur rutrum lectus eu malesuada. Sed pulvinar congue est nec condimentum. Donec venenatis ex id velit maximus, nec porttitor mauris venenatis. Praesent nec vulputate sem, ac lobortis purus. Aliquam erat volutpat.

class .quote-left
Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.

Praesent scelerisque eros sem, ut consequat arcu efficitur ac. Morbi consectetur rutrum lectus eu malesuada. Sed pulvinar congue est nec condimentum. Donec venenatis ex id velit maximus, nec porttitor mauris venenatis. Praesent nec vulputate sem, ac lobortis purus. Aliquam erat volutpat.

class .quote-right
Sed fringilla mauris sit amet nibh. 

Praesent scelerisque eros sem, ut consequat arcu efficitur ac. Morbi consectetur rutrum lectus eu malesuada. Sed pulvinar congue est nec condimentum. Donec venenatis ex id velit maximus, nec porttitor mauris venenatis. Praesent nec vulputate sem, ac lobortis purus. Aliquam erat volutpat.

Praesent scelerisque eros sem, ut consequat arcu efficitur ac. Morbi consectetur rutrum lectus eu malesuada. Sed pulvinar congue est.



Sample code for the quote

<div class="quote">Sed fringilla mauris sit amet nibh.</div>

<div class="quote-left">Sed fringilla mauris sit amet nibh.</div>

<div class="quote-right">Sed fringilla mauris sit amet nibh.</div>



Content Boxes

New content boxes give you a subtle way to present information in a visually appealing area, which stands out from the rest of content. Each box is set to 30% of the content width so they can be used in groups of 3, 2, or used as one content piece. An image and / or a title can be used here as well.

Aliquam viverra, magna vel vulputate dapibus, lacus felis eleifend arcu, sit amet faucibus arcu ex a lectus. Vivamus id ipsum quis elit rutrum auctor. Duis venenatis magna non elit aliquam blandit. Quisque a mattis odio, non pharetra ex.

There is no image, but there's a header

Aliquam viverra, magna vel vulputate dapibus, lacus felis eleifend arcu, sit amet faucibus arcu ex a lectus. Vivamus id ipsum quis elit rutrum auctor. Duis venenatis magna non elit aliquam blandit. Quisque a mattis odio, non pharetra ex.

Aliquam viverra, magna vel vulputate dapibus, lacus felis eleifend arcu, sit amet faucibus arcu ex a lectus. Vivamus id ipsum quis elit rutrum auctor. Duis venenatis magna non elit aliquam blandit. Quisque a mattis odio, non pharetra ex.


Sample code

<div class="content-box">
  <img class="image" src="http://news.westernu.ca/wp-content/uploads/sites/2/2017/06/PREZWINNER_mills-340x220.jpg" />
  <p>Aliquam viverra, magna vel vulputate dapibus, lacus felis eleifend arcu, sit amet faucibus arcu ex a lectus.</p>
</div>