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 is easy and consistent to use, will enhance student and teacher experiences, and will encourage better engagement with your portals. Basically, the better portals look and the easier they are to use, 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, menu 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 can be applied when you create and manage portals and create and manage 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.


Quick Navigation Menus


A quick navigation menu, called an Auto-Menu, can be useful for any portal that contains multiple portlets or portals with long pages that require a lot of user scrolling. A quick navigation menu will assist students and teachers to more readily locate specific portlets of content an any portal and easily navigate to specific content areas, especially if multiple portlets cascade down the page and the user would have to scroll extensively to locate them.


Quick navigation menus are a component of portal styling and can be created:

  • automatically, or
  • manually

at either a global level or an individual portal level.


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 Portal 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.


Default global LibPaths default values for all portals are:

  • Portal - no border
  • Auto Menu - none
  • Portlet:
    • Title text - white
    • Title background - blue (hex #337ab7)
    • Text background - white
    • Border - 1px + blue (hex #337ab7)


Adjust defauglobal portal style:

  1. - apply or adjust portal styling or theming for all portals.
  2. Auto-Menu preference:
    1. None:
      1. no menu required, or
      2. create and maintain a menu manually.
    2. Top - place menu across the top of the portal.
    3. Left - place menu down the left side of the portal.
    4. Right - place menu down the right side of the portal.



Individual 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.


Adjust individual portal style:

  1. - apply or adjust portal styling or theming for this portal.
  2. Auto-Menu preference:
    1. None - no menu or manually create a menu.
    2. Top - place menu across the top of the portal.
    3. Left - place menu down the left side of the portal.
    4. Right - place menu down the right side of the portal.



Click to watch video



Individual Portlet Styling


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


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