ITS

Information Technology Services
Information Technology Services

Styling Blocks Using CSS Classes


Site-wide Block Styling

In WebPublish, you can choose to have uniform block styling applied to your site. When this setting is enabled, all blocks (existing and new) will be displayed as follows:

  • If a block has a title, the title will appear with a coloured underline 
  • If a block does not have a title and appears below another block, a top hairline border will be added to the new block, providing a visual break

Note: if you are using block-specific CSS classes (e.g., internalnews box) on existing blocks, you may want to consider removing these for a cleaner, more modern look.

If you would like to have site-wide block styling applied to your site, please submit an IT Support Form, specifying which one of the colour options below you'd like to use. 

screenshot of a block with red title underline
screenshot of a block with no title and hairline top border
screenshot of a block with grey title underline
screenshot of a block with gold title underline

 

Custom Block Styling

In addition to the site-wide styling that is available, there are a number of individual block classes that can be applied to customize the look of your blocks for specific purposes. There are two types of block classes: legacy and contemporary. Legacy block classes can be used regardless of whether or not you've elected to move to the site-wide block styling. Contemporary classes should only be applied if you are using site-wide block styling. 

Add a Block Class: 

  1. Create a block or go to "Configure Block" for an existing block
  2. Locate the "CSS Class(es)" field
  3. Add the block class that you would like to be applied to the block. For example, if you would like to apply profile styling to the block, enter the following into the "CSS Class(es)" field: block-webpublish-profile. A full list of available block classes is shown below.
  4. Make any other changes to the block as desired (e.g., Region Settings, Visibility Settings, etc.)
  5. Click 'Save block". The changes will immediately be applied to the block in both live and authoring 

Note: for "View" block classes, you will first need to submit an IT Services Help Form to request that the view be configured for your site.

Legacy Block Classes:

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

Themed Block Classes:

CSS Class:  block-webpublish-quicklinks

Result: 

screenshot of the quick links block styling

CSS Class:  block-webpublish-documents

Result:

screenshot of the accessible documents block styling

CSS Class:  block-webpublish-profile

Result:

screenshot of the profile block styling

CSS Class:  block-webpublish-list

Result:

screenshot of the list block styling

CSS Class:  block-webpublish-employment

Result:

screenshot of the employment block styling

CSS Class:  block-webpublish-blog

Result:

screenshot of the blog block styling

CSS Class:  block-webpublish-calendar

Result:

screenshot of the blog block styling

Aggregator Block Classes

There are two additional block classes that can be applied in combination with certain of the themed block classes above. The "block-webpublish-views-dates" class allows you to display your block entries in date format. This is the same as the default formatting on the View: News and Views: Events blocks and can be useful for formatting Feed Aggregator blocks that you've set up or to apply to other Views (note: if you would like to have a view block set up for a content tag on your site, please submit an IT Services Help Form).

By default the View: News, View: Events and other "view" blocks are configured with a "See More" button in the bottom right-hand corner. To hide this link, you can apply the "block-webpublish-more-link-hidden" class. Examples of the block classes that can be styled with date format are shown below:

CSS Classes:  block-webpublish-employment block-webpublish-views-dates

Result:

screenshot of the employment block styling with date styling

CSS Classes:  block-webpublish-blog block-webpublish-views-dates

Result:

screenshot of the blog block styling with date styling

CSS Classes:  block-webpublish-calendar block-webpublish-views-dates

Result:

screenshot of the calendar block styling with date styling

CSS Classes:  block-webpublish-calendar block-webpublish-views-dates block-webpublish-more-link-hidden

Result:

screenshot of the calendar block styling including date formats and no "see more" link

Customizing the Footer Region

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