Portal styling or theming allows you to present portals and portlets to students and teachers using a consistent style of presentation. Styling can apply to all the attributes that contribute to the look and feel of a portal. A default single portal style can be defined that will cascade to all portals, attributes of individual portals can be modified as and if required, and attributes of individual portlets on a portal can be modified as and if required.


Styling


Styling is important for consistency and cohesion. Good styling will result in a user interface (UI) that will enhance student and teacher experiences and encourage better engagement with your portals. Basically, the better they look the more they will be used.


To deliver consistency, best practice is to develop a school Style Guide. The guide should cover presentation of the attributes of portals and portlets; layout attributes, text attributes, border attributes, and colour attributes. At the core, your Style Guide should record all of the design elements and interactions that occur within your portals.


The instructions below about styling are used when you create and manage LibPaths portals and create and manage LibPaths portlets.


Cascading Styles


LibPaths provides styling controls over three (3) levels:

  1. Global LibPaths styling - set at a global level attribute styles set at this level will cascade to all portals and portlets.
  2. Portal styling - set at individual portal level, attribute styles set at this level will apply to the current portal and all portlets on the current portal.
  3. Portlet styling - set at individual portlet level, attribute styles set at this level will apply only to the current portlet.


Note: Best practice is to modify one attribute at a time and review it on all levels.

Modifying Attributes

  1. All attributes can be reset to default values at any time.
  2. Text attributes are modified by selecting the font attributes for respective levels.
  3. Colour attributes are set by selecting colours from the colour panel or by inserting the valid hex code for a specific colour.
  4. Borders must be a least 1px wide for colours to show.

 

Global LibPaths Styling


Go to: Configure > LibPaths >Adjust LibPaths Display


The Global Portal Styling set on this level will apply to all attributes on all portals and portlets unless individual portals or portlets are subsequently modified at a lower level.


Defaults values when first installed:

  • Portal - no border
  • Portlet:
    • Title text - 12px + sans-serif + white
    • Title background - blue (hex #337ab7)
    • Border - 1px + blue (hex #337ab7)
    • Content - black


Portal Styling


Go to: Configure > LibPaths > {portal name} >Edit Portal


The Portal Style and Portlet Style set on this level will apply to all attributes of the current portal unless individual portlets on the current portal are subsequently modified.



Portlet Styling


Go to: Configure > LibPaths > {portlet} >Edit Content


The Portlet Style set on this level will apply to the current portlet.