UI Customization Changes

Owned by Jen Bourey
Last updated: Apr 23, 2010Version comment
2 min read

Tabs and Flyouts

CSS Skin Scoping

As of uPortal 3.2, all distributed skin files are scoped by the "up" style class rather than by "fl-theme-SKINNAME". Both the "up" class and the skin's Fluid theme name will still be applied to the body element of each portal page.

This change should enable uPortal adopters to more easily create new skins by cloning existing uPortal skins. Deployers may however need to run a search replace on existing custom skins to transform "fl-theme-SKINNAME" to "up".

To be more explicit, the change described here results in:

Example CSS scoping in uPortal 3.1
.fl-theme-uportal3 #portalNavigation {background:#98b6c1 url(images/nav_bkd_btm.gif) bottom right repeat-x; border-top:1px solid #44626a;}

. . . becoming:

Example CSS scoping in uPortal 3.2
.up #portalNavigation {background:#98b6c1 url(images/nav_bkd_btm.gif) bottom right repeat-x; border-top:1px solid #44626a;}

Updated CSS Classnames

Under /* Portlets */

3.1 Name

3.2 Name

.portlet-container

.up-portlet-wrapper

.portlet-container-inner

.up-portlet-wrapper-inner

.portlet-top

.up-portlet-wrapper-top

.portlet-top-inner

.up-portlet-wrapper-top-inner

.portlet-bottom

.up-portlet-wrapper-bottom

.portlet-bottom-inner

.up-portlet-wrapper-bottom-inner

.portlet-toolbar

.up-portlet-titlebar

.portlet-controls

.up-portlet-controls

.portlet-content

.up-portlet-content-wrapper

.portlet-content-inner

.up-portlet-content-wrapper-inner

Importing Javascript and CSS

uPortal 3.2 introduces a new method of including JavaScript and CSS resources in the portal page. This utility provides aggregation capabilies via a maven plugin.

Prior to uPortal 3.2, stylesheet inclusion was generally accomplished by adding a @-style include to the main skin css file. While this method worked, that style of CSS inclusion leads to poor browser performance and provided no aggregation capabilities. Adding JavaScript files was only available through the theme transform.

JavaScript and CSS resource inclusions are now performed after examining the skin.xml file residing in the top-level folder of each uPortal skin. To include a new JavaScript or CSS skin resource, add a new <css/> or <js/> element to the file. Implementers should not use the XSLT file to add UI resources.

Example skin.xml file at uportal-war/src/main/webapp/media/skins/universality/mytheme/skin.xml
<s:resources xmlns:s="http://www.jasig.org/uportal/web/skin">
  
  <!-- Fluid Skinning System (FSS).  Includes a CSS reset for browser normalization. -->
  <css>/ResourceServingWebapp/rs/fluid/1.1.2/css/fss-framework-1.1.2.min.css</css>
  
  <!-- Default jQuery UI theme.  Comment this out if you are using your own custom jQuery UI theme. -->
  <css>/ResourceServingWebapp/rs/jqueryui/1.7.2/theme/smoothness/jquery-ui-1.7.2-smoothness.min.css</css>
    
  <!-- For printing of portal pages. Common to all skins using the universality theme -->
  <css>../common/css/print.css</css>
  
  <!-- For layout of portal pages (in tandem with FSS fluid.layout.css). Common to all skins using the universality theme. -->
  <css>../common/css/layout.css</css>
  
  <!-- Visual style for the portal. -->
  <css>portal.css</css>
  
  <!-- Visual style for portlet content. -->
  <css>portlet.css</css>

  <!-- Support for legacy uPortal css classes. -->
  <css>legacy.css</css>

  <!-- My custom additional theme CSS file -->
  <css>mytheme.css</css>
    
  <!-- Optional overrides specific to IE6.  This file needs to be created if you want IE6 specific CSS.
  <css conditional="if IE 6">ie6.css</css> -->
  
  <js>/ResourceServingWebapp/rs/jquery/1.3.2/jquery-1.3.2.min.js</js>
  <js>/ResourceServingWebapp/rs/jquery-plugins/cookie/1.0/jquery.cookie-1.0.min.js</js>
  <js>/ResourceServingWebapp/rs/jqueryui/1.7.2/jquery-ui-1.7.2.min.js</js>
  <js>/ResourceServingWebapp/rs/fluid/1.1.2/js/fluid-all-1.1.2.min.js</js>
  
  <js>../common/javascript/uportal/ajax-preferences-jquery.js</js>
  <js>../common/javascript/uportal/search.js</js>
  <js>../common/javascript/uportal/up-channel-browser.js</js>
  <js>../common/javascript/uportal/up-group-browser.js</js>
  <js>../common/javascript/uportal/flyout-nav.js</js>
</s:resources>

Add Feedback content box here.....