Page Builder CSS

Discusses the use and location of the CSS files used for the Page Builder theme.

Page Builder CSS

The Page Builder theme contains four style sheets. The style sheets were created by concatenating and minifying several other style sheets by using Dojo build tools to optimize performance.
tundra.css

• Styles for Dojo widgets

• Location: $PORTAL_HOME/theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/v1.4.3/dijit/themes/tundra/tundra.css

• Bidi version: tundra_rtl.css

• Uncompressed version: none

common.css

• Defines the structure of the page. Can be used in any theme that shares the Page Builder HTML markup.

• location: dav:fs-type1/common-resources/ibm/css/common.css

• Bidi version: commonRTL.css

• uncompressed version: common.css.uncompressed.css

• contains:

  • oneui/v2.1/base/core.css - The basic OneUI page structure.

  • oneui/v2.1/base/dojo.css - OneUI structure for common dojo widgets.

  • portal/ibmPortlets.css - Basic styles used by IBM portlets.

  • portal/PortalSprite.css - Styles for a CSS sprite containing Portal images.

master.css

• Applies color, gradient, and other design elements for the Page Builder color scheme

• location: dav:fs-type1/themes/PageBuilder2/css/master.css

• bidi version: masterRTL.css

• uncompressed version: master.css.uncompressed.css

• contains:

  • default/default.css - The blue and black OneUI version 2.1 design.

  • default/dojoTheme.css - OneUI styles for common Dojo widgets.

  • portal/portal.css - Since OneUI was written for multiple IBM products, this CSS contains styles specific to WebSphere Portal.

widgets_combined.css

• Styles for some of the theme widgets: navigation, tagging, and rating

• location: $PORTAL_HOME/theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/v1.4.3/com/ibm/widgets

• bidi version: none

• uncompressed version: widgets_combined.css.uncompressed.css

• contains:

  • widgets_v21.css - Styles for the Page Builder navigation widgets.

  • trcWidgets.css - Styles for the tagging widgets.

  • ../../../../dojox/form/resources/Rating.css - Styles for the rating widgets.

OneUI

The Page Builder theme acquires much of its CSS from the IBM Lotus User Interface (referred to as OneUI), which describes the CSS and HTML markup structure used in many IBM products. Documentation for OneUI can be found at dav:fs-type1/common-resources/ibm/css/oneui/v2.1/lotusOneUIv2.1_Documentation.zip.

All the style sheets except widgets_combined have a corresponding bidirectional (bidi) version. This means that the page lays out from right to left, instead of left to right. These style sheets are used when the page is in a bidirectional language, such as Arabic or Hebrew.

All the style sheets except tundra are compressed to make the files smaller for performance. Compressing the files also makes the files harder to read, so uncompressed versions are provided. It is best to use uncompressed versions when editing and debugging theme CSS.

1. Open this file: <PortalServer_Root>/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/head.jsp

2. Find this code:

   <%-- Dojo theme styles --%>
   <link rel="stylesheet" href="<%=pageContext.getAttribute("dojoRoot", PageContext.REQUEST_SCOPE)%>/dijit/themes/tundra/tundra.css" type="text/css" />
   <%-- Portal theme and skin styles --%>
   <% if((Boolean)pageContext.getAttribute("isRTL", PageContext.REQUEST_SCOPE)) { %>
       <link rel="stylesheet" href="<%=getStaticUrl(pageContext, "commonRTL.css")%>" type="text/css" />
       <link rel="stylesheet" href="<%=getStaticUrl(pageContext, "masterRTL.css")%>" type="text/css" />
   <% } else { %>
       <link rel="stylesheet" href="<%=getStaticUrl(pageContext, "common.css")%>" type="text/css" />
       <link rel="stylesheet" href="<%=getStaticUrl(pageContext, "master.css")%>" type="text/css" />
   <% } %>
   <%-- Sametime Awareness styles --%>
   <c:if test="${!empty sametimeProxyUrl && isAuthenticated}"><link href="${portalProxyUrl}/http/${sametimeProxyUrl}/stwebclient/dojo.blue/sametime/themes/WebClientAll.css" type="text/css" rel="stylesheet"></c:if> 
   <%-- Styles for system widgets--%>
   <link rel="stylesheet" href="<%=pageContext.getAttribute("dojoRoot", PageContext.REQUEST_SCOPE)%>/com/ibm/widgets/css/widgets_combined.css" type="text/css" />

3. Change it to the following:

   <%-- Dojo theme styles --%>
   <link rel="stylesheet" href="<%=pageContext.getAttribute("dojoRoot", PageContext.REQUEST_SCOPE)%>/dijit/themes/tundra/tundra.css" type="text/css" />
   <%-- Portal theme and skin styles --%>
   <% if((Boolean)pageContext.getAttribute("isRTL", PageContext.REQUEST_SCOPE)) { %>
       <link rel="stylesheet" href="<%=getStaticUrl(pageContext, "commonRTL.css.uncompressed.css")%>" type="text/css" />
       <link rel="stylesheet" href="<%=getStaticUrl(pageContext, "masterRTL.css.uncompressed.css")%>" type="text/css" />
   <% } else { %>
       <link rel="stylesheet" href="<%=getStaticUrl(pageContext, "common.css.uncompressed.css")%>" type="text/css" />
       <link rel="stylesheet" href="<%=getStaticUrl(pageContext, "master.css.uncompressed.css")%>" type="text/css" />
   <% } %>
   <%-- Sametime Awareness styles --%>
   <c:if test="${!empty sametimeProxyUrl && isAuthenticated}"><link href="${portalProxyUrl}/http/${sametimeProxyUrl}/stwebclient/dojo.blue/sametime/themes/WebClientAll.css" type="text/css" rel="stylesheet"></c:if>
   <%-- Styles for system widgets--%>
   <link rel="stylesheet" href="<%=pageContext.getAttribute("dojoRoot", PageContext.REQUEST_SCOPE)%>/com/ibm/widgets/css/widgets_combined.css.uncompressed.css" type="text/css" />

Parent

Design a site using Page Builder themes and skins

Related tasks

Modify a custom style by using page metadata

  wording corrected title so it would highlight in the navigator Changed content type Minor change Minor change

+

Search Tips   |   Advanced Search