Please enable javascript to view this page in its intended format.

Queen's University
 

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:
 

blockinternalnews.png 

 

CSS Class:  nav-menu box-shadow

 

Result:

 

blocknavmenuboxshadow.png

 

 

Styling Footer Blocks

 

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

 

footerallblocks.png


 

To apply classes to 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:  For illustrative purposes, the code below has extra space after each <  and before each >.  When entering the code in your source remove the extra spaces.

 


 

The Footer Menu Block

 

CSS Class:  footer-menu-block

 

Markup:

 

< ul >               

< li >< a href ="http://www.queensu.ca" >Queen's University< /a >< /li >               

< li >< a href ="http://library.queensu.ca/" >Library< /a >< /li >               

< li >< a href ="http://www.queensu.ca/its" >ITServices< /a >< /li >               

< li >< a href ="https://www.queensu.ca/its/forms/webpublish/" >Help and Support< /a >< /li >               

< li >< a href ="mailto:department@queensu.ca" >Email us< /a >< /li >

< /ul >

 

Result:

 

footermenublock.png 

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:

 

footersocialmediablock.png

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:

 

footeraddressblock.png

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:

 

footeraddressblockmaplocation.png

 

Kingston, Ontario, Canada K7L 3N6 613.533.2000