ITS

Information Technology Services
Information Technology Services

WebPublish Update Notes


July 18, 2017 Update Notes

On Tuesday, July 18, 2017, theming updates provided by University Marketing will be promoted to WebPublish.  The following information provides a high-level overview of the changes.  

If you have any questions or concerns about this theme update, please submit your inquiry via the Online Help Form:  http://www.queensu.ca/its/helpform  or by contacting the IT Support Centre at x36666.  Please include the name and URL of your website in your inquiry.


'New' base font

  • Verdana and Lucida fonts will be replaced by Open Sans.
  • Open Sans is currently the base font for Queen's main website (http://www.queensu.ca)

'New' and enhanced stylistic elements

Instagram Icon

  • The Instagram icon will be updated to the new glyph icon.
  • The glyph will display as black by default and white when used in the footer.
  • The new Instagram icon is the same as that of the Queen's main website (http://www.queensu.ca)

Instagram icon white background as of July 18, 2017  Instagram icon in footer as of July 18, 2017

Tumblr Icon

  • Tumblr icon is a new addition to the icon collection.
  • The new Tumblr icon is the same as that of the Queen's main website (http://www.queensu.ca).

Tumblr icon

RSS Icon

  • RSS icon is a new addition to the icon collection.
  • The new RSS icon is the same as that of the Queen's main website (http://www.queensu.ca).

RSS icon

FunFacts!​

  • The styling of FunFacts! will be updated.
  • The new styling is the same as that of the Queen's main website (http://www.queensu.ca).
  • Inline styling made need to be removed/adjusted to account for the changes.
Current - Regular FunFact (class="funfact")

Example legacy funfact - regular

After update - Regular FunFact (class="funfact")

Example new funfact - regular

Current - Light FunFact (class="funfact-light")

Example legacy funfact - light

After update - Light FunFact (class="funfact-light")

Example new funfact - light

Current - Red FunFact  (class="funfact-red")

Example legacy funfact - red

After update - Red FunFact (class="funfact-red") 

Example new funfact - red

Current - Blue FunFact (class="funfact-blue")

Example legacy funfact - blue

After update - Blue FunFact (class="funfact-blue") 

Example new funfact - blue

Current - Gold FunFact (class="funfact-gold")

Example legacy funfact - gold

After update - Gold FunFact (class="funfact-gold")

Example new funfact - gold

Block quote

  • Blockquote (<blockquote>) styling will be updated.
  • The new styling is the same as that of the Queen's main website (http://www.queensu.ca).

Current

​​Example of legacy blockquote styling

After update

​​Example of new blockquote styling

​Info Message

  • The info-message class is a new addition.
  • Gives the element a subtle background and "info" icon to indicate that the content is useful information.
  • The new styling is the same as that of the Queen's main website (http://www.queensu.ca).

example of info message styling

External link Icon

  • The external-link class is a new addition.
  • Adds an icon to the link to indicate that the hyperlink will take the user to an external site.
  • The new styling is the same as that of the Queen's main website (http://www.queensu.ca).

example of external ink styling

Callouts

  • New callout classes for RSS and Tumblr, custom images/icons, callout stacks
  • Minimum width of callout is set to 280 px.
  • callout-container class has been retired. 
  • Full details will be available in the Callouts section of the WebPublish Tutorials following the update.

New mobile 'accordion' style menu

Details
  • Mobile menus will change to 'accordion' or 'hamburger' style.
  • The new mobile menu functionality is the same as the Queen's main website (http://www.queensu.ca).
  • The following captures are example of current (first/left panel) and future mobile menus (second/center panel shows collapsed and third/right panel shows expanded )

Current mobile menu Mobile menu before change

Mobile menu after update - collapsedMobile menu after change - collapsed

Mobile menu after update - expandedMobile menu after change - expanded

New search/sign-in utility bar

  • The search/sign-in utility bar will be updated to match that used by Queen's main website (http://www.queensu.ca)

New search/sign-in

Last updated:  July 14, 2017