ITS

Information Technology Services
Information Technology Services

Styling Blocks Using CSS Classes

Styling Blocks (except footer)

The following CSS classes can be assigned to blocks

To apply classes to blocks

  • Create a block
  • Add content to the block body
  • Enter the CSS class in the CSS Class(es) field
  • In the Region Settings assign block to a region
  • If desired, adjust Visibility Settings
  • Save the block

The Internal News Box Style

CSS Class:  internalnews box

Result:

screenshot of block with internalnews box class assigned 

CSS Class:  nav-menu box-shadow

Result:

screenshot of block with nav-menu box-shadow assigned

Styling Footer Blocks

As shown in the image below, the following classes can be assigned to blocks of the footer region

screenshot of footer block with all classes assigned


To apply classes to address and social media footer blocks

  • Create a block
  • Edit the source and enter the code provided in one of the sections below.
  • Replace the text in the example(s) below with your site-specific text
  • Exit the source (HTML)
  • Enter the CSS class in the CSS Classes field
  • In the Region Settings specify Footer Second region
  • Save the block to view the footer. 

Note: The Markup below has extra space after each <  and before each > to allow them to be displayed on the page. Without the extra spaces the markup would be translated into the icon. When entering the markup in your source remove the extra spaces.


The Footer Social Media Block

CSS Class:   footer-social-media-block

Markup:

< a class="twitter-icon" href="https://twitter.com/dept">Connect with our Department on Twitter< /a >
< a class="facebook-icon" href="http://www.facebook.com/department">Connect with our Department on Facebook< /a >
< a class="linkedin-icon" href="http://www.linkedin.com/department">Connect with our Department on LinkedIn< /a >
< a class="wordpress-icon" href="http://department.wordpress.com/">Connect with our Department on WordPress< /a >
< a class="youtube-icon" href="http://www.youtube.com/departmenttv">Connect with our Department on YouTube< /a >
< a class="flickr-icon" href="http://www.flickr.com/photos/department/">Connect with our Department on Flickr< /a >

Note:  You can choose to include one, multiple or all of the link icons listed above.

Result:

screenshot of footer block with footer-social-media-block class assigned

The Footer Address Block

 

CSS Class:  footer-address-block

Markup:

< p >Department Name, University Name< br / >

Building Name, Street Address< br / >

City, Province, Country< br / >

Postal Code< br / >

Phone Number< /p >

Result:

screenshot of footer block with footer-address-block class assigned

The Footer Address Block with Map Location Icon

CSS Class:   footer-address-block

Markup:

< p >Department Name, University Name< br / >

Building Name, Street Address < br / >

< a class="map-location" href="http://g.co/maps/vbf87" > City, Province, Country< /a >< br / >
Postal Code < br / >

Phone Number < /p >

Result:

screenshot of footer block with map location and footer-address-block class assigned