[jboss-svn-commits] JBoss Portal SVN: r5447 - in docs/trunk: referenceGuide/en referenceGuide/en/images/setup referenceGuide/en/modules userGuide/en/images/setup userGuide/en/modules
jboss-svn-commits at lists.jboss.org
jboss-svn-commits at lists.jboss.org
Fri Oct 13 14:58:52 EDT 2006
Author: roy.russo at jboss.com
Date: 2006-10-13 14:58:37 -0400 (Fri, 13 Oct 2006)
New Revision: 5447
Added:
docs/trunk/referenceGuide/en/images/setup/default_ss.jpg
docs/trunk/referenceGuide/en/images/setup/inst_localhost.jpg
docs/trunk/userGuide/en/images/setup/default_ss.jpg
Modified:
docs/trunk/referenceGuide/en/master.xml
docs/trunk/referenceGuide/en/modules/installation.xml
docs/trunk/referenceGuide/en/modules/overview.xml
docs/trunk/referenceGuide/en/modules/supported.xml
docs/trunk/referenceGuide/en/modules/themeStyleGuide.xml
docs/trunk/referenceGuide/en/modules/themeandlayouts.xml
docs/trunk/userGuide/en/modules/overview.xml
Log:
JBPORTAL-1080 - Update UserGuide for 2.6DR
JBPORTAL-1081 - Update ReferenceGuide for 2.6DR
Added: docs/trunk/referenceGuide/en/images/setup/default_ss.jpg
===================================================================
(Binary files differ)
Property changes on: docs/trunk/referenceGuide/en/images/setup/default_ss.jpg
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: docs/trunk/referenceGuide/en/images/setup/inst_localhost.jpg
===================================================================
(Binary files differ)
Property changes on: docs/trunk/referenceGuide/en/images/setup/inst_localhost.jpg
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Modified: docs/trunk/referenceGuide/en/master.xml
===================================================================
--- docs/trunk/referenceGuide/en/master.xml 2006-10-13 18:44:54 UTC (rev 5446)
+++ docs/trunk/referenceGuide/en/master.xml 2006-10-13 18:58:37 UTC (rev 5447)
@@ -22,10 +22,10 @@
]>
<book lang="en">
<bookinfo>
- <title>JBoss Portal 2.4</title>
+ <title>JBoss Portal 2.6DR</title>
<subtitle>Reference Guide</subtitle>
- <releaseinfo>Release 2.4 "Devil"</releaseinfo>
- <releaseinfo>July 2006</releaseinfo>
+ <releaseinfo>Release 2.6DR "Ninja"</releaseinfo>
+ <releaseinfo>October 2006</releaseinfo>
<author>
<firstname>Thomas</firstname>
<surname>Heute</surname>
@@ -42,8 +42,8 @@
<email>boleslaw.dawidowicz at jboss.com</email>
</author>
</bookinfo>
- <para>Release 2.4 "Devil"</para>
- <para>July 2006</para>
+ <para>Release 2.6DR "Ninja"</para>
+ <para>October 2006</para>
<toc/>
<!-- portal overview - marketing stuff --> &overview;
<!-- comprehensive list of included features --> &featurelist;
Modified: docs/trunk/referenceGuide/en/modules/installation.xml
===================================================================
--- docs/trunk/referenceGuide/en/modules/installation.xml 2006-10-13 18:44:54 UTC (rev 5446)
+++ docs/trunk/referenceGuide/en/modules/installation.xml 2006-10-13 18:58:37 UTC (rev 5447)
@@ -552,7 +552,7 @@
to view JBoss Portal.
<mediaobject>
<imageobject>
- <imagedata align="center" valign="middle" fileref="images/setup/inst_localhost.gif"/>
+ <imagedata align="center" valign="middle" fileref="images/setup/inst_localhost.jpg"/>
</imageobject>
</mediaobject>
</para>
Modified: docs/trunk/referenceGuide/en/modules/overview.xml
===================================================================
--- docs/trunk/referenceGuide/en/modules/overview.xml 2006-10-13 18:44:54 UTC (rev 5446)
+++ docs/trunk/referenceGuide/en/modules/overview.xml 2006-10-13 18:58:37 UTC (rev 5447)
@@ -2,7 +2,7 @@
<title>JBoss Portal - Overview</title>
<para>
<imageobject>
- <imagedata fileref="images/setup/default_ss.gif" format="gif" align="center"
+ <imagedata fileref="images/setup/default_ss.jpg" format="jpg" align="center"
valign="middle"/>
</imageobject>
</para>
@@ -12,18 +12,21 @@
simplify access to information by providing a single source of interaction with corporate
information. Although today?s packaged portal frameworks help enterprises launch portals more
quickly, only JBoss Portal can deliver the benefits of a zero-cost open source license
- combined with a flexible and scalable underlying platform.</para>
+ combined with a flexible and scalable underlying platform.
+ </para>
<para>JBoss Portal provides an open source and standards-based environment for hosting and
serving a portal's Web interface, publishing and managing its content, and customizing its
experience. It is entirely standards-based and supports the JSR-168 portlet specification,
which allows you to easily plug-in standards-compliant portlets to meet your specific portal
needs. JBoss Portal is available through the business-friendly
<ulink
- url="http://www.jboss.com/company/aboutopensource">LGPL</ulink>
+ url="http://www.jboss.com/company/aboutopensource">LGPL
+ </ulink>
open source license and is
supported by
<ulink url="http://www.jboss.com/services/index">JBoss Inc. Professional Support
- and Consulting</ulink>
+ and Consulting
+ </ulink>
. JBoss support services are available to assist you in designing,
developing, deploying, and ultimately managing your portal environment. JBoss Portal is
currently developed by JBoss, Inc. developers, Novell developers, and community contributors.
@@ -32,7 +35,8 @@
wide range of features including standard portlets, single sign-on, clustering and
internationalization. Portal themes and layouts are configurable. Fine-grained security
administration down to portlet permissions rounds out the security model. JBoss Portal
- includes a rich content management system and message board support.</para>
+ includes a rich content management system and message board support.
+ </para>
<para>
<emphasis role="bold">JBoss Portal Resources:</emphasis>
<orderedlist>
@@ -44,17 +48,20 @@
<listitem>
<para>Forums:
<ulink
- url="http://www.jboss.org/index.html?module=bb&op=viewforum&f=215"
- >User</ulink>
+ url="http://www.jboss.org/index.html?module=bb&op=viewforum&f=215"
+ >User
+ </ulink>
|
<ulink
- url="http://www.jboss.org/index.html?module=bb&op=viewforum&f=205"
- >Developer</ulink>
+ url="http://www.jboss.org/index.html?module=bb&op=viewforum&f=205"
+ >Developer
+ </ulink>
|
<ulink url="http://jboss.org/index.html?module=bb&op=viewforum&f=232">WSRP</ulink>
|
<ulink url="http://jboss.org/index.html?module=bb&op=viewforum&f=239">Eclipse Portlet
- Plugin</ulink>
+ Plugin
+ </ulink>
</para>
</listitem>
<listitem>
@@ -70,13 +77,15 @@
<listitem>
<para>
<ulink
- url="http://jira.jboss.com/jira/browse/JBPORTAL?report=com.atlassian.jira.plugin.system.project:roadmap-panel"
- >Our Roadmap</ulink>
+ url="http://jira.jboss.com/jira/browse/JBPORTAL?report=com.atlassian.jira.plugin.system.project:roadmap-panel"
+ >Our Roadmap
+ </ulink>
</para>
</listitem>
</orderedlist>
</para>
<para>The JBoss Portal team encourages you to use this guide to install and configure JBoss
Portal. If you encounter any configuration issues or simply want to take part in our
- community, we would love to hear from you in our forums.</para>
+ community, we would love to hear from you in our forums.
+ </para>
</preface>
Modified: docs/trunk/referenceGuide/en/modules/supported.xml
===================================================================
--- docs/trunk/referenceGuide/en/modules/supported.xml 2006-10-13 18:44:54 UTC (rev 5446)
+++ docs/trunk/referenceGuide/en/modules/supported.xml 2006-10-13 18:58:37 UTC (rev 5447)
@@ -38,7 +38,7 @@
<para>JBoss Portal only works with JBoss Application Server.</para>
<warning>
<para>Currently we recommend using JBoss AS 4.0.4.GA, or greater. Previous versions of
- JBoss Application Server are not supported with JBoss Portal 2.4</para>
+ JBoss Application Server are not supported with this version of JBoss Portal</para>
</warning>
</sect1>
<sect1 id="supportedversions-db">
Modified: docs/trunk/referenceGuide/en/modules/themeStyleGuide.xml
===================================================================
--- docs/trunk/referenceGuide/en/modules/themeStyleGuide.xml 2006-10-13 18:44:54 UTC (rev 5446)
+++ docs/trunk/referenceGuide/en/modules/themeStyleGuide.xml 2006-10-13 18:58:37 UTC (rev 5447)
@@ -1,1547 +1,1580 @@
<preface id="themeStyleGuide">
<title>JBoss Portal - Theme Style Guide (based on the Industrial theme)</title>
- <sect1>
- <title>Overview</title>
- <para>
- This document outlines the different selectors used to handle the layout and look/feel of the Industrial theme
- included in the JBoss portal.
+ <sect1>
+ <title>Overview</title>
+ <para>
+ This document outlines the different selectors used to handle the layout and look/feel of the Industrial theme
+ included in the JBoss portal.
- <itemizedlist>
- <para>A couple of things to know about the theming approach discussed below:</para>
- <listitem>Main premise behind this approach was to provide a clean separation between the business and
+ <itemizedlist>
+ <para>A couple of things to know about the theming approach discussed below:</para>
+ <listitem>Main premise behind this approach was to provide a clean separation between the business and
presentation layer of the portal. As we go through each selector and explain the relation to the visual
- presentation on the page, this will become more apparent. </listitem>
- <listitem>The flexibility of the selectors used in the theme stylesheet allow a designer to very easily
+ presentation on the page, this will become more apparent.
+ </listitem>
+ <listitem>The flexibility of the selectors used in the theme stylesheet allow a designer to very easily
customize the visual aspects of the portal, thereby taking the responsibility off of the developers hands
through allowing the designer to quickly achieve the desired effect w/out the need to dive down into code
and/or having to deploy changes to the portal. This saves time and allows both developers and designers
- to focus on what they do best.</listitem>
- <listitem>This theme incorporates a liquid layout approach which allows elements on a page to expand/contract
+ to focus on what they do best.
+ </listitem>
+ <listitem>This theme incorporates a liquid layout approach which allows elements on a page to
+ expand/contract
based on screen resolution and provides a consistent look across varying display settings. However, the
stylesheet is adaptable to facilitate a fixed layout and/or combination approach where elements are pixel
- based and completely independent of viewport. </listitem>
- <listitem>The pieces that make up the portal theme consist of at least one stylesheet and any associated images.
- Having a consolidated set of files to control the portal look and feel allows administrators to effortlessly
+ based and completely independent of viewport.
+ </listitem>
+ <listitem>The pieces that make up the portal theme consist of at least one stylesheet and any associated
+ images.
+ Having a consolidated set of files to control the portal look and feel allows administrators to
+ effortlessly
swap themes on the fly. In addition, this clean separation of the pieces that make up a specific theme
will enable sharing and collaboration of different themes by those looking to get involved or contribute
- to the open source initiative. </listitem>
- </itemizedlist>
- </para>
- </sect1>
+ to the open source initiative.
+ </listitem>
+ </itemizedlist>
+ </para>
+ </sect1>
- <sect1>
- <title>Main Screen Shot</title>
- <para>
- Screen shot using color outline of main ID selectors used to control presentation and layout:
- <para>
+ <sect1>
+ <title>Main Screen Shot</title>
+ <para>
+ Screen shot using color outline of main ID selectors used to control presentation and layout:
+ <para>
<imageobject>
- <imagedata fileref="images/themeguide/selector-outline.gif" format="gif" />
+ <imagedata fileref="images/themeguide/selector-outline.gif" format="gif"/>
</imageobject>
- </para>
- <para>
+ </para>
+ <para>
<table align="center">
- <title>Key</title>
- <tr>
- <th align="left">Color Outline</th><th align="left">Corresponding Selector</th>
- </tr>
- <tr>
- <td align="left">Red Border</td><td align="left">portal-container</td>
- </tr>
- <tr>
- <td align="left">Yellow Border</td><td align="left">header-container</td>
- </tr>
- <tr>
- <td align="left">Orange Border</td><td align="left">content-container</td>
- </tr>
- <tr>
- <td align="left">Blue Border</td><td align="left">regionA / regionB</td>
- </tr>
- <tr>
- <td align="left">Green Border</td><td align="left">portlet-container</td>
- </tr>
+ <title>Key</title>
+ <tr>
+ <th align="left">Color Outline</th>
+ <th align="left">Corresponding Selector</th>
+ </tr>
+ <tr>
+ <td align="left">Red Border</td>
+ <td align="left">portal-container</td>
+ </tr>
+ <tr>
+ <td align="left">Yellow Border</td>
+ <td align="left">header-container</td>
+ </tr>
+ <tr>
+ <td align="left">Orange Border</td>
+ <td align="left">content-container</td>
+ </tr>
+ <tr>
+ <td align="left">Blue Border</td>
+ <td align="left">regionA / regionB</td>
+ </tr>
+ <tr>
+ <td align="left">Green Border</td>
+ <td align="left">portlet-container</td>
+ </tr>
</table>
+ </para>
+ </para>
+ </sect1>
+
+ <sect1>
+ <title>List of CSS Selectors</title>
+ <para>
+ <itemizedlist>
+ <para>The following is a list of the selectors used in the theme stylesheet, including a brief
+ explanation of how each selector is used in the portal:
</para>
- </para>
- </sect1>
- <sect1>
- <title>List of CSS Selectors</title>
- <para>
- <itemizedlist>
- <para>The following is a list of the selectors used in the theme stylesheet, including a brief
- explanation of how each selector is used in the portal:</para>
+ <listitem>
+ <para>
+ Portal Body Selector
- <listitem>
- <para>
- Portal Body Selector
+ <programlisting>
+ #body {
+ background-image: url(images/portal_background.gif);
+ margin: 0px;
+ padding: 0px;
+ }
+ </programlisting>
- <programlisting>
- #body {
- background-image: url(images/portal_background.gif);
- margin: 0px;
- padding: 0px;
- }
- </programlisting>
+ Usage:
+ This selector controls the background of the page, and can be modified to set a base font-family,
+ layout margin, etc. that will be inherited by all child elements that do not have their own individual
+ style applied. By default, the selector pulls an image background for the page.
+ </para>
+ </listitem>
- Usage:
- This selector controls the background of the page, and can be modified to set a base font-family,
- layout margin, etc. that will be inherited by all child elements that do not have their own individual
- style applied. By default, the selector pulls an image background for the page.
- </para>
- </listitem>
+ <listitem>
+ <para>
+ Portal Header Selectors
- <listitem>
- <para>
- Portal Header Selectors
+ <programlisting>
+ #spacer {
+ width: 1024px;
+ line-height: 0px;
+ font-size: 0px;
+ height: 0px;
+ }
+ </programlisting>
- <programlisting>
- #spacer {
- width: 1024px;
- line-height: 0px;
- font-size: 0px;
- height: 0px;
- }
- </programlisting>
+ Usage:
+ Spacer div used to keep header at certain width regardless of display size. This is done to
+ avoid overlapping of tab navigation in header. To account for different display sizes, this
+ selector can be modified to force a horizontal scroll in the browser which eliminates any issue
+ with overlapping elements in the header.
- Usage:
- Spacer div used to keep header at certain width regardless of display size. This is done to
- avoid overlapping of tab navigation in header. To account for different display sizes, this
- selector can be modified to force a horizontal scroll in the browser which eliminates any issue
- with overlapping elements in the header.
+ <programlisting>
+ #header-container {
+ background-image: url(images/portal_background.gif);
+ background-repeat: repeat-y;
+ height: 100%;
+ min-width: 1000px;
+ width: 100%;
+ /* test to reposition header on page
+ position: absolute;
+ bottom: 5px;*/
+ }
+ </programlisting>
- <programlisting>
- #header-container {
- background-image: url(images/portal_background.gif);
- background-repeat: repeat-y;
- height: 100%;
- min-width: 1000px;
- width: 100%;
- /* test to reposition header on page
- position: absolute;
- bottom: 5px;*/
- }
- </programlisting>
+ Usage:
+ Wrapper selector used to control the position of the header on the page (see yellow border in screen
+ shot). This selector is applied as an ID on the table used to structure the header. You can adjust
+ the attributes to reposition the header location on the page and/or create margin space on the top,
+ right, bottom and left sides of the header.
- Usage:
- Wrapper selector used to control the position of the header on the page (see yellow border in screen
- shot). This selector is applied as an ID on the table used to structure the header. You can adjust
- the attributes to reposition the header location on the page and/or create margin space on the top,
- right, bottom and left sides of the header.
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/header.gif" format="gif"/>
+ </imageobject>
+ </para>
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/header.gif" format="gif" />
- </imageobject>
- </para>
+ <programlisting>
+ #header {
+ background-image: url(images/header.gif);
+ background-repeat: repeat-x;
+ height: 100px;
+ padding: 0px;
+ /*margin: 0 25% 0 25%;*/
+ }
+ </programlisting>
- <programlisting>
- #header {
- background-image: url(images/header.gif);
- background-repeat: repeat-x;
- height: 100px;
- padding: 0px;
- /*margin: 0 25% 0 25%;*/
- }
- </programlisting>
+ Usage:
+ This selector applies the header background image in the portal. It can be adjusted to accommodate a
+ header background of a certain width/height or, as it currently does, repeat the header graphic so
+ that it tiles across the header portion of the page.
- Usage:
- This selector applies the header background image in the portal. It can be adjusted to accommodate a
- header background of a certain width/height or, as it currently does, repeat the header graphic so
- that it tiles across the header portion of the page.
+ <programlisting>
+ #logoName {
+ background-image: url(images/JBossLogo.gif);
+ background-repeat: no-repeat;
+ width: 187px;
+ height: 35px;
+ position: absolute;
+ left: 15px;
+ top: 16px;
+ z-index: 2;
+ }
+ </programlisting>
- <programlisting>
- #logoName {
- background-image: url(images/JBossLogo.gif);
- background-repeat: no-repeat;
- width: 187px;
- height: 35px;
- position: absolute;
- left: 15px;
- top: 16px;
- z-index: 2;
- }
- </programlisting>
+ Usage:
+ Logo selector which is used to brand the header with a specific, customized logo. The style is applied
+ as an ID on an absolutely positioned DIV element which enables it to be moved to any location on the
+ page, and allows it to be adjusted to accommodate a logo of any set width/height.
+ </para>
+ </listitem>
- Usage:
- Logo selector which is used to brand the header with a specific, customized logo. The style is applied
- as an ID on an absolutely positioned DIV element which enables it to be moved to any location on the
- page, and allows it to be adjusted to accommodate a logo of any set width/height.
- </para>
- </listitem>
+ <listitem>
+ <para>
+ Portal Layout Region Selectors
- <listitem>
- <para>
- Portal Layout Region Selectors
+ <programlisting>
+ #portal-container {
+ /*width: 100%;*/
- <programlisting>
- #portal-container {
- /*width: 100%;*/
+ /*IE specific approach to preserve min-width for portlet regions */
+ padding: 0 350px 0 350px;
+ }
+ </programlisting>
- /*IE specific approach to preserve min-width for portlet regions */
- padding: 0 350px 0 350px;
- }
- </programlisting>
+ Usage:
+ Wrapper for entire portal which starts/ends after/before the BODY tag (see red border in screen shot).
+ The padding attribute for this selector is used to preserve a minimum width setting for the portlet
+ regions (discussed below). Similar to body selector, this style can modified to create margin or
+ padding space on the top, right, bottom and left sections of the page. It provides the design
+ capability to accommodate most layouts (e.g. a centered look such as the phalanx theme where
+ there is some spacing around the content of the portal, or a full width look as illustrated in
+ the Industrial theme).
- Usage:
- Wrapper for entire portal which starts/ends after/before the BODY tag (see red border in screen shot).
- The padding attribute for this selector is used to preserve a minimum width setting for the portlet
- regions (discussed below). Similar to body selector, this style can modified to create margin or
- padding space on the top, right, bottom and left sections of the page. It provides the design
- capability to accommodate most layouts (e.g. a centered look such as the phalanx theme where
- there is some spacing around the content of the portal, or a full width look as illustrated in
- the Industrial theme).
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/region-selectors.gif" format="gif"/>
+ </imageobject>
+ </para>
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/region-selectors.gif" format="gif" />
- </imageobject>
- </para>
+ <programlisting>
+ /* min width for IE */
+ #expander {
+ margin: 0 -350px 0 -350px;
+ position: relative;
+ }
- <programlisting>
- /* min width for IE */
- #expander {
- margin: 0 -350px 0 -350px;
- position: relative;
- }
+ /* min width for IE */
+ #sizer {
+ width: 100%;
+ }
- /* min width for IE */
- #sizer {
- width: 100%;
- }
+ /* IE min width \*/
+ * html #portal-container,
+ * html #sizer,
+ * html #expander { height: 0; }
+ </programlisting>
- /* IE min width \*/
- * html #portal-container,
- * html #sizer,
- * html #expander { height: 0; }
- </programlisting>
+ Usage:
+ These selectors are used in conjunction with the above, portal-container, selector to preserve a
+ minimum width setting for the portlet regions. This was implemented to maintain a consistent
+ look across different browsers.
- Usage:
- These selectors are used in conjunction with the above, portal-container, selector to preserve a
- minimum width setting for the portlet regions. This was implemented to maintain a consistent
- look across different browsers.
+ <programlisting>
+ /*table that contains all regions. does not include header*/
+ #content-container {
+ height: 100%;
+ text-align:left;
+ max-width: 1600px;
+ min-width: 800px;
+ }
+ </programlisting>
- <programlisting>
- /*table that contains all regions. does not include header*/
- #content-container {
- height: 100%;
- text-align:left;
- max-width: 1600px;
- min-width: 800px;
- }
- </programlisting>
+ Usage:
+ Wrapper that contains all regions in portal with the exception of the header (see orange border
+ in screen shot). Its attributes can be adjusted to create margin space on page, as well as
+ control positioning of the area of the page below the header.
- Usage:
- Wrapper that contains all regions in portal with the exception of the header (see orange border
- in screen shot). Its attributes can be adjusted to create margin space on page, as well as
- control positioning of the area of the page below the header.
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/content-container.gif" format="gif"/>
+ </imageobject>
+ </para>
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/content-container.gif" format="gif" />
- </imageobject>
- </para>
+ <programlisting>
+ #regionA {
+ /* test to swap columns with regionB...
+ float: right; */
- <programlisting>
- #regionA {
- /* test to swap columns with regionB...
- float: right; */
+ width: 30%;
+ float: left;
+ margin: 0px;
+ padding: 0px;
+ min-width: 250px;
+ }
+ </programlisting>
- width: 30%;
- float: left;
- margin: 0px;
- padding: 0px;
- min-width: 250px;
- }
- </programlisting>
+ Usage:
+ First portlet region located within the content-container (see blue border in screen shot). This
+ selector controls the width of the region as well as its location on the page. Designers can
+ very easily reposition this region in the portal (e.g. swap left regionA with right regionB,
+ etc.) by adjusting the attributes of this selector.
- Usage:
- First portlet region located within the content-container (see blue border in screen shot). This
- selector controls the width of the region as well as its location on the page. Designers can
- very easily reposition this region in the portal (e.g. swap left regionA with right regionB,
- etc.) by adjusting the attributes of this selector.
+ <programlisting>
+ #regionB {
+ /*test to swap columns with regionA...
+ margin: 0 30% 0 0; */
- <programlisting>
- #regionB {
- /*test to swap columns with regionA...
- margin: 0 30% 0 0; */
+ /* two column layout*/
+ margin: 0 0 0 30%;
+ padding: 0;
+ width: 69%;
- /* two column layout*/
- margin: 0 0 0 30%;
- padding: 0;
- width: 69%;
+ /* test to add 3rd region in layout...
+ width: 40%;
+ float: left;*/
+ }
+ </programlisting>
- /* test to add 3rd region in layout...
- width: 40%;
- float: left;*/
- }
- </programlisting>
+ Usage:
+ Second portlet region located within the content-container (see blue border in screen shot).
+ Similar to regionA, this selector controls the width of the region as well as its location
+ on the page.
- Usage:
- Second portlet region located within the content-container (see blue border in screen shot).
- Similar to regionA, this selector controls the width of the region as well as its location
- on the page.
+ <programlisting>
+ #regionC {
+ /* inclusion of 3rd region - comment out for 2 region testing
+ padding: 0px;
+ width: 27%;
+ float: left;*/
+ display: none;
+ }
+ </programlisting>
- <programlisting>
- #regionC {
- /* inclusion of 3rd region - comment out for 2 region testing
- padding: 0px;
- width: 27%;
- float: left;*/
- display: none;
- }
- </programlisting>
+ Usage:
+ Third portlet region located within the content-container (please refer to blue border in screen
+ shot representing regionA and regionB for an example). Used for 3 column layout. Similar to
+ regionA and regionB, this selector controls the width of the region as well as its location
+ on the page.
- Usage:
- Third portlet region located within the content-container (please refer to blue border in screen
- shot representing regionA and regionB for an example). Used for 3 column layout. Similar to
- regionA and regionB, this selector controls the width of the region as well as its location
- on the page.
+ <programlisting>
+ /* give a maximized portlet more space */
+ #regionMaximized {
+ width: 100%;
+ float: left;
+ margin: 0px;
+ padding: 0px;
+ min-width: 400px;
+ }
+ </programlisting>
- <programlisting>
- /* give a maximized portlet more space */
- #regionMaximized {
- width: 100%;
- float: left;
- margin: 0px;
- padding: 0px;
- min-width: 400px;
- }
- </programlisting>
+ Usage:
+ Portlet region located within the content-container (please refer to blue border in screen
+ shot representing regionA and regionB for an example). Used for a one column layout to allow one
+ portlet to take over the entire page. Similar to regionA, regionB, and regionB, this selector
+ controls the width of the region as well as its location on the page.
- Usage:
- Portlet region located within the content-container (please refer to blue border in screen
- shot representing regionA and regionB for an example). Used for a one column layout to allow one
- portlet to take over the entire page. Similar to regionA, regionB, and regionB, this selector
- controls the width of the region as well as its location on the page.
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/regions.gif" format="gif"/>
+ </imageobject>
+ </para>
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/regions.gif" format="gif" />
- </imageobject>
- </para>
+ <programlisting>
+ hr.cleaner {
+ clear:both;
+ height:1px;
+ margin: -1px 0 0 0;
+ padding:0;
+ border:none;
+ visibility: hidden;
+ }
+ </programlisting>
- <programlisting>
- hr.cleaner {
- clear:both;
- height:1px;
- margin: -1px 0 0 0;
- padding:0;
- border:none;
- visibility: hidden;
- }
- </programlisting>
+ Usage:
+ Used to clear floats in regionA, regionB and regionC DIVs so that footer spans bottom of page.
- Usage:
- Used to clear floats in regionA, regionB and regionC DIVs so that footer spans bottom of page.
+ <programlisting>
+ #footer-container {
+ margin: 30px 25% 0 25%;
+ text-align: center;
+ }
+ </programlisting>
- <programlisting>
- #footer-container {
- margin: 30px 25% 0 25%;
- text-align: center;
- }
- </programlisting>
+ Usage:
+ Footer region located towards the bottom of the content-container (see above screen shot). This
+ region spans the entire width of the page, but can be adjusted (just like regionA, regionB
+ and regionC) to take on a certain position and width/height in the layout.
- Usage:
- Footer region located towards the bottom of the content-container (see above screen shot). This
- region spans the entire width of the page, but can be adjusted (just like regionA, regionB
- and regionC) to take on a certain position and width/height in the layout.
+ <programlisting>
+ #navigation-container {}
+ </programlisting>
- <programlisting>
- #navigation-container {}
- </programlisting>
+ Usage:
+ Unused at this time.
- Usage:
- Unused at this time.
+ <programlisting>
+ #sub-navigation-container {}
+ </programlisting>
- <programlisting>
- #sub-navigation-container {}
- </programlisting>
+ Usage:
+ Unused at this time.
+ </para>
+ </listitem>
- Usage:
- Unused at this time.
- </para>
- </listitem>
+ <listitem>
+ <para>
+ Tab Navigation Selectors for Header
- <listitem>
- <para>
- Tab Navigation Selectors for Header
+ <programlisting>
+ UL#tabsHeader {
+ margin: 0;
+ padding-left: 300px;
+ min-width: 550px;
+ }
+ </programlisting>
- <programlisting>
- UL#tabsHeader {
- margin: 0;
- padding-left: 300px;
- min-width: 550px;
- }
- </programlisting>
+ Usage:
+ Used to provide position (through padding attribute) of tabbed navigational items in header. A
+ padding-left of 300px gives space for the left hand logo area and can be adjusted as needed to
+ set the desired location for the navigation.
- Usage:
- Used to provide position (through padding attribute) of tabbed navigational items in header. A
- padding-left of 300px gives space for the left hand logo area and can be adjusted as needed to
- set the desired location for the navigation.
+ <programlisting>
+ UL#tabsHeader li {
+ list-style: none;
+ float: left;
+ margin-left: 0px;
+ margin-top: 74px;
+ margin-right: 0px;
+ line-height: 24px;
+ padding: 0px;
+ border-left: 1px solid #72828E;
+ }
+ </programlisting>
- <programlisting>
- UL#tabsHeader li {
- list-style: none;
- float: left;
- margin-left: 0px;
- margin-top: 74px;
- margin-right: 0px;
- line-height: 24px;
- padding: 0px;
- border-left: 1px solid #72828E;
- }
- </programlisting>
+ Usage:
+ Selector used to style list items as horizontal navigation and to set the spacing and position
+ of each nav item that's available.
- Usage:
- Selector used to style list items as horizontal navigation and to set the spacing and position
- of each nav item that's available.
+ <programlisting>
+ UL#tabsHeader li:hover {
+ background-image: url(images/highlightedTab.gif);
+ background-repeat: repeat-x;
+ }
+ </programlisting>
- <programlisting>
- UL#tabsHeader li:hover {
- background-image: url(images/highlightedTab.gif);
- background-repeat: repeat-x;
- }
- </programlisting>
+ Usage:
+ Used to provide hover pseudo class on navigation items so that the tab background will change
+ upon mouseover. Note that currently IE only supports the hover pseudo class on links, so this
+ selector will only affect non-IE browsers (e.g. FireFox, etc.).
- Usage:
- Used to provide hover pseudo class on navigation items so that the tab background will change
- upon mouseover. Note that currently IE only supports the hover pseudo class on links, so this
- selector will only affect non-IE browsers (e.g. FireFox, etc.).
+ <programlisting>
+ UL#tabsHeader li.hoverOn {
+ background-image: url(images/highlightedTab.gif);
+ background-repeat: repeat-x;
+ }
- <programlisting>
- UL#tabsHeader li.hoverOn {
- background-image: url(images/highlightedTab.gif);
- background-repeat: repeat-x;
- }
+ UL#tabsHeader li.hoverOff {
+ background-image:none;
+ }
+ </programlisting>
- UL#tabsHeader li.hoverOff {
- background-image:none;
- }
- </programlisting>
-
- Usage:
- These two selectors are implemented to account for the fact that IE cannot understand the use
- of a pseudo class on the LI element. They provide the same mouseover effect as the
- “UL#tabsHeader li:hover� selector when hovering the navigation item in IE, and are used in
- combination with onmouseover/onmouseout event handlers in the header navigation:
- <programlisting>
- <![CDATA[
+ Usage:
+ These two selectors are implemented to account for the fact that IE cannot understand the use
+ of a pseudo class on the LI element. They provide the same mouseover effect as the
+ “UL#tabsHeader li:hover�? selector when hovering the navigation item in IE, and are used in
+ combination with onmouseover/onmouseout event handlers in the header navigation:
+ <programlisting>
+ <![CDATA[
<li onmouseover="this.className='hoverOn'" onmouseout="this.className='hoverOff'">
<a href="#">Tab Nav</a>
</li>
]]></programlisting>
- <programlisting>
- UL#tabsHeader a {
- display: block;
- float: left;
- padding: 4px 15px 5px 15px;
- text-decoration: none;
- font: 13px/normal Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- background: 100% 0 no-repeat;
- color: #596874;
- }
- </programlisting>
+ <programlisting>
+ UL#tabsHeader a {
+ display: block;
+ float: left;
+ padding: 4px 15px 5px 15px;
+ text-decoration: none;
+ font: 13px/normal Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ background: 100% 0 no-repeat;
+ color: #596874;
+ }
+ </programlisting>
- Usage:
- This selector styles the navigational links, indicating padding surrounding the link as well as
- font family, color and text-decoration.
+ Usage:
+ This selector styles the navigational links, indicating padding surrounding the link as well as
+ font family, color and text-decoration.
- <programlisting>
- UL#tabsHeader a:hover {
- text-decoration: underline;
- }
- </programlisting>
+ <programlisting>
+ UL#tabsHeader a:hover {
+ text-decoration: underline;
+ }
+ </programlisting>
- Usage:
- Used to underline navigational links when hovering with mouse. Unlike the li:hover pseudo class,
- IE does support the hover effect on links, so there is no need for a separate set of selectors
- to deal with this effect.
+ Usage:
+ Used to underline navigational links when hovering with mouse. Unlike the li:hover pseudo class,
+ IE does support the hover effect on links, so there is no need for a separate set of selectors
+ to deal with this effect.
- <programlisting>
- UL#tabsHeader #current, UL#tabsHeader #current a {
- font: 13px/normal Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-weight: 600;
- color: #EBEAEA;
- background-image: url(images/activeTab.gif);
- background-repeat: repeat-x;
- border-right: 0px;
- border-left: 0px;
- }
- </programlisting>
+ <programlisting>
+ UL#tabsHeader #current, UL#tabsHeader #current a {
+ font: 13px/normal Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-weight: 600;
+ color: #EBEAEA;
+ background-image: url(images/activeTab.gif);
+ background-repeat: repeat-x;
+ border-right: 0px;
+ border-left: 0px;
+ }
+ </programlisting>
- Usage:
- This selector is set on the current/selected navigation item to style both the background of
- the tab as well as font properties such as color and weight. Example:
- <programlisting>
- <![CDATA[
+ Usage:
+ This selector is set on the current/selected navigation item to style both the background of
+ the tab as well as font properties such as color and weight. Example:
+ <programlisting>
+ <![CDATA[
<li id="current" onmouseover="this.className='hoverOn'" onmouseout="this.className='hoverOff'">
<a href="#">Tab Nav</a>
</li>
]]></programlisting>
- <programlisting>
- /* backslash for IE5-Mac \*/
- UL#tabsHeader a {float: none;} /* End Mac Hack */
- html>body UL#tabsHeader a {width: auto;} /* fixes IE issues */
- </programlisting>
+ <programlisting>
+ /* backslash for IE5-Mac \*/
+ UL#tabsHeader a {float: none;} /* End Mac Hack */
+ html>body UL#tabsHeader a {width: auto;} /* fixes IE issues */
+ </programlisting>
- Usage:
- Also known in the industry as an example of the “Holly Hack�, the above is added to the stylesheet
- to handle certain buggy issues with IE. This section of the stylesheet should be left alone as
- subsequent changes can effect the way things behave in IE.
+ Usage:
+ Also known in the industry as an example of the “Holly Hack�?, the above is added to the stylesheet
+ to handle certain buggy issues with IE. This section of the stylesheet should be left alone as
+ subsequent changes can effect the way things behave in IE.
- <programlisting>
- li.currentTabBackground {
- background: #fff;
- }
+ <programlisting>
+ li.currentTabBackground {
+ background: #fff;
+ }
- li.currentTabBackgroundSubNav {
- background: #eeeeef;
- }
- </programlisting>
+ li.currentTabBackgroundSubNav {
+ background: #eeeeef;
+ }
+ </programlisting>
- Usage:
- The above two selectors are not currently in use. Included to account for future changes to the
- navigation where multiple tiers/levels might be incorporated.
- </para>
- </listitem>
+ Usage:
+ The above two selectors are not currently in use. Included to account for future changes to the
+ navigation where multiple tiers/levels might be incorporated.
+ </para>
+ </listitem>
- <listitem>
- <para>
- Portlet Container Window Selectors
+ <listitem>
+ <para>
+ Portlet Container Window Selectors
- <programlisting>
- .portlet-container {
- padding: 10px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-container {
+ padding: 10px;
+ }
+ </programlisting>
- Usage:
- Wrapper that surrounds the portlet windows (see green border in screen shot). Currently, this
- selector is used to create space (padding) between the portlets displayed in each particular region.
+ Usage:
+ Wrapper that surrounds the portlet windows (see green border in screen shot). Currently, this
+ selector is used to create space (padding) between the portlets displayed in each particular region.
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/portlet-container.gif" format="gif" />
- </imageobject>
- </para>
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/portlet-container.gif" format="gif"/>
+ </imageobject>
+ </para>
- <programlisting>
- .portlet-titlebar-title {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 11px;
- font-weight: 500;
- color: #596874;
- white-space: nowrap;
- line-height: 100%;
- float: left;
- text-indent: 15px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-titlebar-title {
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 11px;
+ font-weight: 500;
+ color: #596874;
+ white-space: nowrap;
+ line-height: 100%;
+ float: left;
+ text-indent: 15px;
+ }
+ </programlisting>
- Usage:
- Class used to style the title of each portlet window. Attributes of this selector set font
- properties, indentation and position of title.
+ Usage:
+ Class used to style the title of each portlet window. Attributes of this selector set font
+ properties, indentation and position of title.
- <programlisting>
- .portlet-titlebar-decoration {
- background-image: url(images/portlet-win-decoration.gif);
- background-repeat: no-repeat;
- height: 11px;
- width: 11px;
- float: left;
- position: relative;
- top: 6px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-titlebar-decoration {
+ background-image: url(images/portlet-win-decoration.gif);
+ background-repeat: no-repeat;
+ height: 11px;
+ width: 11px;
+ float: left;
+ position: relative;
+ top: 6px;
+ }
+ </programlisting>
- Usage:
- Used to display top left portlet window decoration (e.g. sphere icon in Industrial theme).
- Attributes for this selector set position and dimensions of this decoration.
+ Usage:
+ Used to display top left portlet window decoration (e.g. sphere icon in Industrial theme).
+ Attributes for this selector set position and dimensions of this decoration.
- <programlisting>
- .portlet-mode-container {
- float: right;
- }
- </programlisting>
+ <programlisting>
+ .portlet-mode-container {
+ float: right;
+ }
+ </programlisting>
- Usage:
- Wrapper that contains the portlet window modes that display in the top right section of the
- portlet windows.
+ Usage:
+ Wrapper that contains the portlet window modes that display in the top right section of the
+ portlet windows.
- <programlisting>
- .portlet-titlebar-left {
- background-image: url(images/portlet-top-left.gif);
- background-repeat: no-repeat;
- width: 9px;
- height: 33px;
- background-position: right;
- min-width: 9px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-titlebar-left {
+ background-image: url(images/portlet-top-left.gif);
+ background-repeat: no-repeat;
+ width: 9px;
+ height: 33px;
+ background-position: right;
+ min-width: 9px;
+ }
+ </programlisting>
- Usage:
- Used to style the top left corner of the portlet window. Each portlet window consists of one
- table that has 3 columns and 3 rows. This selector styles the first column (TD) in the first
- row (TR).
+ Usage:
+ Used to style the top left corner of the portlet window. Each portlet window consists of one
+ table that has 3 columns and 3 rows. This selector styles the first column (TD) in the first
+ row (TR).
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/portlet-titlebar-left.gif" format="gif" />
- </imageobject>
- </para>
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/portlet-titlebar-left.gif" format="gif"/>
+ </imageobject>
+ </para>
- <programlisting>
- .portlet-titlebar-center {
- background-image: url(images/portlet-top-middle.gif);
- background-repeat: repeat-x;
- height: 33px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-titlebar-center {
+ background-image: url(images/portlet-top-middle.gif);
+ background-repeat: repeat-x;
+ height: 33px;
+ }
+ </programlisting>
- Usage:
- Used to style the center section of the portlet title bar. Each portlet window consists of one
- table that has 3 columns and 3 rows. This selector styles the second column (TD) in the first
- row (TR).
+ Usage:
+ Used to style the center section of the portlet title bar. Each portlet window consists of one
+ table that has 3 columns and 3 rows. This selector styles the second column (TD) in the first
+ row (TR).
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/portlet-titlebar-center.gif" format="gif" />
- </imageobject>
- </para>
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/portlet-titlebar-center.gif" format="gif"/>
+ </imageobject>
+ </para>
- <programlisting>
- .portlet-titlebar-right {
- background-image: url(images/portlet-top-right.gif);
- background-repeat: no-repeat;
- width: 10px;
- height: 33px;
- min-width: 10px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-titlebar-right {
+ background-image: url(images/portlet-top-right.gif);
+ background-repeat: no-repeat;
+ width: 10px;
+ height: 33px;
+ min-width: 10px;
+ }
+ </programlisting>
- Usage:
- Used to style the top right corner of the portlet window. Each portlet window consists of one
- table that has 3 columns and 3 rows. This selector styles the third column (TD) in the first row (TR).
+ Usage:
+ Used to style the top right corner of the portlet window. Each portlet window consists of one
+ table that has 3 columns and 3 rows. This selector styles the third column (TD) in the first row (TR).
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/portlet-titlebar-right.gif" format="gif" />
- </imageobject>
- </para>
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/portlet-titlebar-right.gif" format="gif"/>
+ </imageobject>
+ </para>
- <programlisting>
- .portlet-content-left {
- background-image: url(images/portlet-left-vertical.gif);
- height: 100%;
- background-repeat: repeat-y;
- background-position: right;
- width: 9px;
- min-width: 9px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-content-left {
+ background-image: url(images/portlet-left-vertical.gif);
+ height: 100%;
+ background-repeat: repeat-y;
+ background-position: right;
+ width: 9px;
+ min-width: 9px;
+ }
+ </programlisting>
- Usage:
- Used to style the left hand vertical lines that make up the portlet window. Each portlet window
- consists of one table that has 3 columns and 3 rows. This selector styles the first column (TD)
- in the second row (TR).
+ Usage:
+ Used to style the left hand vertical lines that make up the portlet window. Each portlet window
+ consists of one table that has 3 columns and 3 rows. This selector styles the first column (TD)
+ in the second row (TR).
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/portlet-content-left.gif" format="gif" />
- </imageobject>
- </para>
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/portlet-content-left.gif" format="gif"/>
+ </imageobject>
+ </para>
- <programlisting>
- .portlet-content-center {
- background-color: #f7f7f7;
- background-repeat: repeat;
- vertical-align: top;
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 13px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-content-center {
+ background-color: #f7f7f7;
+ background-repeat: repeat;
+ vertical-align: top;
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 13px;
+ }
+ </programlisting>
- Usage:
- Used to style the center, content area where the portlet content is injected into the portlet
- window (see below screen). Attributes for this selector control the positioning of the portlet
- content as well as the background and font properties. Each portlet window consists of one table
- that has 3 columns and 3 rows. This selector styles the second column (TD) in the second row (TR).
+ Usage:
+ Used to style the center, content area where the portlet content is injected into the portlet
+ window (see below screen). Attributes for this selector control the positioning of the portlet
+ content as well as the background and font properties. Each portlet window consists of one table
+ that has 3 columns and 3 rows. This selector styles the second column (TD) in the second row (TR).
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/portlet-content-center.gif" format="gif" />
- </imageobject>
- </para>
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/portlet-content-center.gif" format="gif"/>
+ </imageobject>
+ </para>
- <programlisting>
- .portlet-body {
- background-color: #f7f7f7;
- }
- </programlisting>
+ <programlisting>
+ .portlet-body {
+ background-color: #f7f7f7;
+ }
+ </programlisting>
- Usage:
- An extra selector for controlling the content section of the portlet windows (see below screen).
- This was added to better deal with structuring the content that gets inserted/rendered in the
- portlet windows, specifically if the content is causing display problems in a portlet.
+ Usage:
+ An extra selector for controlling the content section of the portlet windows (see below screen).
+ This was added to better deal with structuring the content that gets inserted/rendered in the
+ portlet windows, specifically if the content is causing display problems in a portlet.
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/portlet-body.gif" format="gif" />
- </imageobject>
- </para>
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/portlet-body.gif" format="gif"/>
+ </imageobject>
+ </para>
- <programlisting>
- .portlet-content-right {
- background-image: url(images/portlet-right-vertical.gif);
- height: 100%;
- background-repeat: repeat-y;
- background-position: left;
- width: 10px;
- min-width: 10px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-content-right {
+ background-image: url(images/portlet-right-vertical.gif);
+ height: 100%;
+ background-repeat: repeat-y;
+ background-position: left;
+ width: 10px;
+ min-width: 10px;
+ }
+ </programlisting>
- Usage:
- Used to style the right hand vertical lines that make up the portlet window. Each portlet
- window consists of one table that has 3 columns and 3 rows. This selector styles the third
- column (TD) in the second row (TR).
+ Usage:
+ Used to style the right hand vertical lines that make up the portlet window. Each portlet
+ window consists of one table that has 3 columns and 3 rows. This selector styles the third
+ column (TD) in the second row (TR).
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/portlet-content-right.gif" format="gif" />
- </imageobject>
- </para>
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/portlet-content-right.gif" format="gif"/>
+ </imageobject>
+ </para>
- <programlisting>
- .portlet-footer-left {
- background-image: url(images/portlet-bottom-left.gif);
- width: 9px;
- height: 9px;
- background-repeat: no-repeat;
- background-position: top right;
- min-width: 9px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-footer-left {
+ background-image: url(images/portlet-bottom-left.gif);
+ width: 9px;
+ height: 9px;
+ background-repeat: no-repeat;
+ background-position: top right;
+ min-width: 9px;
+ }
+ </programlisting>
- Usage:
- Used to style the bottom left corner of the portlet window. Each portlet window consists of one
- table that has 3 columns and 3 rows. This selector styles the first column (TD) in the third row (TR).
+ Usage:
+ Used to style the bottom left corner of the portlet window. Each portlet window consists of one
+ table that has 3 columns and 3 rows. This selector styles the first column (TD) in the third row (TR).
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/portlet-footer-left.gif" format="gif" />
- </imageobject>
- </para>
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/portlet-footer-left.gif" format="gif"/>
+ </imageobject>
+ </para>
- <programlisting>
- .portlet-footer-center {
- background-image: url(images/portlet-bottom-middle.gif);
- height: 14px;
- background-repeat: repeat-x;
- }
- </programlisting>
+ <programlisting>
+ .portlet-footer-center {
+ background-image: url(images/portlet-bottom-middle.gif);
+ height: 14px;
+ background-repeat: repeat-x;
+ }
+ </programlisting>
- Usage:
- Used to style the bottom, center of the portlet window (i.e. the bottom horizontal line in the
- Industrial theme). Each portlet window consists of one table that has 3 columns and 3 rows.
- This selector styles the second column (TD) in the third row (TR).
+ Usage:
+ Used to style the bottom, center of the portlet window (i.e. the bottom horizontal line in the
+ Industrial theme). Each portlet window consists of one table that has 3 columns and 3 rows.
+ This selector styles the second column (TD) in the third row (TR).
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/portlet-footer-center.gif" format="gif" />
- </imageobject>
- </para>
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/portlet-footer-center.gif" format="gif"/>
+ </imageobject>
+ </para>
- <programlisting>
- .portlet-footer-right {
- background-image: url(images/portlet-bottom-right.gif);
- width: 10px;
- height: 9px;
- background-repeat: no-repeat;
- min-width: 10px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-footer-right {
+ background-image: url(images/portlet-bottom-right.gif);
+ width: 10px;
+ height: 9px;
+ background-repeat: no-repeat;
+ min-width: 10px;
+ }
+ </programlisting>
- Usage:
- Used to style the bottom right corner of the portlet window. Each portlet window consists of
- one table that has 3 columns and 3 rows. This selector styles the third column (TD) in the
- third row (TR).
+ Usage:
+ Used to style the bottom right corner of the portlet window. Each portlet window consists of
+ one table that has 3 columns and 3 rows. This selector styles the third column (TD) in the
+ third row (TR).
- <para>
- Screenshot:
- </para><para>
- <imageobject>
- <imagedata fileref="images/themeguide/portlet-footer-right.gif" format="gif" />
- </imageobject>
- </para>
- </para>
- </listitem>
+ <para>
+ Screenshot:
+ </para>
+ <para>
+ <imageobject>
+ <imagedata fileref="images/themeguide/portlet-footer-right.gif" format="gif"/>
+ </imageobject>
+ </para>
+ </para>
+ </listitem>
- <listitem>
- <para>
- Portlet Window Mode Selectors
+ <listitem>
+ <para>
+ Portlet Window Mode Selectors
- <programlisting>
- .portlet-mode-maximized {
- background-image: url(images/maximize.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ <programlisting>
+ .portlet-mode-maximized {
+ background-image: url(images/maximize.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
- Usage:
- Selector used to display the portlet maximize mode. Attributes for this selector control the
- display and dimensions of the maximize icon, including the behavior of the mouse pointer when
- hovering the mode.
+ Usage:
+ Selector used to display the portlet maximize mode. Attributes for this selector control the
+ display and dimensions of the maximize icon, including the behavior of the mouse pointer when
+ hovering the mode.
- <programlisting>
- .portlet-mode-minimized {
- background-image: url(images/minimize.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ <programlisting>
+ .portlet-mode-minimized {
+ background-image: url(images/minimize.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
- Usage:
- Selector used to display the portlet minimize mode. Attributes for this selector control the
- display and dimensions of the minimize icon, including the behavior of the mouse pointer when
- hovering the mode.
+ Usage:
+ Selector used to display the portlet minimize mode. Attributes for this selector control the
+ display and dimensions of the minimize icon, including the behavior of the mouse pointer when
+ hovering the mode.
- <programlisting>
- .portlet-mode-normal {
- background-image: url(images/normal.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ <programlisting>
+ .portlet-mode-normal {
+ background-image: url(images/normal.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
- Usage:
- Selector used to display the portlet normal mode (i.e. the icon that when clicked, restores the
- portlet to the original, default view). Attributes for this selector control the display and
- dimensions of the normal icon, including the behavior of the mouse pointer when hovering the mode.
+ Usage:
+ Selector used to display the portlet normal mode (i.e. the icon that when clicked, restores the
+ portlet to the original, default view). Attributes for this selector control the display and
+ dimensions of the normal icon, including the behavior of the mouse pointer when hovering the mode.
- <programlisting>
- .portlet-mode-help {
- background-image: url(images/help.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ <programlisting>
+ .portlet-mode-help {
+ background-image: url(images/help.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
- Usage:
- Selector used to display the portlet help mode. Attributes for this selector control the display
- and dimensions of the help icon, including the behavior of the mouse pointer when hovering the mode.
+ Usage:
+ Selector used to display the portlet help mode. Attributes for this selector control the display
+ and dimensions of the help icon, including the behavior of the mouse pointer when hovering the mode.
- <programlisting>
- .portlet-mode-edit {
- background-image: url(images/edit.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ <programlisting>
+ .portlet-mode-edit {
+ background-image: url(images/edit.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
- Usage:
- Selector used to display the portlet edit mode. Attributes for this selector control the display
- and dimensions of the edit icon, including the behavior of the mouse pointer when hovering the mode.
+ Usage:
+ Selector used to display the portlet edit mode. Attributes for this selector control the display
+ and dimensions of the edit icon, including the behavior of the mouse pointer when hovering the mode.
- <programlisting>
- .portlet-mode-remove {
- background-image: url(images/remove.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ <programlisting>
+ .portlet-mode-remove {
+ background-image: url(images/remove.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
- Usage:
- Currently not available. But here is the intended use:
- Selector used to display the portlet remove mode. Attributes for this selector control the
- display and dimensions of the remove icon, including the behavior of the mouse pointer when
- hovering the mode.
+ Usage:
+ Currently not available. But here is the intended use:
+ Selector used to display the portlet remove mode. Attributes for this selector control the
+ display and dimensions of the remove icon, including the behavior of the mouse pointer when
+ hovering the mode.
- <programlisting>
- .portlet-mode-view {
- background-image: url(images/view.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ <programlisting>
+ .portlet-mode-view {
+ background-image: url(images/view.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
- Usage:
- Selector used to display the portlet view mode. Attributes for this selector control the display
- and dimensions of the view icon, including the behavior of the mouse pointer when hovering the mode.
+ Usage:
+ Selector used to display the portlet view mode. Attributes for this selector control the display
+ and dimensions of the view icon, including the behavior of the mouse pointer when hovering the mode.
- <programlisting>
- .portlet-mode-reload {
- background-image: url(images/reload.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ <programlisting>
+ .portlet-mode-reload {
+ background-image: url(images/reload.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
- Usage:
- Currently not available. But here is the intended use:
- Selector used to display the portlet reload mode. Attributes for this selector control the
- display and dimensions of the reload icon, including the behavior of the mouse pointer when
- hovering the mode.
- </para>
- </listitem>
+ Usage:
+ Currently not available. But here is the intended use:
+ Selector used to display the portlet reload mode. Attributes for this selector control the
+ display and dimensions of the reload icon, including the behavior of the mouse pointer when
+ hovering the mode.
+ </para>
+ </listitem>
- <listitem>
- <para>
- Copyright Selectors
+ <listitem>
+ <para>
+ Copyright Selectors
- <programlisting>
- .portal-copyright {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- color: #5E6D7A;
- }
+ <programlisting>
+ .portal-copyright {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ color: #5E6D7A;
+ }
- a.portal-copyright {
- color: #768591;
- text-decoration: none;
- }
+ a.portal-copyright {
+ color: #768591;
+ text-decoration: none;
+ }
- a.portal-copyright:hover {
- color: #96A5B1;
- text-decoration: none;
- }
- </programlisting>
+ a.portal-copyright:hover {
+ color: #96A5B1;
+ text-decoration: none;
+ }
+ </programlisting>
- Usage:
- The above three selectors are used to style copyright content in the portal. The portal-copyright
- selector sets the font properties (color, etc.), and the a.portal-copyright/a.portal-copyright:hover
- selectors style any links that are part of the copyright information.
- </para>
- </listitem>
+ Usage:
+ The above three selectors are used to style copyright content in the portal. The portal-copyright
+ selector sets the font properties (color, etc.), and the a.portal-copyright/a.portal-copyright:hover
+ selectors style any links that are part of the copyright information.
+ </para>
+ </listitem>
- <listitem>
- <para>
- Element Selectors
+ <listitem>
+ <para>
+ Element Selectors
- <programlisting>
- a {
- color: #768591;
- text-decoration: none;
- }
- a:hover {
- color: #96A5B1;
- text-decoration: none;
- }
- </programlisting>
+ <programlisting>
+ a {
+ color: #768591;
+ text-decoration: none;
+ }
+ a:hover {
+ color: #96A5B1;
+ text-decoration: none;
+ }
+ </programlisting>
- Usage:
- The above two selectors style all anchor elements that do not have their own class/selector applied.
+ Usage:
+ The above two selectors style all anchor elements that do not have their own class/selector applied.
- <programlisting>
- INPUT {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 10px;
- }
- </programlisting>
+ <programlisting>
+ INPUT {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 10px;
+ }
+ </programlisting>
- Usage:
- The above selector styles all INPUT elements that do not have their own class/selector applied.
+ Usage:
+ The above selector styles all INPUT elements that do not have their own class/selector applied.
- <programlisting>
- SELECT {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 10px;
- }
- </programlisting>
+ <programlisting>
+ SELECT {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 10px;
+ }
+ </programlisting>
- Usage:
- The above selector styles all SELECT elements that do not have their own class/selector applied.
+ Usage:
+ The above selector styles all SELECT elements that do not have their own class/selector applied.
- <programlisting>
- FONT {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 10px;
- color: #768591;
- }
- </programlisting>
+ <programlisting>
+ FONT {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 10px;
+ color: #768591;
+ }
+ </programlisting>
- Usage:
- The above selector styles all FONT elements that do not have their own class/selector applied.
+ Usage:
+ The above selector styles all FONT elements that do not have their own class/selector applied.
- <programlisting>
- FIELDSET {
- background-color: #f7f7f7;
- border:1px solid #BABDB6;
- padding: 6px;
- }
- </programlisting>
+ <programlisting>
+ FIELDSET {
+ background-color: #f7f7f7;
+ border:1px solid #BABDB6;
+ padding: 6px;
+ }
+ </programlisting>
- Usage:
- The above selector styles all FIELDSET elements that do not have their own class/selector applied.
+ Usage:
+ The above selector styles all FIELDSET elements that do not have their own class/selector applied.
- <programlisting>
- LEGEND {
- background-color: transparent;
- padding-left: 6px;
- padding-right: 6px;
- padding-bottom: 0px;
- font-size: 14px;
- }
- </programlisting>
+ <programlisting>
+ LEGEND {
+ background-color: transparent;
+ padding-left: 6px;
+ padding-right: 6px;
+ padding-bottom: 0px;
+ font-size: 14px;
+ }
+ </programlisting>
- Usage:
- The above selector styles all LEGEND elements that do not have their own class/selector applied.
- </para>
- </listitem>
+ Usage:
+ The above selector styles all LEGEND elements that do not have their own class/selector applied.
+ </para>
+ </listitem>
- <listitem>
- <para>
- Table Selectors
+ <listitem>
+ <para>
+ Table Selectors
- <programlisting>
- .portlet-table-header {}
- </programlisting>
+ <programlisting>
+ .portlet-table-header {}
+ </programlisting>
- Usage:
- Not currently in use. Intended for styling tables (specifically, the TH or table header elements)
- that get rendered within a portlet window.
+ Usage:
+ Not currently in use. Intended for styling tables (specifically, the TH or table header elements)
+ that get rendered within a portlet window.
- <programlisting>
- .portlet-table-body {}
- </programlisting>
+ <programlisting>
+ .portlet-table-body {}
+ </programlisting>
- Usage:
- Not currently in use. Intended for styling the table body element used to group rows in a table.
+ Usage:
+ Not currently in use. Intended for styling the table body element used to group rows in a table.
- <programlisting>
- .portlet-table-alternate {}
- </programlisting>
+ <programlisting>
+ .portlet-table-alternate {}
+ </programlisting>
- Usage:
- Not currently in use. Used to style the background color (and possibly other attributes) for
- every other row within a table.
+ Usage:
+ Not currently in use. Used to style the background color (and possibly other attributes) for
+ every other row within a table.
- <programlisting>
- .portlet-table-selected {}
- </programlisting>
+ <programlisting>
+ .portlet-table-selected {}
+ </programlisting>
- Usage:
- Not currently in use. Used to style text, color, etc. in a selected cell range.
+ Usage:
+ Not currently in use. Used to style text, color, etc. in a selected cell range.
- <programlisting>
- .portlet-table-subheader {}
- </programlisting>
+ <programlisting>
+ .portlet-table-subheader {}
+ </programlisting>
- Usage:
- Not currently in use. Used to style a subheading within a table that gets rendered in a portlet.
+ Usage:
+ Not currently in use. Used to style a subheading within a table that gets rendered in a portlet.
- <programlisting>
- .portlet-table-footer {}
- </programlisting>
+ <programlisting>
+ .portlet-table-footer {}
+ </programlisting>
- Usage:
- Not currently in use. Similar to portlet-table-header and portlet-table-body, this selector is
- used to style the table footer element which is used to group the footer row in a table.
+ Usage:
+ Not currently in use. Similar to portlet-table-header and portlet-table-body, this selector is
+ used to style the table footer element which is used to group the footer row in a table.
- <programlisting>
- .portlet-table-text {}
- </programlisting>
+ <programlisting>
+ .portlet-table-text {}
+ </programlisting>
- Usage:
- Text that belongs to the table but does not fall in one of the other categories (e.g. explanatory
- or help text that is associated with the table). This selector can also be modified to provide
- styled text that can be used in all tables that are rendered within a portlet.
- </para>
- </listitem>
+ Usage:
+ Text that belongs to the table but does not fall in one of the other categories (e.g. explanatory
+ or help text that is associated with the table). This selector can also be modified to provide
+ styled text that can be used in all tables that are rendered within a portlet.
+ </para>
+ </listitem>
- <listitem>
- <para>
- FONT Selectors
+ <listitem>
+ <para>
+ FONT Selectors
- <programlisting>
- .portlet-font {
- color:#000;
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 10px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-font {
+ color:#000;
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 10px;
+ }
+ </programlisting>
- Usage:
- Used to style the font properties on text used in a portlet. Typically this class is used for
- the display of non-accentuated information.
+ Usage:
+ Used to style the font properties on text used in a portlet. Typically this class is used for
+ the display of non-accentuated information.
- <programlisting>
- .portlet-font-dim {
- color:#888385;
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 10px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-font-dim {
+ color:#888385;
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 10px;
+ }
+ </programlisting>
- Usage:
- A lighter version (color-wise) of the portlet-font selector.
- </para>
- </listitem>
+ Usage:
+ A lighter version (color-wise) of the portlet-font selector.
+ </para>
+ </listitem>
- <listitem>
- <para>
- FORM Selectors
+ <listitem>
+ <para>
+ FORM Selectors
- <programlisting>
- .portlet-form-label {
- color:#4A4A4A;
- text-decoration:none;
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-form-label {
+ color:#4A4A4A;
+ text-decoration:none;
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ }
+ </programlisting>
- Usage:
- Text used for the descriptive label of an entire form (not the label for each actual form field).
+ Usage:
+ Text used for the descriptive label of an entire form (not the label for each actual form field).
- <programlisting>
- .portlet-form-button {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #270F07;
- }
- </programlisting>
+ <programlisting>
+ .portlet-form-button {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #270F07;
+ }
+ </programlisting>
- Usage:
- Used to style portlet form buttons (e.g. Submit).
+ Usage:
+ Used to style portlet form buttons (e.g. Submit).
- <programlisting>
- .portlet-icon-label {}
- </programlisting>
+ <programlisting>
+ .portlet-icon-label {}
+ </programlisting>
- Usage:
- Not currently in use. Text that appears beside a context dependent action icon.
+ Usage:
+ Not currently in use. Text that appears beside a context dependent action icon.
- <programlisting>
- .portlet-dlg-icon-label {}
- </programlisting>
+ <programlisting>
+ .portlet-dlg-icon-label {}
+ </programlisting>
- Usage:
- Not currently in use. Text that appears beside a "standard" icon (e.g Ok, or Cancel).
+ Usage:
+ Not currently in use. Text that appears beside a "standard" icon (e.g Ok, or Cancel).
- <programlisting>
- .portlet-form-field-label {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- color: #4A4A4A;
- }
- </programlisting>
+ <programlisting>
+ .portlet-form-field-label {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ color: #4A4A4A;
+ }
+ </programlisting>
- Usage:
- Selector used to style portlet form field labels.
+ Usage:
+ Selector used to style portlet form field labels.
- <programlisting>
- .portlet-form-field {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- color: #4A4A4A;
- margin-top: 10px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-form-field {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ color: #4A4A4A;
+ margin-top: 10px;
+ }
+ </programlisting>
- Usage:
- Selector used to style portlet form fields (i.e. INPUT controls, SELECT elements, etc.).
- </para>
- </listitem>
- <listitem>
- <para>
- LINK Selectors
+ Usage:
+ Selector used to style portlet form fields (i.e. INPUT controls, SELECT elements, etc.).
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ LINK Selectors
- <programlisting>
- .portal-links:link {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #242424;
- text-decoration: none;
- }
+ <programlisting>
+ .portal-links:link {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #242424;
+ text-decoration: none;
+ }
- .portal-links:hover {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #5699B7;
- text-decoration: none;
- }
+ .portal-links:hover {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #5699B7;
+ text-decoration: none;
+ }
- .portal-links:active {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #242424;
- text-decoration: none;
- }
+ .portal-links:active {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #242424;
+ text-decoration: none;
+ }
- .portal-links:visited {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #242424;
- text-decoration: none;
- }
- </programlisting>
+ .portal-links:visited {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #242424;
+ text-decoration: none;
+ }
+ </programlisting>
- Usage:
- The above four selectors are used to style links in the portal. Each pseudo class (i.e. hover, active, etc.) provides a different link style.
- </para>
- </listitem>
- <listitem>
- <para>
- MESSAGE Selectors
+ Usage:
+ The above four selectors are used to style links in the portal. Each pseudo class (i.e. hover, active,
+ etc.) provides a different link style.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ MESSAGE Selectors
- <programlisting>
- .portlet-msg-status {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 10px;
- font-style: normal;
- color: #788793;
- }
- </programlisting>
+ <programlisting>
+ .portlet-msg-status {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 10px;
+ font-style: normal;
+ color: #788793;
+ }
+ </programlisting>
- Usage:
- Selector used to signify the status of a current operation that takes place in the portlet (e.g. “saving results�, “step 1 of 4�).
+ Usage:
+ Selector used to signify the status of a current operation that takes place in the portlet (e.g.
+ “saving results�?, “step 1 of 4�?).
- <programlisting>
- .portlet-msg-info {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-style: italic;
- color: #000;
- }
- </programlisting>
+ <programlisting>
+ .portlet-msg-info {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-style: italic;
+ color: #000;
+ }
+ </programlisting>
- Usage:
- Selector used to signify general information in a portlet (e.g. help messages).
+ Usage:
+ Selector used to signify general information in a portlet (e.g. help messages).
- <programlisting>
- .portlet-msg-error {
- color:red;
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- }
- </programlisting>
+ <programlisting>
+ .portlet-msg-error {
+ color:red;
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ }
+ </programlisting>
- Usage:
- Selector used to signify an error message in the portlet (e.g. form validation error).
+ Usage:
+ Selector used to signify an error message in the portlet (e.g. form validation error).
- <programlisting>
- .portlet-msg-alert {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #821717;
- }
- </programlisting>
+ <programlisting>
+ .portlet-msg-alert {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #821717;
+ }
+ </programlisting>
- Usage:
- Selector used to style an alert that is displayed to the user.
+ Usage:
+ Selector used to style an alert that is displayed to the user.
- <programlisting>
- .portlet-msg-success {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #359630;
- }
- </programlisting>
+ <programlisting>
+ .portlet-msg-success {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #359630;
+ }
+ </programlisting>
- Usage:
- Selector used to indicate successful completion of an action in a portlet (e.g. “save successful�).
- </para>
- </listitem>
- <listitem>
- <para>
- SECTION Selectors
+ Usage:
+ Selector used to indicate successful completion of an action in a portlet (e.g. “save successful�?).
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ SECTION Selectors
- <programlisting>
- .portlet-section-header {
- font-weight: bold;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 13px;
- color: #768591;
- background-color: #f7f7f7;
- }
- </programlisting>
+ <programlisting>
+ .portlet-section-header {
+ font-weight: bold;
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 13px;
+ color: #768591;
+ background-color: #f7f7f7;
+ }
+ </programlisting>
- Usage:
- Table or section header.
+ Usage:
+ Table or section header.
- <programlisting>
- .portlet-section-body {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 10px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-section-body {
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 10px;
+ }
+ </programlisting>
- Usage:
- Normal text in a table cell.
+ Usage:
+ Normal text in a table cell.
- <programlisting>
- .portlet-section-alternate {
- background-color: #ececed;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 9px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-section-alternate {
+ background-color: #ececed;
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 9px;
+ }
+ </programlisting>
- Usage:
- Used to style background color and text in every other table row.
+ Usage:
+ Used to style background color and text in every other table row.
- <programlisting>
- .portlet-section-selected {
- background-color: #89AEC6;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 9px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-section-selected {
+ background-color: #89AEC6;
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 9px;
+ }
+ </programlisting>
- Usage:
- Used to style background and font properties in a selected cell range.
+ Usage:
+ Used to style background and font properties in a selected cell range.
- <programlisting>
- .portlet-section-subheader {
- font-weight: bold;
- font-size: 10px;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- color: #000;
- }
- </programlisting>
+ <programlisting>
+ .portlet-section-subheader {
+ font-weight: bold;
+ font-size: 10px;
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ color: #000;
+ }
+ </programlisting>
- Usage:
- Used to style a subheading within a table/section that gets rendered in a portlet.
+ Usage:
+ Used to style a subheading within a table/section that gets rendered in a portlet.
- <programlisting>
- .portlet-section-footer {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- background-color: #f7f7f7;
- font-size: 8px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-section-footer {
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ background-color: #f7f7f7;
+ font-size: 8px;
+ }
+ </programlisting>
- Usage:
- Used to style footer area of a section/table that gets rendered in a portlet.
+ Usage:
+ Used to style footer area of a section/table that gets rendered in a portlet.
- <programlisting>
- .portlet-section-text {}
- </programlisting>
+ <programlisting>
+ .portlet-section-text {}
+ </programlisting>
- Usage:
- Not currently used. Text that belongs to a section but does not fall in one of the other categories. This selector can also be modified to provide styled text that can be used in all sections that are rendered within a portlet.
- </para>
- </listitem>
- <listitem>
- <para>
- MENU Selectors
+ Usage:
+ Not currently used. Text that belongs to a section but does not fall in one of the other categories.
+ This selector can also be modified to provide styled text that can be used in all sections that are
+ rendered within a portlet.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ MENU Selectors
- <programlisting>
- .portlet-menu {}
- </programlisting>
+ <programlisting>
+ .portlet-menu {}
+ </programlisting>
- Usage:
- Not currently used. General menu settings such as background color, margins, etc.
+ Usage:
+ Not currently used. General menu settings such as background color, margins, etc.
- <programlisting>
- .portlet-menu-item {
- color: #242424;
- text-decoration: none;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 9px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-menu-item {
+ color: #242424;
+ text-decoration: none;
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 9px;
+ }
+ </programlisting>
- Usage:
- Not currently used. Normal, unselected menu item.
+ Usage:
+ Not currently used. Normal, unselected menu item.
- <programlisting>
- .portlet-menu-item:hover {
- color: #5699B7;
- text-decoration: none;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 9px;
- }
- </programlisting>
+ <programlisting>
+ .portlet-menu-item:hover {
+ color: #5699B7;
+ text-decoration: none;
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 9px;
+ }
+ </programlisting>
- Usage:
- Not currently used. Used to style hover effect on a normal, unselected menu item.
+ Usage:
+ Not currently used. Used to style hover effect on a normal, unselected menu item.
- <programlisting>
- .portlet-menu-item-selected {}
- </programlisting>
+ <programlisting>
+ .portlet-menu-item-selected {}
+ </programlisting>
- Usage:
- Not currently used. Applies to selected menu items.
+ Usage:
+ Not currently used. Applies to selected menu items.
- <programlisting>
- .portlet-menu-item-selected:hover {
+ <programlisting>
+ .portlet-menu-item-selected:hover {
- }
- </programlisting>
+ }
+ </programlisting>
- Usage:
- Not currently used. Selector styles the hover effect on a selected menu item.
+ Usage:
+ Not currently used. Selector styles the hover effect on a selected menu item.
- <programlisting>
- .portlet-menu-cascade-item {}
- </programlisting>
+ <programlisting>
+ .portlet-menu-cascade-item {}
+ </programlisting>
- Usage:
- Not currently used. Normal, unselected menu item that has sub-menus.
+ Usage:
+ Not currently used. Normal, unselected menu item that has sub-menus.
- <programlisting>
- .portlet-menu-cascade-item-selected {}
- </programlisting>
+ <programlisting>
+ .portlet-menu-cascade-item-selected {}
+ </programlisting>
- Usage:
- Not currently used. Selected sub-menu item.
+ Usage:
+ Not currently used. Selected sub-menu item.
- <programlisting>
- .portlet-menu-description {}
- </programlisting>
+ <programlisting>
+ .portlet-menu-description {}
+ </programlisting>
- Usage:
- Not currently used. Descriptive text for the menu (e.g. in a help context below the menu).
+ Usage:
+ Not currently used. Descriptive text for the menu (e.g. in a help context below the menu).
- <programlisting>
- .portlet-menu-caption {}
- </programlisting>
+ <programlisting>
+ .portlet-menu-caption {}
+ </programlisting>
- Usage:
- Not currently used. Selector used to style menu captions.
- </para>
- </listitem>
- <listitem>
- <para>
- WSRP Selectors
+ Usage:
+ Not currently used. Selector used to style menu captions.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ WSRP Selectors
- <programlisting>
- .portlet-horizontal-separator {}
- </programlisting>
+ <programlisting>
+ .portlet-horizontal-separator {}
+ </programlisting>
- Usage:
- Not currently used. A separator bar similar to a horizontal rule, but with styling matching the page.
+ Usage:
+ Not currently used. A separator bar similar to a horizontal rule, but with styling matching the page.
- <programlisting>
- .portlet-nestedTitle-bar {}
- </programlisting>
+ <programlisting>
+ .portlet-nestedTitle-bar {}
+ </programlisting>
- Usage:
- Not currently used. Allows portlets to mimic the title bar when nesting something.
+ Usage:
+ Not currently used. Allows portlets to mimic the title bar when nesting something.
- <programlisting>
- .portlet-nestedTitle {}
- </programlisting>
+ <programlisting>
+ .portlet-nestedTitle {}
+ </programlisting>
- Usage:
- Not currently used. Allows portlets to match the textual character of the title on the title bar.
+ Usage:
+ Not currently used. Allows portlets to match the textual character of the title on the title bar.
- <programlisting>
- .portlet-tab {}
- </programlisting>
+ <programlisting>
+ .portlet-tab {}
+ </programlisting>
- Usage:
- Not currently used. Support portlets having tabs in the same style as the page or other portlets.
+ Usage:
+ Not currently used. Support portlets having tabs in the same style as the page or other portlets.
- <programlisting>
- .portlet-tab-active {}
- </programlisting>
+ <programlisting>
+ .portlet-tab-active {}
+ </programlisting>
- Usage:
- Not currently used. Highlight the tab currently being shown.
+ Usage:
+ Not currently used. Highlight the tab currently being shown.
- <programlisting>
- .portlet-tab-selected {}
- </programlisting>
+ <programlisting>
+ .portlet-tab-selected {}
+ </programlisting>
- Usage:
- Not currently used. Highlight the selected tab (not yet active).
+ Usage:
+ Not currently used. Highlight the selected tab (not yet active).
- <programlisting>
- .portlet-tab-disabled {}
- </programlisting>
+ <programlisting>
+ .portlet-tab-disabled {}
+ </programlisting>
- Usage:
- Not currently used. A tab which can not be currently activated.
+ Usage:
+ Not currently used. A tab which can not be currently activated.
- <programlisting>
- .portlet-tab-area {}
- </programlisting>
+ <programlisting>
+ .portlet-tab-area {}
+ </programlisting>
- Usage:
- Not currently used. Top level style for the content of a tab.
- </para>
- </listitem>
- </itemizedlist>
- </para>
- </sect1>
+ Usage:
+ Not currently used. Top level style for the content of a tab.
+ </para>
+ </listitem>
+ </itemizedlist>
+ </para>
+ </sect1>
</preface>
\ No newline at end of file
Modified: docs/trunk/referenceGuide/en/modules/themeandlayouts.xml
===================================================================
--- docs/trunk/referenceGuide/en/modules/themeandlayouts.xml 2006-10-13 18:44:54 UTC (rev 5446)
+++ docs/trunk/referenceGuide/en/modules/themeandlayouts.xml 2006-10-13 18:58:37 UTC (rev 5447)
@@ -6,68 +6,80 @@
<surname>Holzner</surname>
<email>mholzner at novell.com</email>
</author>
- <author>
- <firstname>Mark</firstname>
- <surname>Fernandes</surname>
- <email>mfernandes at novell.com</email>
- </author>
+ <author>
+ <firstname>Mark</firstname>
+ <surname>Fernandes</surname>
+ <email>mfernandes at novell.com</email>
+ </author>
</chapterinfo>
<title>Layouts and Themes</title>
<sect1>
<title>Overview</title>
- <para> Portals usually render the markup fragments of several portlets, and aggregate these
+ <para>Portals usually render the markup fragments of several portlets, and aggregate these
fragments into one page that ultimately gets sent back as response. Each portlet on that
page will be decorated by the portal to limit the real estate the portlet has on the page,
but also to allow the portal to inject extra functionality on a per portlet basis. Classic
examples of this injection are the maximize, minimize and mode change links that will
- appear in the portlet window , together with the title. </para>
- <para> Layouts and themes allow to manipulate the look and feel of the portal. Layouts are
+ appear in the portlet window , together with the title.
+ </para>
+ <para>Layouts and themes allow to manipulate the look and feel of the portal. Layouts are
responsible to render markup that will wrap the markup fragments produced by the individual
- portlets. Themes, on the other hand, are responsible to style and enhance this markup. </para>
- <para> In JBoss Portal, layouts are implemented as a JSP or a Servlet. Themes are implemeted
+ portlets. Themes, on the other hand, are responsible to style and enhance this markup.
+ </para>
+ <para>In JBoss Portal, layouts are implemented as a JSP or a Servlet. Themes are implemeted
using CSS Style sheets, java script and images. The binding elemement between layouts and
- themes are the class and id attributes of the rendered markup. </para>
- <para> JBoss Portal has the concept of regions on a page. When a page is defined, and portlet
+ themes are the class and id attributes of the rendered markup.
+ </para>
+ <para>JBoss Portal has the concept of regions on a page. When a page is defined, and portlet
windows are assigned to the page, the region, and order inside the region, has to be
specified as well. For portal layouts this has significant meaning. It defines the top most
markup container that can wrap portlet content (other then the static markup in the JSP
itself). In other words: from a layout perspective all portlets of a page are assigned to
one or more regions. Each region can contain one or more portlets. To render the page
content to return from a portal request, the portal has to render the layout JSP, and for
- each region, all the portlets in the region. </para>
- <para> Since the markup around each region, and around each portlet inside that region, is
+ each region, all the portlets in the region.
+ </para>
+ <para>Since the markup around each region, and around each portlet inside that region, is
effectively the same for all the pages of a portal, it makes sense to encapsulate it in its
- own entity. <itemizedlist>
+ own entity.
+ <itemizedlist>
<para>To implement this encapsulation there are several ways:</para>
<listitem>JSPs that get included from the layout JSP for each region/portlet</listitem>
<listitem>a taglib that allows to place region, window, and decoration tags into the
- layout JSP</listitem>
+ layout JSP
+ </listitem>
<listitem>a taglib that uses a pluggable API to delegate the markup generation to a set
- of classes</listitem>
- </itemizedlist> In JBoss Portal you can currently see two out of these approaches, namley
+ of classes
+ </listitem>
+ </itemizedlist>
+ In JBoss Portal you can currently see two out of these approaches, namley
the first and the last. Examples for the first can be found in the portal-core.war,
implemented by the nodesk and phalanx layouts. Examples for the third approach can be found
in the same war, implemented by the industrial and Nphalanx layout. What encapsulates the
markup generation for each region, window, and portlet decoration in this last approach is
- what's called the RenderSet. <itemizedlist>
+ what's called the RenderSet.
+ <itemizedlist>
<para>The RenderSet consist of four interfaces that correspond with the four markup
- containers that wrap the markup fragments of one of more portlets:</para>
+ containers that wrap the markup fragments of one of more portlets:
+ </para>
<listitem>Region</listitem>
<listitem>Window</listitem>
<listitem>Decoration</listitem>
<listitem>Portlet Content</listitem>
</itemizedlist>
</para>
- <para> While we want to leave it open to you to decide which way to implement your layouts and
+ <para>While we want to leave it open to you to decide which way to implement your layouts and
themes, we strongly believe that the last approach is superior, and allows for far more
- flexibility, and clearer separation of duties between portal developers and web designers. </para>
- <para> Portal layouts also have the concept of a layout strategy. The layout strategy is a
+ flexibility, and clearer separation of duties between portal developers and web designers.
+ </para>
+ <para>Portal layouts also have the concept of a layout strategy. The layout strategy is a
pluggable API, and lets the layout developer have a last say about the content to be
rendered. The strategy is called right after the portal has determined what needs to be
rendered as part of the current request. So the strategy is invoked right between the point
where the portal knows what needs to be done, and before the actual work is initiated. The
strategy gets all the details about what is going to happen, and it can take measures to
- influence those details. <itemizedlist>
+ influence those details.
+ <itemizedlist>
<para>Some simple examples of those measures are:</para>
<listitem>ommit one of the portlets from being rendered</listitem>
<listitem>change the portlet mode or window state of a portlet before it gets rendered</listitem>
@@ -75,32 +87,36 @@
<listitem>...and many more</listitem>
</itemizedlist>
</para>
- <para> The last topic to introduce in this overview is the one of portal themes. A theme is a
+ <para>The last topic to introduce in this overview is the one of portal themes. A theme is a
collection of web design artifacts. It defines a set of css, java script and image files
that together decide about the look and feel of the portal page. The theme can take a wide
spectrum of control over the look and feel. It can limit itself to decide fonts and colors,
or it can take over a lot more and decide the placement (location) of portlets and much
- more. </para>
+ more.
+ </para>
</sect1>
<sect1>
<title>Layouts</title>
<sect2>
<title>How to define a Layout</title>
- <para> Layouts are used by the portal to produce the actual markup of a portal response.
+ <para>Layouts are used by the portal to produce the actual markup of a portal response.
After all the portlets on a page have been rendered and have produced their markup
fragments, the layout is responsible for aggregating all these pieces, mix them with
some ingredients from the portal itself, and at the end write the response back to the
- requesting client. </para>
- <para> Layouts can be either a JSP or a Servlet. The portal determines the layout to use
+ requesting client.
+ </para>
+ <para>Layouts can be either a JSP or a Servlet. The portal determines the layout to use
via the configured properties of the portal, or the requested page. Both, portal and
pages, can define the layout to use in order to render their content. In case both
define a layout, the layout defined for the page will overwrite the one defined for the
- portal. </para>
- <para> A Layout is defined in the layout descriptor named portal-layouts.xml. This
+ portal.
+ </para>
+ <para>A Layout is defined in the layout descriptor named portal-layouts.xml. This
descriptor must be part of the portal application, and is picked up by the layout
deployer. If the layout deployer detects such a descriptor in a web application, it will
parse the content and register the layouts with the layout service of the portal. Here
- is an example of such a descriptor file: <programlisting><![CDATA[
+ is an example of such a descriptor file:
+ <programlisting><![CDATA[
<layouts>
<layout>
<name>phalanx</name>
@@ -118,9 +134,10 @@
<title>How to use a Layout</title>
<sect3>
<title>Declarative use</title>
- <para> Portals and pages can be configured to use a particular layout. The connection to
+ <para>Portals and pages can be configured to use a particular layout. The connection to
the desired layout is made in the portal descriptor (YourNameHere-object.xml). Here
- is an example of such a portal descriptor: <programlisting><![CDATA[
+ is an example of such a portal descriptor:
+ <programlisting><![CDATA[
<portal>
<portal-name>default</portal-name>
<properties>
@@ -143,28 +160,32 @@
</properties>
</page>
</pages>
- </portal>]]></programlisting> The name specified for the layout to use has to
+ </portal>]]></programlisting>
+ The name specified for the layout to use has to
match one of the names defined in the portal-layouts.xml descriptor of one of the
- deployed applications. </para>
- <para> As you can see, the portal or page property points to the layout to use via the
+ deployed applications.
+ </para>
+ <para>As you can see, the portal or page property points to the layout to use via the
name of the layout. The name has been given to the layout in the layout descriptor.
It is in that layout descriptor where the name gets linked to the physical resource
- (the JSP or Servlet) that will actually render the layout. </para>
+ (the JSP or Servlet) that will actually render the layout.
+ </para>
</sect3>
<sect3>
<title>Programatic use</title>
- <para> To access a layout from code, you need to get a reference to the LayoutService
+ <para>To access a layout from code, you need to get a reference to the LayoutService
interface. The layout service is an mbean that allows access to the PortalLayout
interface for each layout that was defined in a portal layout descriptor. As a layout
developer you should never have to deal with the layout service directly. Your layout
hooks are the portal and page properties to configure the layout, and the layout
strategy, where you can change the layout to use for the current request, before the
- actual render process begins. </para>
+ actual render process begins.
+ </para>
</sect3>
</sect2>
<sect2>
<title>Where to place the Descriptor files</title>
- <para> Both descriptors, the portal and the theme descriptor, are located in the WEB-INF/
+ <para>Both descriptors, the portal and the theme descriptor, are located in the WEB-INF/
folder of the deployed portal application. Note that this is not limited to the
portal-core.war, but can be added to any WAR that you deploy to the same server. The
Portal runtime will detect the deployed application and introspect the WEB-INF folder
@@ -172,11 +193,12 @@
is formed and added to the portal runtime. From that time on the resources in that
application are available to be used by the portal. This is an elegant way to
dynamically add new layouts or themes to the portal without having to bring down , or
- even rebuild the core portal itself. </para>
+ even rebuild the core portal itself.
+ </para>
</sect2>
<sect2>
<title>How to connect a Layout to a Layout Strategy</title>
- <para> As you might have noticed already, a layout definition consists of a name and one or
+ <para>As you might have noticed already, a layout definition consists of a name and one or
more uri elements. We have already seen the function of the name element. Now let's take
a closer look at the uri element. In the example above, the phalanx layout defined one
uri element only, the industrial layout defines two. What you can see in the industrial
@@ -185,27 +207,33 @@
such separation is made in the layout descriptor, then the portal will always use the
same JSP for this layout. Note that the 'state' attribute value works together with the
state that was set by the layout strategy. Please refere to the section about the layout
- strategy for more details. </para>
+ strategy for more details.
+ </para>
</sect2>
<sect2>
<title>Layout JSP-tags</title>
- <para> The portal comes with a set of JSP tags that allow the layout developer faster
- development. <itemizedlist>
+ <para>The portal comes with a set of JSP tags that allow the layout developer faster
+ development.
+ <itemizedlist>
<para>There are currently two taglibs, containing tags for different approaches to
- layouts:</para>
+ layouts:
+ </para>
<listitem>portal-layout.tld</listitem>
<listitem>theme-basic-lib.tld</listitem>
</itemizedlist>
</para>
- <para> The theme-basic-lib.tld contains a list of tags that allow a JSP writer to access
+ <para>The theme-basic-lib.tld contains a list of tags that allow a JSP writer to access
the state of the rendered page content. It is built on the assumption that regions,
- portlet windows and portlet decoration is managed inside the JSP. </para>
- <para> The portal-layout.tld contains tags that work under the assumption that the
+ portlet windows and portlet decoration is managed inside the JSP.
+ </para>
+ <para>The portal-layout.tld contains tags that work under the assumption that the
RenderSet will take care of how regions, portlet windows and the portlet decoration will
be rendered. The advantage of this approach is that the resulting JSP is much simpler
- and easier to read and maintain. </para>
- <para> Here is an example layout JSP that uses tags from the latter: <programlisting>
- <![CDATA[
+ and easier to read and maintain.
+ </para>
+ <para>Here is an example layout JSP that uses tags from the latter:
+ <programlisting>
+ <![CDATA[
<%@ taglib uri="/WEB-INF/theme/portal-layout.tld" prefix="p" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
@@ -246,23 +274,25 @@
<para>
<sect3>
<title>The theme tag</title>
- <para> The theme tag looks for the determined theme of the current request (see
+ <para>The theme tag looks for the determined theme of the current request (see
Portal Themes for more details). If no theme was determined, this tag allows an
optional attribute 'themeName' that can be used to specifiy a default theme to use
as a last resort. Based on the determined theme name, the ThemeService is called
to lookup the theme with this name and to get the resources associated with this
theme. The resulting style and link elements are injected, making sure that war
- context URLS are resolved appropriately. </para>
+ context URLS are resolved appropriately.
+ </para>
</sect3>
<sect3>
<title>The headerContent tag</title>
- <para> This tags allows portlets to inject content into the header. More details
+ <para>This tags allows portlets to inject content into the header. More details
about this function are mentioned in the 'other Theme Functions' section of this
- document. </para>
+ document.
+ </para>
</sect3>
<sect3>
<title>The region tag</title>
- <para> The region tag renders all the portlets in the specified region of the current
+ <para>The region tag renders all the portlets in the specified region of the current
page, using the determined RenderSet to produce the markup that surrounds the
individual portlet markup fragments. The regionName attribute functions as a query
param into the current page. It determines from what page region the portlets will
@@ -279,7 +309,7 @@
<title>Layout Strategy</title>
<sect2>
<title>What is a Layout Strategy</title>
- <para> The layout strategy is a pluggable API that allows the layout developer to influence
+ <para>The layout strategy is a pluggable API that allows the layout developer to influence
the content of the page that is about to be rendered. Based on the current request URL,
the portal determined the portal and page that needs to be rendered. The page contains a
list of portlets, and those portlets are in a particular navigational state. The
@@ -288,16 +318,18 @@
of each portlet, the allowed window states and portlet modes for both, the portal and
the individual portlets, is passed to the layout strategy before the actual rendering is
invoked. The layout strategy can check what is about to be rendered, and take action in
- a limited way to influence the content that is about to be rendered. </para>
+ a limited way to influence the content that is about to be rendered.
+ </para>
</sect2>
<sect2>
<title>How can I use a Layout Strategy</title>
<sect3>
<title>Define a Strategy</title>
- <para> A layout strategy is defined in the strategy descriptor. The descriptor is named
+ <para>A layout strategy is defined in the strategy descriptor. The descriptor is named
portal-strategies.xml, and is located in the WEB-INF/layout folder of any web
- application deployed to the server. Here is an example of such a descriptor: <programlisting>
- <![CDATA[<portal-strategies>
+ application deployed to the server. Here is an example of such a descriptor:
+ <programlisting>
+ <![CDATA[<portal-strategies>
<set name="default">
<strategy content-type="text/html">
<implementation>org.jboss.portal.theme.impl.strategy.DefaultStrategyImpl</implementation>
@@ -309,25 +341,28 @@
</strategy>
</set>
</portal-strategies>
- ]]></programlisting> Layout strategies are defined as sets. A set consists of one or
+ ]]></programlisting>
+ Layout strategies are defined as sets. A set consists of one or
more strategy definitions, separated by content type they are assigned for. The idea
behind this is to allow the layout developer to apply different strategies based on
requested content type. Each set has a name that is unique in the application context
it is deployed in. The strategy can be refered to by this name. As a result of that
it is considered a named layout strategy in contrast to an anonymous strategy as
- described below. </para>
+ described below.
+ </para>
</sect3>
<sect3>
<title>Specify the Strategy to use</title>
- <para> The strategy that will be used for a portal request is defined as a property of
+ <para>The strategy that will be used for a portal request is defined as a property of
the current layout, the requested portal, or the requested page. If the layout
defines a strategy to use it will overwrite all other assignments. If there is no
particular strategy defined for the layout, then the page property will overwrite the
portal property. If no strategy can be determined, then a last attempt will be made
to use the strategy with the name 'default'. If no strategy can be determined at all,
the request will proceed normally without invoking any strategy. Here is an example
- layout descriptor that defines a strategy for the layouts defined: <programlisting>
- <![CDATA[
+ layout descriptor that defines a strategy for the layouts defined:
+ <programlisting>
+ <![CDATA[
<layouts>
<strategy content-type="text/html">
<implementation>com.novell.portal.strategy.MaximizingStrategy</implementation>
@@ -339,11 +374,13 @@
<uri state="maximized">/generic/maximized.jsp</uri>
</layout>
</layouts>
- ]]></programlisting> In this case the strategy is anonymous and directly assigned to
+ ]]></programlisting>
+ In this case the strategy is anonymous and directly assigned to
the generic layout. The strategy cannot be discovered independently from the generic
layout. Here is an example portal descriptor that points to a strategy for the
- portal, and for a particular page: <programlisting>
- <![CDATA[
+ portal, and for a particular page:
+ <programlisting>
+ <![CDATA[
<portal>
<portal-name>default</portal-name>
<properties>
@@ -372,43 +409,49 @@
</page>
</pages>
</portal>
- ]]></programlisting> As you can see, analogous to how layouts are refered to, the
+ ]]></programlisting>
+ As you can see, analogous to how layouts are refered to, the
strategy name is the linking element between the portal descriptor and the layout
strategy descriptor. The content type is determined at runtime, and serves as a
secondary query parameter to get the correct strategy for this content type out of
- the set that matches the name provided in the portal descriptor. </para>
+ the set that matches the name provided in the portal descriptor.
+ </para>
</sect3>
</sect2>
<sect2>
<title>Linking the Strategy and the Layout</title>
- <para> As mentioned above, the layout descriptor can link a strategy directly to the
+ <para>As mentioned above, the layout descriptor can link a strategy directly to the
layout. This will overwrite all other defined strategies for the portal or the page, for
- any page that uses this layout. </para>
- <para> The layout strategy can set a state to return to the portal as a result of the
+ any page that uses this layout.
+ </para>
+ <para>The layout strategy can set a state to return to the portal as a result of the
strategy evaluation. This state will be matched with the state attribute of the uri
element of the layout. If there is a match, then the uri that matches this state will be
used as the layout for the current request. So, if the strategy sets a state of
'maximized' , the portal will try to use the layout resource that is pointed to for that
particular state in the currently selected layout. As you might remember from the
previous layout section, a layout can point to another JSP or Servlet based on the state
- attribute of the uri element, like so: <programlisting><![CDATA[
+ attribute of the uri element, like so:
+ <programlisting><![CDATA[
<layouts>
<layout>
<name>industrial</name>
<uri>/industrial/index.jsp</uri>
<uri state="maximized">/industrial/maximized.jsp</uri>
</layout>
- </layouts>]]></programlisting> In this case all reuquests that don't return a state
+ </layouts>]]></programlisting>
+ In this case all reuquests that don't return a state
'maximized' from the evaluation of the strategy will use the /industrial/index.jsp as
the layout. However, if the evaluation of the strategy returns a state of 'maximized'
- then the request will use /industrial/maximized.jsp as the layout. </para>
+ then the request will use /industrial/maximized.jsp as the layout.
+ </para>
</sect2>
</sect1>
<sect1>
<title>RenderSets</title>
<sect2>
<title>What is a RenderSet</title>
- <para> A RenderSet can be used to produce the markup containers around portlets and portlet
+ <para>A RenderSet can be used to produce the markup containers around portlets and portlet
regions. The markup for each region, and each portlet window in a region is identical.
Further more, it is most likely identical across several layouts. The way portlets are
arranged and decorated will most likely not change across layouts. What will change is
@@ -419,34 +462,44 @@
between the layout and the theme that takes the information available in the portal and
renders markup containing the current state of the page and each portlet on it. It makes
sure that the markup around each region and portlet contains the selectors that the
- theme css needs to style the page content appropriately. </para>
- <para> A RenderSet consists of the implementations of four interfaces. Each of those
- interfaces corresponds to a markup container on the page. <itemizedlist>
+ theme css needs to style the page content appropriately.
+ </para>
+ <para>A RenderSet consists of the implementations of four interfaces. Each of those
+ interfaces corresponds to a markup container on the page.
+ <itemizedlist>
<para>Here are the four markup containers and their interface representation:</para>
<listitem>Region - RegionRenderer</listitem>
<listitem>Window - WindowRenderer</listitem>
<listitem>Decoration - DecorationRenderer</listitem>
<listitem>Portlet Content - PortletRenderer</listitem>
- </itemizedlist> All the renderer interfaces are specified in the
- org.jboss.portal.theme.render package. </para>
- <para> The four markup containers are hierarchical. The region contains one or more
- windows. A window contains the portlet decoration and the portlet content. </para>
- <para> The region is responsible for arranging the positioning and order of each portlet
+ </itemizedlist>
+ All the renderer interfaces are specified in the
+ org.jboss.portal.theme.render package.
+ </para>
+ <para>The four markup containers are hierarchical. The region contains one or more
+ windows. A window contains the portlet decoration and the portlet content.
+ </para>
+ <para>The region is responsible for arranging the positioning and order of each portlet
window. Should they be arranged in a row or a column? If there are more then one portlet
- window in a region, in what order should they appear? </para>
- <para> The window is responsible for placing the window decoration, including the portlet
- title, over the portlet content, or under, or next to it. </para>
- <para> The decoration is responsible for inserting the correct markup with the links to the
- portlet modes and window states currently available for each portlet. </para>
- <para> The portlet content is responsible for inserting the actually rendered markup
- fragment that was produced by the portlet itself. </para>
+ window in a region, in what order should they appear?
+ </para>
+ <para>The window is responsible for placing the window decoration, including the portlet
+ title, over the portlet content, or under, or next to it.
+ </para>
+ <para>The decoration is responsible for inserting the correct markup with the links to the
+ portlet modes and window states currently available for each portlet.
+ </para>
+ <para>The portlet content is responsible for inserting the actually rendered markup
+ fragment that was produced by the portlet itself.
+ </para>
</sect2>
<sect2>
<title>How is a RenderSet defined</title>
- <para> Similar to layouts, render sets must be defined in a RenderSet descriptor. The
+ <para>Similar to layouts, render sets must be defined in a RenderSet descriptor. The
RenderSet descriptor is located in the WEB-INF/layout folder of a web application, and
- is named portal-renderSet.xml. Here is an example descriptor: <programlisting>
- <![CDATA[
+ is named portal-renderSet.xml. Here is an example descriptor:
+ <programlisting>
+ <![CDATA[
<?xml version="1.0" encoding="UTF-8"?>
<portal-renderSet>
<renderSet name="divRenderer">
@@ -471,10 +524,11 @@
</sect2>
<sect2>
<title>How to specify what RenderSet to use</title>
- <para> Analogous to how a strategy is specified, the RenderSet can be specified as a portal
+ <para>Analogous to how a strategy is specified, the RenderSet can be specified as a portal
or page property, or a particular layout can specify an anonymous RenderSet to use. Here
- is an example of a portal descriptor: <programlisting>
- <![CDATA[
+ is an example of a portal descriptor:
+ <programlisting>
+ <![CDATA[
<?xml version="1.0" encoding="UTF-8"?>
<portal>
<portal-name>default</portal-name>
@@ -505,9 +559,11 @@
</page>
</pages>
</portal>
- ]]></programlisting> Here is an example of a layout descriptor with an anonymous
- RenderSet: <programlisting>
- <![CDATA[
+ ]]></programlisting>
+ Here is an example of a layout descriptor with an anonymous
+ RenderSet:
+ <programlisting>
+ <![CDATA[
<?xml version="1.0" encoding="UTF-8"?>
<layouts>
<renderSet>
@@ -524,20 +580,22 @@
<uri state="maximized">/generic/maximized.jsp</uri>
</layout>
</layouts>
- ]]></programlisting> Again, anologous to layout strategies, the anonymous RenderSet
+ ]]></programlisting>
+ Again, anologous to layout strategies, the anonymous RenderSet
overwrites the one specified for the page, and that overwrites the one specified for the
portal. In other words: all pages that use the layout that defines an anonymous
RenderSet will use that RenderSet, and ignore what is defined as RenderSet for the
- portal or the page. </para>
- <para>
- In addition to specifying the renderSet for a portal or a page, each individual portlet window
- can define what renderSet to use for the one of the three aspects of a window, the window renderer,
- the decoration renderer, and the portlet renderer. This feature allow you to use the the window renderer
- implementation from one renderSet, and the decoration renderer from another.
- Here is an example for a window that uses the implementations of the emptyRenderer renderSet for all three
- aspects:
- <programlisting>
- <![CDATA[
+ portal or the page.
+ </para>
+ <para>
+ In addition to specifying the renderSet for a portal or a page, each individual portlet window
+ can define what renderSet to use for the one of the three aspects of a window, the window renderer,
+ the decoration renderer, and the portlet renderer. This feature allow you to use the the window renderer
+ implementation from one renderSet, and the decoration renderer from another.
+ Here is an example for a window that uses the implementations of the emptyRenderer renderSet for all three
+ aspects:
+ <programlisting>
+ <![CDATA[
<window>
<window-name>NavigationPortletWindow</window-name>
<instance-ref>NavigationPortletInstance</instance-ref>
@@ -563,14 +621,14 @@
</properties>
</window>]]></programlisting>
- </para>
+ </para>
</sect2>
</sect1>
<sect1>
<title>Themes</title>
<sect2>
<title>What is a Theme</title>
- <para> A portal theme is a collection of CSS styles, JavaScript files, and images, that all
+ <para>A portal theme is a collection of CSS styles, JavaScript files, and images, that all
work together to style and enhance the rendered markup of the portal page. The theme
works together with the layout and the RenderSet in procuding the content and final look
and feel of the portal response. Through clean separation of markup and styles a much
@@ -584,16 +642,18 @@
web applications furthering even more the flexibility of this approach. Web developers
don't have to work with JSPs. They can stay in their favorite design tool and simple
work against the exploded war content that is deployed into the portal. The results can
- be validated life in the portal. </para>
+ be validated life in the portal.
+ </para>
</sect2>
<sect2>
<title>How to define a Theme</title>
- <para> Themes can be added as part of any web application that is deployed to the portal
+ <para>Themes can be added as part of any web application that is deployed to the portal
server. All what is needed is a theme descriptor file that is part of the deployed
archive. This descriptor indicates to the portal what themes and theme resources are
becoming available to the portal. The theme deployer scans the descriptor and adds the
theme(s) to the ThemeService, which in turn makes the themes available for consumption
- by the portal. Here is an example of a theme descriptor: <programlisting>
+ by the portal. Here is an example of a theme descriptor:
+ <programlisting>
<![CDATA[
<themes>
<theme>
@@ -659,17 +719,19 @@
</themes>
]]></programlisting>
</para>
- <para> Themes are defined in the portal-themes.xml theme descriptor, which is localted in
- the WEB-INF/ folder of the web application. </para>
+ <para>Themes are defined in the portal-themes.xml theme descriptor, which is localted in
+ the WEB-INF/ folder of the web application.
+ </para>
</sect2>
<sect2>
<title>How to use a Theme</title>
- <para> Again, analogous to the way it is done for layouts, themes are specified in the
+ <para>Again, analogous to the way it is done for layouts, themes are specified in the
portal descriptor as a portal or page property. The page property overwrites the portal
property. In addition to these two options, themes can also be specified as part of the
theme JSP tag , that is placed on the layout JSP. Here is an example portal descriptor
that specifies the phalanx theme as the theme for the entire portal, and the industrial
- theme for the theme test page: <programlisting>
+ theme for the theme test page:
+ <programlisting>
<![CDATA[
<portal>
<portal-name>default</portal-name>
@@ -699,8 +761,10 @@
</page>
</pages>
</portal>
- ]]></programlisting> And here is an example of a layout JSP that defines a default
- theme to use if no other theme was defined for the portal or page: <programlisting>
+ ]]></programlisting>
+ And here is an example of a layout JSP that defines a default
+ theme to use if no other theme was defined for the portal or page:
+ <programlisting>
<![CDATA[
<%@ taglib uri="/WEB-INF/theme/portal-layout.tld" prefix="p" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
@@ -737,37 +801,46 @@
</div>
</body>
</html>
- ]]></programlisting> For the function of the individual tags in this example, please
- refere to the layout section of this document. </para>
+ ]]></programlisting>
+ For the function of the individual tags in this example, please
+ refere to the layout section of this document.
+ </para>
</sect2>
<sect2>
<title>How to write your own Theme</title>
- <para> Ask your favorite web designer and/or consult the ThemeStyleGuide in this document
- ;) </para>
+ <para>Ask your favorite web designer and/or consult the ThemeStyleGuide in this document
+ ;)
+ </para>
</sect2>
</sect1>
<sect1>
<title>Other Theme Functionalities and Features</title>
- <para> This section contains all the functionalities that don't fit with any of the other
+ <para>This section contains all the functionalities that don't fit with any of the other
topics. Bits and pieces of useful functions that are related to the theme and layout
- functionality. </para>
+ functionality.
+ </para>
<sect2>
<title>Content Rewriting and Header Content Injection</title>
- <para> Portlets can have their content rewritten by the portal. This is useful if you want
+ <para>Portlets can have their content rewritten by the portal. This is useful if you want
to uniquely namespace markup (JavaScript functions for example) in the scope of a page.
The rewrite functionality can be applied to the portlet content (the markup fragment)
and to content a portlet wants to inject into the header. The rewrite is implemented as
specified in the WSRP (OASIS: Web Services for Remote Portlets; producer write). As a
result of this, the token to use for rewrite is the WSRP specified "wsrp_rewrite_". If
the portlet sets the following response property
- <programlisting>res.setProperty("WSRP_REWRITE","true");</programlisting> all occurences
+ <programlisting>res.setProperty("WSRP_REWRITE","true");</programlisting>
+ all occurences
of the wsrp_rewrite_ token in the portlet fragment will be replaced with a unique token
(the window id). If the portlet also specifies content to be injected into the header of
the page, that content is also subject to this rewrite.
- <programlisting>res.setProperty("HEADER_CONTENT", "<script>function wsrp_rewrite_OnFocus(){alert('hello button');}</script>");</programlisting>
+ <programlisting>res.setProperty("HEADER_CONTENT", "
+ <script>function wsrp_rewrite_OnFocus(){alert('hello button');}</script>
+ ");
+ </programlisting>
Note that in order for the header content injection to work, the layout needs to make
- use of the headerContent JSP tag, like: <programlisting>
- <![CDATA[
+ use of the headerContent JSP tag, like:
+ <programlisting>
+ <![CDATA[
<%@ taglib uri="/WEB-INF/theme/portal-layout.tld" prefix="p" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
@@ -787,10 +860,11 @@
</sect2>
<sect2>
<title>Declarative CSS Style injection</title>
- <para> If a portlet needs a CSS style sheet to be injected via a link tag in the page
+ <para>If a portlet needs a CSS style sheet to be injected via a link tag in the page
header, it can do so by providing the context relative URI to the file in the
- jboss-portlet.xml descriptor, like: <programlisting>
- <![CDATA[
+ jboss-portlet.xml descriptor, like:
+ <programlisting>
+ <![CDATA[
<portlet-app>
<portlet>
<portlet-name>HeaderContentPortlet</portlet-name>
@@ -801,16 +875,19 @@
</portlet-app>
]]></programlisting>
</para>
- <para> This functionality, just like the previously described header content injection,
+ <para>This functionality, just like the previously described header content injection,
requires the layout JSP to add the "headerContent" JSP tag (see example above). One thing to note here is
- the order of the tags. If the headerContent tag is placed after the theme tag, it will allow portlet injected
- CSS files to overwrite the theme's behaviour, making this feature even more powerful!</para>
+ the order of the tags. If the headerContent tag is placed after the theme tag, it will allow portlet
+ injected
+ CSS files to overwrite the theme's behaviour, making this feature even more powerful!
+ </para>
</sect2>
<sect2>
<title>Disabling Portlet Decoration</title>
- <para> One possible use of window properties is demonstrated in the divRenderer RenderSet implementation.
- If a window definition (in the portal descriptor) contains a property like: <programlisting>
- <![CDATA[
+ <para>One possible use of window properties is demonstrated in the divRenderer RenderSet implementation.
+ If a window definition (in the portal descriptor) contains a property like:
+ <programlisting>
+ <![CDATA[
<window>
<window-name>HintPortletWindow</window-name>
<instance-ref>HintPortletInstance</instance-ref>
@@ -824,47 +901,59 @@
</property>
</properties>
</window>
- ]]></programlisting> the DivWindowRenderer will use the decoration renderer from the emptyRenderer
- RenderSet to render the decoration for this window (not delegate to the DivDecorationRenderer).
- As a result, the portlet window will be part of the rendered page, but it will not have a title,
- nor will it have any links to change the portlet mode or window state. </para>
+ ]]></programlisting>
+ the DivWindowRenderer will use the decoration renderer from the emptyRenderer
+ RenderSet to render the decoration for this window (not delegate to the DivDecorationRenderer).
+ As a result, the portlet window will be part of the rendered page, but it will not have a title,
+ nor will it have any links to change the portlet mode or window state.
+ </para>
</sect2>
</sect1>
<sect1>
<title>Theme Style Guide (based on the Industrial theme)</title>
<sect2>
<title>Overview</title>
- <para> This document outlines the different selectors used to handle the layout and
- look/feel of the Industrial theme included in the JBoss portal. <itemizedlist>
+ <note>This section to be updated soon with new CSS selectors found in JBoss Portal 2.6. The cuirrent
+ definititions remain, but the newer additions with regards to dashboards/drag-n-drop have not been
+ documented as of yet.
+ </note>
+ <para>This document outlines the different selectors used to handle the layout and
+ look/feel of the Industrial theme included in the JBoss portal.
+ <itemizedlist>
<para>A couple of things to know about the theming approach discussed below:</para>
<listitem>Main premise behind this approach was to provide a clean separation between
the business and presentation layer of the portal. As we go through each selector
and explain the relation to the visual presentation on the page, this will become
- more apparent. </listitem>
+ more apparent.
+ </listitem>
<listitem>The flexibility of the selectors used in the theme stylesheet allow a
designer to very easily customize the visual aspects of the portal, thereby taking
the responsibility off of the developers hands through allowing the designer to
quickly achieve the desired effect w/out the need to dive down into code and/or
having to deploy changes to the portal. This saves time and allows both developers
- and designers to focus on what they do best.</listitem>
+ and designers to focus on what they do best.
+ </listitem>
<listitem>This theme incorporates a liquid layout approach which allows elements on a
page to expand/contract based on screen resolution and provides a consistent look
across varying display settings. However, the stylesheet is adaptable to
facilitate a fixed layout and/or combination approach where elements are pixel
- based and completely independent of viewport. </listitem>
+ based and completely independent of viewport.
+ </listitem>
<listitem>The pieces that make up the portal theme consist of at least one stylesheet
and any associated images. Having a consolidated set of files to control the
portal look and feel allows administrators to effortlessly swap themes on the fly.
In addition, this clean separation of the pieces that make up a specific theme
will enable sharing and collaboration of different themes by those looking to get
- involved or contribute to the open source initiative. </listitem>
+ involved or contribute to the open source initiative.
+ </listitem>
</itemizedlist>
</para>
</sect2>
<sect2>
<title>Main Screen Shot</title>
- <para> Screen shot using color outline of main ID selectors used to control presentation
- and layout: <para>
+ <para>Screen shot using color outline of main ID selectors used to control presentation
+ and layout:
+ <para>
<imageobject>
<imagedata fileref="images/themeguide/selector-outline.gif" format="gif"/>
</imageobject>
@@ -885,98 +974,102 @@
<para>
<itemizedlist>
<para>The following is a list of the selectors used in the theme stylesheet,
- including a brief explanation of how each selector is used in the portal:</para>
+ including a brief explanation of how each selector is used in the portal:
+ </para>
<listitem>
- <para> Portal Body Selector
+ <para>Portal Body Selector
<programlisting>
- #body {
- background-image: url(images/portal_background.gif);
- margin: 0px;
- padding: 0px;
- }
- </programlisting>
+ #body {
+ background-image: url(images/portal_background.gif);
+ margin: 0px;
+ padding: 0px;
+ }
+ </programlisting>
Usage: This selector controls the background of the page, and can be modified
to set a base font-family, layout margin, etc. that will be inherited by all
child elements that do not have their own individual style applied. By default,
- the selector pulls an image background for the page. </para>
+ the selector pulls an image background for the page.
+ </para>
</listitem>
<listitem>
- <para> Portal Header Selectors
+ <para>Portal Header Selectors
<programlisting>
- #spacer {
- width: 1024px;
- line-height: 0px;
- font-size: 0px;
- height: 0px;
- }
- </programlisting>
+ #spacer {
+ width: 1024px;
+ line-height: 0px;
+ font-size: 0px;
+ height: 0px;
+ }
+ </programlisting>
Usage: Spacer div used to keep header at certain width regardless of display
size. This is done to avoid overlapping of tab navigation in header. To account
for different display sizes, this selector can be modified to force a
horizontal scroll in the browser which eliminates any issue with overlapping
elements in the header.
<programlisting>
- #header-container {
- background-image: url(images/portal_background.gif);
- background-repeat: repeat-y;
- height: 100%;
- min-width: 1000px;
- width: 100%;
- /* test to reposition header on page
- position: absolute;
- bottom: 5px;*/
- }
- </programlisting>
+ #header-container {
+ background-image: url(images/portal_background.gif);
+ background-repeat: repeat-y;
+ height: 100%;
+ min-width: 1000px;
+ width: 100%;
+ /* test to reposition header on page
+ position: absolute;
+ bottom: 5px;*/
+ }
+ </programlisting>
Usage: Wrapper selector used to control the position of the header on the page
(see yellow border in screen shot). This selector is applied as an ID on the
table used to structure the header. You can adjust the attributes to reposition
the header location on the page and/or create margin space on the top, right,
- bottom and left sides of the header. <para> Screenshot: </para>
+ bottom and left sides of the header.
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/header.gif" format="gif"/>
</imageobject>
</para>
<programlisting>
- #header {
- background-image: url(images/header.gif);
- background-repeat: repeat-x;
- height: 100px;
- padding: 0px;
- /*margin: 0 25% 0 25%;*/
- }
- </programlisting>
+ #header {
+ background-image: url(images/header.gif);
+ background-repeat: repeat-x;
+ height: 100px;
+ padding: 0px;
+ /*margin: 0 25% 0 25%;*/
+ }
+ </programlisting>
Usage: This selector applies the header background image in the portal. It can
be adjusted to accommodate a header background of a certain width/height or, as
it currently does, repeat the header graphic so that it tiles across the header
portion of the page.
<programlisting>
- #logoName {
- background-image: url(images/JBossLogo.gif);
- background-repeat: no-repeat;
- width: 187px;
- height: 35px;
- position: absolute;
- left: 15px;
- top: 16px;
- z-index: 2;
- }
- </programlisting>
+ #logoName {
+ background-image: url(images/JBossLogo.gif);
+ background-repeat: no-repeat;
+ width: 187px;
+ height: 35px;
+ position: absolute;
+ left: 15px;
+ top: 16px;
+ z-index: 2;
+ }
+ </programlisting>
Usage: Logo selector which is used to brand the header with a specific,
customized logo. The style is applied as an ID on an absolutely positioned DIV
element which enables it to be moved to any location on the page, and allows it
- to be adjusted to accommodate a logo of any set width/height. </para>
+ to be adjusted to accommodate a logo of any set width/height.
+ </para>
</listitem>
<listitem>
- <para> Portal Layout Region Selectors
+ <para>Portal Layout Region Selectors
<programlisting>
- #portal-container {
- /*width: 100%;*/
-
- /*IE specific approach to preserve min-width for portlet regions */
- padding: 0 350px 0 350px;
- }
- </programlisting>
+ #portal-container {
+ /*width: 100%;*/
+
+ /*IE specific approach to preserve min-width for portlet regions */
+ padding: 0 350px 0 350px;
+ }
+ </programlisting>
Usage: Wrapper for entire portal which starts/ends after/before the BODY tag
(see red border in screen shot). The padding attribute for this selector is
used to preserve a minimum width setting for the portlet regions (discussed
@@ -985,1065 +1078,1094 @@
provides the design capability to accommodate most layouts (e.g. a centered
look such as the phalanx theme where there is some spacing around the content
of the portal, or a full width look as illustrated in the Industrial theme).
- <para> Screenshot: </para>
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/region-selectors.gif" format="gif"
- />
+ />
</imageobject>
</para>
<programlisting>
- /* min width for IE */
- #expander {
- margin: 0 -350px 0 -350px;
- position: relative;
- }
-
- /* min width for IE */
- #sizer {
- width: 100%;
- }
-
- /* IE min width \*/
- * html #portal-container,
- * html #sizer,
- * html #expander { height: 0; }
- </programlisting>
+ /* min width for IE */
+ #expander {
+ margin: 0 -350px 0 -350px;
+ position: relative;
+ }
+
+ /* min width for IE */
+ #sizer {
+ width: 100%;
+ }
+
+ /* IE min width \*/
+ * html #portal-container,
+ * html #sizer,
+ * html #expander { height: 0; }
+ </programlisting>
Usage: These selectors are used in conjunction with the above,
portal-container, selector to preserve a minimum width setting for the portlet
regions. This was implemented to maintain a consistent look across different
browsers.
<programlisting>
- /*table that contains all regions. does not include header*/
- #content-container {
- height: 100%;
- text-align:left;
- max-width: 1600px;
- min-width: 800px;
- }
- </programlisting>
+ /*table that contains all regions. does not include header*/
+ #content-container {
+ height: 100%;
+ text-align:left;
+ max-width: 1600px;
+ min-width: 800px;
+ }
+ </programlisting>
Usage: Wrapper that contains all regions in portal with the exception of the
header (see orange border in screen shot). Its attributes can be adjusted to
create margin space on page, as well as control positioning of the area of the
- page below the header. <para> Screenshot: </para>
+ page below the header.
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/content-container.gif" format="gif"
- />
+ />
</imageobject>
</para>
<programlisting>
- #regionA {
- /* test to swap columns with regionB...
- float: right; */
-
- width: 30%;
- float: left;
- margin: 0px;
- padding: 0px;
- min-width: 250px;
- }
- </programlisting>
+ #regionA {
+ /* test to swap columns with regionB...
+ float: right; */
+
+ width: 30%;
+ float: left;
+ margin: 0px;
+ padding: 0px;
+ min-width: 250px;
+ }
+ </programlisting>
Usage: First portlet region located within the content-container (see blue
border in screen shot). This selector controls the width of the region as well
as its location on the page. Designers can very easily reposition this region
in the portal (e.g. swap left regionA with right regionB, etc.) by adjusting
the attributes of this selector.
<programlisting>
- #regionB {
- /*test to swap columns with regionA...
- margin: 0 30% 0 0; */
-
- /* two column layout*/
- margin: 0 0 0 30%;
- padding: 0;
- width: 69%;
-
- /* test to add 3rd region in layout...
- width: 40%;
- float: left;*/
- }
- </programlisting>
+ #regionB {
+ /*test to swap columns with regionA...
+ margin: 0 30% 0 0; */
+
+ /* two column layout*/
+ margin: 0 0 0 30%;
+ padding: 0;
+ width: 69%;
+
+ /* test to add 3rd region in layout...
+ width: 40%;
+ float: left;*/
+ }
+ </programlisting>
Usage: Second portlet region located within the content-container (see blue
border in screen shot). Similar to regionA, this selector controls the width of
the region as well as its location on the page.
<programlisting>
- #regionC {
- /* inclusion of 3rd region - comment out for 2 region testing
- padding: 0px;
- width: 27%;
- float: left;*/
- display: none;
- }
- </programlisting>
+ #regionC {
+ /* inclusion of 3rd region - comment out for 2 region testing
+ padding: 0px;
+ width: 27%;
+ float: left;*/
+ display: none;
+ }
+ </programlisting>
Usage: Third portlet region located within the content-container (please refer
to blue border in screen shot representing regionA and regionB for an example).
Used for 3 column layout. Similar to regionA and regionB, this selector
controls the width of the region as well as its location on the page.
<programlisting>
- /* give a maximized portlet more space */
- #regionMaximized {
- width: 100%;
- float: left;
- margin: 0px;
- padding: 0px;
- min-width: 400px;
- }
- </programlisting>
+ /* give a maximized portlet more space */
+ #regionMaximized {
+ width: 100%;
+ float: left;
+ margin: 0px;
+ padding: 0px;
+ min-width: 400px;
+ }
+ </programlisting>
Usage: Portlet region located within the content-container (please refer to
blue border in screen shot representing regionA and regionB for an example).
Used for a one column layout to allow one portlet to take over the entire page.
Similar to regionA, regionB, and regionB, this selector controls the width of
- the region as well as its location on the page. <para> Screenshot: </para>
+ the region as well as its location on the page.
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/regions.gif" format="gif"/>
</imageobject>
</para>
<programlisting>
- hr.cleaner {
- clear:both;
- height:1px;
- margin: -1px 0 0 0;
- padding:0;
- border:none;
- visibility: hidden;
- }
- </programlisting>
+ hr.cleaner {
+ clear:both;
+ height:1px;
+ margin: -1px 0 0 0;
+ padding:0;
+ border:none;
+ visibility: hidden;
+ }
+ </programlisting>
Usage: Used to clear floats in regionA, regionB and regionC DIVs so that footer
spans bottom of page.
<programlisting>
- #footer-container {
- margin: 30px 25% 0 25%;
- text-align: center;
- }
- </programlisting>
+ #footer-container {
+ margin: 30px 25% 0 25%;
+ text-align: center;
+ }
+ </programlisting>
Usage: Footer region located towards the bottom of the content-container (see
above screen shot). This region spans the entire width of the page, but can be
adjusted (just like regionA, regionB and regionC) to take on a certain position
and width/height in the layout.
<programlisting>
- #navigation-container {}
- </programlisting>
+ #navigation-container {}
+ </programlisting>
Usage: Unused at this time.
<programlisting>
- #sub-navigation-container {}
- </programlisting>
- Usage: Unused at this time. </para>
+ #sub-navigation-container {}
+ </programlisting>
+ Usage: Unused at this time.
+ </para>
</listitem>
<listitem>
- <para> Tab Navigation Selectors for Header
+ <para>Tab Navigation Selectors for Header
<programlisting>
- UL#tabsHeader {
- margin: 0;
- padding-left: 300px;
- min-width: 550px;
- }
- </programlisting>
+ UL#tabsHeader {
+ margin: 0;
+ padding-left: 300px;
+ min-width: 550px;
+ }
+ </programlisting>
Usage: Used to provide position (through padding attribute) of tabbed
navigational items in header. A padding-left of 300px gives space for the left
hand logo area and can be adjusted as needed to set the desired location for
the navigation.
<programlisting>
- UL#tabsHeader li {
- list-style: none;
- float: left;
- margin-left: 0px;
- margin-top: 74px;
- margin-right: 0px;
- line-height: 24px;
- padding: 0px;
- border-left: 1px solid #72828E;
- }
- </programlisting>
+ UL#tabsHeader li {
+ list-style: none;
+ float: left;
+ margin-left: 0px;
+ margin-top: 74px;
+ margin-right: 0px;
+ line-height: 24px;
+ padding: 0px;
+ border-left: 1px solid #72828E;
+ }
+ </programlisting>
Usage: Selector used to style list items as horizontal navigation and to set
the spacing and position of each nav item that's available.
<programlisting>
- UL#tabsHeader li:hover {
- background-image: url(images/highlightedTab.gif);
- background-repeat: repeat-x;
- }
- </programlisting>
+ UL#tabsHeader li:hover {
+ background-image: url(images/highlightedTab.gif);
+ background-repeat: repeat-x;
+ }
+ </programlisting>
Usage: Used to provide hover pseudo class on navigation items so that the tab
background will change upon mouseover. Note that currently IE only supports the
hover pseudo class on links, so this selector will only affect non-IE browsers
(e.g. FireFox, etc.).
<programlisting>
- UL#tabsHeader li.hoverOn {
- background-image: url(images/highlightedTab.gif);
- background-repeat: repeat-x;
- }
-
- UL#tabsHeader li.hoverOff {
- background-image:none;
- }
- </programlisting>
+ UL#tabsHeader li.hoverOn {
+ background-image: url(images/highlightedTab.gif);
+ background-repeat: repeat-x;
+ }
+
+ UL#tabsHeader li.hoverOff {
+ background-image:none;
+ }
+ </programlisting>
Usage: These two selectors are implemented to account for the fact that IE
cannot understand the use of a pseudo class on the LI element. They provide the
same mouseover effect as the “UL#tabsHeader li:hover�? selector when hovering
the navigation item in IE, and are used in combination with
- onmouseover/onmouseout event handlers in the header navigation: <programlisting>
- <![CDATA[
+ onmouseover/onmouseout event handlers in the header navigation:
+ <programlisting>
+ <![CDATA[
<li onmouseover="this.className='hoverOn'" onmouseout="this.className='hoverOff'">
<a href="#">Tab Nav</a>
</li>
]]></programlisting>
<programlisting>
- UL#tabsHeader a {
- display: block;
- float: left;
- padding: 4px 15px 5px 15px;
- text-decoration: none;
- font: 13px/normal Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- background: 100% 0 no-repeat;
- color: #596874;
- }
- </programlisting>
+ UL#tabsHeader a {
+ display: block;
+ float: left;
+ padding: 4px 15px 5px 15px;
+ text-decoration: none;
+ font: 13px/normal Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ background: 100% 0 no-repeat;
+ color: #596874;
+ }
+ </programlisting>
Usage: This selector styles the navigational links, indicating padding
surrounding the link as well as font family, color and text-decoration.
<programlisting>
- UL#tabsHeader a:hover {
- text-decoration: underline;
- }
- </programlisting>
+ UL#tabsHeader a:hover {
+ text-decoration: underline;
+ }
+ </programlisting>
Usage: Used to underline navigational links when hovering with mouse. Unlike
the li:hover pseudo class, IE does support the hover effect on links, so there
is no need for a separate set of selectors to deal with this effect.
<programlisting>
- UL#tabsHeader #current, UL#tabsHeader #current a {
- font: 13px/normal Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-weight: 600;
- color: #EBEAEA;
- background-image: url(images/activeTab.gif);
- background-repeat: repeat-x;
- border-right: 0px;
- border-left: 0px;
- }
- </programlisting>
+ UL#tabsHeader #current, UL#tabsHeader #current a {
+ font: 13px/normal Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-weight: 600;
+ color: #EBEAEA;
+ background-image: url(images/activeTab.gif);
+ background-repeat: repeat-x;
+ border-right: 0px;
+ border-left: 0px;
+ }
+ </programlisting>
Usage: This selector is set on the current/selected navigation item to style
both the background of the tab as well as font properties such as color and
- weight. Example: <programlisting>
- <![CDATA[
+ weight. Example:
+ <programlisting>
+ <![CDATA[
<li id="current" onmouseover="this.className='hoverOn'" onmouseout="this.className='hoverOff'">
<a href="#">Tab Nav</a>
</li>
]]></programlisting>
<programlisting>
- /* backslash for IE5-Mac \*/
- UL#tabsHeader a {float: none;} /* End Mac Hack */
- html>body UL#tabsHeader a {width: auto;} /* fixes IE issues */
- </programlisting>
+ /* backslash for IE5-Mac \*/
+ UL#tabsHeader a {float: none;} /* End Mac Hack */
+ html>body UL#tabsHeader a {width: auto;} /* fixes IE issues */
+ </programlisting>
Usage: Also known in the industry as an example of the “Holly Hack�?, the above
is added to the stylesheet to handle certain buggy issues with IE. This section
of the stylesheet should be left alone as subsequent changes can effect the way
things behave in IE.
<programlisting>
- li.currentTabBackground {
- background: #fff;
- }
-
- li.currentTabBackgroundSubNav {
- background: #eeeeef;
- }
- </programlisting>
+ li.currentTabBackground {
+ background: #fff;
+ }
+
+ li.currentTabBackgroundSubNav {
+ background: #eeeeef;
+ }
+ </programlisting>
Usage: The above two selectors are not currently in use. Included to account
for future changes to the navigation where multiple tiers/levels might be
- incorporated. </para>
+ incorporated.
+ </para>
</listitem>
<listitem>
- <para> Portlet Container Window Selectors
+ <para>Portlet Container Window Selectors
<programlisting>
- .portlet-container {
- padding: 10px;
- }
- </programlisting>
+ .portlet-container {
+ padding: 10px;
+ }
+ </programlisting>
Usage: Wrapper that surrounds the portlet windows (see green border in screen
shot). Currently, this selector is used to create space (padding) between the
- portlets displayed in each particular region. <para> Screenshot: </para>
+ portlets displayed in each particular region.
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/portlet-container.gif" format="gif"
- />
+ />
</imageobject>
</para>
<programlisting>
- .portlet-titlebar-title {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 11px;
- font-weight: 500;
- color: #596874;
- white-space: nowrap;
- line-height: 100%;
- float: left;
- text-indent: 15px;
- }
- </programlisting>
+ .portlet-titlebar-title {
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 11px;
+ font-weight: 500;
+ color: #596874;
+ white-space: nowrap;
+ line-height: 100%;
+ float: left;
+ text-indent: 15px;
+ }
+ </programlisting>
Usage: Class used to style the title of each portlet window. Attributes of this
selector set font properties, indentation and position of title.
<programlisting>
- .portlet-titlebar-decoration {
- background-image: url(images/portlet-win-decoration.gif);
- background-repeat: no-repeat;
- height: 11px;
- width: 11px;
- float: left;
- position: relative;
- top: 6px;
- }
- </programlisting>
+ .portlet-titlebar-decoration {
+ background-image: url(images/portlet-win-decoration.gif);
+ background-repeat: no-repeat;
+ height: 11px;
+ width: 11px;
+ float: left;
+ position: relative;
+ top: 6px;
+ }
+ </programlisting>
Usage: Used to display top left portlet window decoration (e.g. sphere icon in
Industrial theme). Attributes for this selector set position and dimensions of
this decoration.
<programlisting>
- .portlet-mode-container {
- float: right;
- }
- </programlisting>
+ .portlet-mode-container {
+ float: right;
+ }
+ </programlisting>
Usage: Wrapper that contains the portlet window modes that display in the top
right section of the portlet windows.
<programlisting>
- .portlet-titlebar-left {
- background-image: url(images/portlet-top-left.gif);
- background-repeat: no-repeat;
- width: 9px;
- height: 33px;
- background-position: right;
- min-width: 9px;
- }
- </programlisting>
+ .portlet-titlebar-left {
+ background-image: url(images/portlet-top-left.gif);
+ background-repeat: no-repeat;
+ width: 9px;
+ height: 33px;
+ background-position: right;
+ min-width: 9px;
+ }
+ </programlisting>
Usage: Used to style the top left corner of the portlet window. Each portlet
window consists of one table that has 3 columns and 3 rows. This selector
- styles the first column (TD) in the first row (TR). <para> Screenshot: </para>
+ styles the first column (TD) in the first row (TR).
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/portlet-titlebar-left.gif"
- format="gif"/>
+ format="gif"/>
</imageobject>
</para>
<programlisting>
- .portlet-titlebar-center {
- background-image: url(images/portlet-top-middle.gif);
- background-repeat: repeat-x;
- height: 33px;
- }
- </programlisting>
+ .portlet-titlebar-center {
+ background-image: url(images/portlet-top-middle.gif);
+ background-repeat: repeat-x;
+ height: 33px;
+ }
+ </programlisting>
Usage: Used to style the center section of the portlet title bar. Each portlet
window consists of one table that has 3 columns and 3 rows. This selector
- styles the second column (TD) in the first row (TR). <para> Screenshot: </para>
+ styles the second column (TD) in the first row (TR).
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/portlet-titlebar-center.gif"
- format="gif"/>
+ format="gif"/>
</imageobject>
</para>
<programlisting>
- .portlet-titlebar-right {
- background-image: url(images/portlet-top-right.gif);
- background-repeat: no-repeat;
- width: 10px;
- height: 33px;
- min-width: 10px;
- }
- </programlisting>
+ .portlet-titlebar-right {
+ background-image: url(images/portlet-top-right.gif);
+ background-repeat: no-repeat;
+ width: 10px;
+ height: 33px;
+ min-width: 10px;
+ }
+ </programlisting>
Usage: Used to style the top right corner of the portlet window. Each portlet
window consists of one table that has 3 columns and 3 rows. This selector
- styles the third column (TD) in the first row (TR). <para> Screenshot: </para>
+ styles the third column (TD) in the first row (TR).
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/portlet-titlebar-right.gif"
- format="gif"/>
+ format="gif"/>
</imageobject>
</para>
<programlisting>
- .portlet-content-left {
- background-image: url(images/portlet-left-vertical.gif);
- height: 100%;
- background-repeat: repeat-y;
- background-position: right;
- width: 9px;
- min-width: 9px;
- }
- </programlisting>
+ .portlet-content-left {
+ background-image: url(images/portlet-left-vertical.gif);
+ height: 100%;
+ background-repeat: repeat-y;
+ background-position: right;
+ width: 9px;
+ min-width: 9px;
+ }
+ </programlisting>
Usage: Used to style the left hand vertical lines that make up the portlet
window. Each portlet window consists of one table that has 3 columns and 3
- rows. This selector styles the first column (TD) in the second row (TR). <para>
- Screenshot: </para>
+ rows. This selector styles the first column (TD) in the second row (TR).
<para>
+ Screenshot:
+ </para>
+ <para>
<imageobject>
<imagedata fileref="images/themeguide/portlet-content-left.gif"
- format="gif"/>
+ format="gif"/>
</imageobject>
</para>
<programlisting>
- .portlet-content-center {
- background-color: #f7f7f7;
- background-repeat: repeat;
- vertical-align: top;
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 13px;
- }
- </programlisting>
+ .portlet-content-center {
+ background-color: #f7f7f7;
+ background-repeat: repeat;
+ vertical-align: top;
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 13px;
+ }
+ </programlisting>
Usage: Used to style the center, content area where the portlet content is
injected into the portlet window (see below screen). Attributes for this
selector control the positioning of the portlet content as well as the
background and font properties. Each portlet window consists of one table that
has 3 columns and 3 rows. This selector styles the second column (TD) in the
- second row (TR). <para> Screenshot: </para>
+ second row (TR).
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/portlet-content-center.gif"
- format="gif"/>
+ format="gif"/>
</imageobject>
</para>
<programlisting>
- .portlet-body {
- background-color: #f7f7f7;
- }
- </programlisting>
+ .portlet-body {
+ background-color: #f7f7f7;
+ }
+ </programlisting>
Usage: An extra selector for controlling the content section of the portlet
windows (see below screen). This was added to better deal with structuring the
content that gets inserted/rendered in the portlet windows, specifically if the
- content is causing display problems in a portlet. <para> Screenshot: </para>
+ content is causing display problems in a portlet.
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/portlet-body.gif" format="gif"/>
</imageobject>
</para>
<programlisting>
- .portlet-content-right {
- background-image: url(images/portlet-right-vertical.gif);
- height: 100%;
- background-repeat: repeat-y;
- background-position: left;
- width: 10px;
- min-width: 10px;
- }
- </programlisting>
+ .portlet-content-right {
+ background-image: url(images/portlet-right-vertical.gif);
+ height: 100%;
+ background-repeat: repeat-y;
+ background-position: left;
+ width: 10px;
+ min-width: 10px;
+ }
+ </programlisting>
Usage: Used to style the right hand vertical lines that make up the portlet
window. Each portlet window consists of one table that has 3 columns and 3
- rows. This selector styles the third column (TD) in the second row (TR). <para>
- Screenshot: </para>
+ rows. This selector styles the third column (TD) in the second row (TR).
<para>
+ Screenshot:
+ </para>
+ <para>
<imageobject>
<imagedata fileref="images/themeguide/portlet-content-right.gif"
- format="gif"/>
+ format="gif"/>
</imageobject>
</para>
<programlisting>
- .portlet-footer-left {
- background-image: url(images/portlet-bottom-left.gif);
- width: 9px;
- height: 9px;
- background-repeat: no-repeat;
- background-position: top right;
- min-width: 9px;
- }
- </programlisting>
+ .portlet-footer-left {
+ background-image: url(images/portlet-bottom-left.gif);
+ width: 9px;
+ height: 9px;
+ background-repeat: no-repeat;
+ background-position: top right;
+ min-width: 9px;
+ }
+ </programlisting>
Usage: Used to style the bottom left corner of the portlet window. Each portlet
window consists of one table that has 3 columns and 3 rows. This selector
- styles the first column (TD) in the third row (TR). <para> Screenshot: </para>
+ styles the first column (TD) in the third row (TR).
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/portlet-footer-left.gif"
- format="gif"/>
+ format="gif"/>
</imageobject>
</para>
<programlisting>
- .portlet-footer-center {
- background-image: url(images/portlet-bottom-middle.gif);
- height: 14px;
- background-repeat: repeat-x;
- }
- </programlisting>
+ .portlet-footer-center {
+ background-image: url(images/portlet-bottom-middle.gif);
+ height: 14px;
+ background-repeat: repeat-x;
+ }
+ </programlisting>
Usage: Used to style the bottom, center of the portlet window (i.e. the bottom
horizontal line in the Industrial theme). Each portlet window consists of one
table that has 3 columns and 3 rows. This selector styles the second column
- (TD) in the third row (TR). <para> Screenshot: </para>
+ (TD) in the third row (TR).
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/portlet-footer-center.gif"
- format="gif"/>
+ format="gif"/>
</imageobject>
</para>
<programlisting>
- .portlet-footer-right {
- background-image: url(images/portlet-bottom-right.gif);
- width: 10px;
- height: 9px;
- background-repeat: no-repeat;
- min-width: 10px;
- }
- </programlisting>
+ .portlet-footer-right {
+ background-image: url(images/portlet-bottom-right.gif);
+ width: 10px;
+ height: 9px;
+ background-repeat: no-repeat;
+ min-width: 10px;
+ }
+ </programlisting>
Usage: Used to style the bottom right corner of the portlet window. Each
portlet window consists of one table that has 3 columns and 3 rows. This
- selector styles the third column (TD) in the third row (TR). <para> Screenshot: </para>
+ selector styles the third column (TD) in the third row (TR).
+ <para>Screenshot:</para>
<para>
<imageobject>
<imagedata fileref="images/themeguide/portlet-footer-right.gif"
- format="gif"/>
+ format="gif"/>
</imageobject>
</para>
</para>
</listitem>
<listitem>
- <para> Portlet Window Mode Selectors
+ <para>Portlet Window Mode Selectors
<programlisting>
- .portlet-mode-maximized {
- background-image: url(images/maximize.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ .portlet-mode-maximized {
+ background-image: url(images/maximize.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
Usage: Selector used to display the portlet maximize mode. Attributes for this
selector control the display and dimensions of the maximize icon, including the
behavior of the mouse pointer when hovering the mode.
<programlisting>
- .portlet-mode-minimized {
- background-image: url(images/minimize.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ .portlet-mode-minimized {
+ background-image: url(images/minimize.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
Usage: Selector used to display the portlet minimize mode. Attributes for this
selector control the display and dimensions of the minimize icon, including the
behavior of the mouse pointer when hovering the mode.
<programlisting>
- .portlet-mode-normal {
- background-image: url(images/normal.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ .portlet-mode-normal {
+ background-image: url(images/normal.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
Usage: Selector used to display the portlet normal mode (i.e. the icon that
when clicked, restores the portlet to the original, default view). Attributes
for this selector control the display and dimensions of the normal icon,
including the behavior of the mouse pointer when hovering the mode.
<programlisting>
- .portlet-mode-help {
- background-image: url(images/help.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ .portlet-mode-help {
+ background-image: url(images/help.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
Usage: Selector used to display the portlet help mode. Attributes for this
selector control the display and dimensions of the help icon, including the
behavior of the mouse pointer when hovering the mode.
<programlisting>
- .portlet-mode-edit {
- background-image: url(images/edit.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ .portlet-mode-edit {
+ background-image: url(images/edit.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
Usage: Selector used to display the portlet edit mode. Attributes for this
selector control the display and dimensions of the edit icon, including the
behavior of the mouse pointer when hovering the mode.
<programlisting>
- .portlet-mode-remove {
- background-image: url(images/remove.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ .portlet-mode-remove {
+ background-image: url(images/remove.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
Usage: Currently not available. But here is the intended use: Selector used to
display the portlet remove mode. Attributes for this selector control the
display and dimensions of the remove icon, including the behavior of the mouse
pointer when hovering the mode.
<programlisting>
- .portlet-mode-view {
- background-image: url(images/view.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ .portlet-mode-view {
+ background-image: url(images/view.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
Usage: Selector used to display the portlet view mode. Attributes for this
selector control the display and dimensions of the view icon, including the
behavior of the mouse pointer when hovering the mode.
<programlisting>
- .portlet-mode-reload {
- background-image: url(images/reload.gif);
- width: 16px;
- height: 23px;
- background-repeat: no-repeat;
- float: left;
- display: inline;
- cursor: pointer;
- }
- </programlisting>
+ .portlet-mode-reload {
+ background-image: url(images/reload.gif);
+ width: 16px;
+ height: 23px;
+ background-repeat: no-repeat;
+ float: left;
+ display: inline;
+ cursor: pointer;
+ }
+ </programlisting>
Usage: Currently not available. But here is the intended use: Selector used to
display the portlet reload mode. Attributes for this selector control the
display and dimensions of the reload icon, including the behavior of the mouse
- pointer when hovering the mode. </para>
+ pointer when hovering the mode.
+ </para>
</listitem>
<listitem>
- <para> Copyright Selectors
+ <para>Copyright Selectors
<programlisting>
- .portal-copyright {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- color: #5E6D7A;
- }
-
- a.portal-copyright {
- color: #768591;
- text-decoration: none;
- }
-
- a.portal-copyright:hover {
- color: #96A5B1;
- text-decoration: none;
- }
- </programlisting>
+ .portal-copyright {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ color: #5E6D7A;
+ }
+
+ a.portal-copyright {
+ color: #768591;
+ text-decoration: none;
+ }
+
+ a.portal-copyright:hover {
+ color: #96A5B1;
+ text-decoration: none;
+ }
+ </programlisting>
Usage: The above three selectors are used to style copyright content in the
portal. The portal-copyright selector sets the font properties (color, etc.),
and the a.portal-copyright/a.portal-copyright:hover selectors style any links
- that are part of the copyright information. </para>
+ that are part of the copyright information.
+ </para>
</listitem>
<listitem>
- <para> Element Selectors
+ <para>Element Selectors
<programlisting>
- a {
- color: #768591;
- text-decoration: none;
- }
- a:hover {
- color: #96A5B1;
- text-decoration: none;
- }
- </programlisting>
+ a {
+ color: #768591;
+ text-decoration: none;
+ }
+ a:hover {
+ color: #96A5B1;
+ text-decoration: none;
+ }
+ </programlisting>
Usage: The above two selectors style all anchor elements that do not have their
own class/selector applied.
<programlisting>
- INPUT {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 10px;
- }
- </programlisting>
+ INPUT {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 10px;
+ }
+ </programlisting>
Usage: The above selector styles all INPUT elements that do not have their own
class/selector applied.
<programlisting>
- SELECT {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 10px;
- }
- </programlisting>
+ SELECT {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 10px;
+ }
+ </programlisting>
Usage: The above selector styles all SELECT elements that do not have their own
class/selector applied.
<programlisting>
- FONT {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 10px;
- color: #768591;
- }
- </programlisting>
+ FONT {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 10px;
+ color: #768591;
+ }
+ </programlisting>
Usage: The above selector styles all FONT elements that do not have their own
class/selector applied.
<programlisting>
- FIELDSET {
- background-color: #f7f7f7;
- border:1px solid #BABDB6;
- padding: 6px;
- }
- </programlisting>
+ FIELDSET {
+ background-color: #f7f7f7;
+ border:1px solid #BABDB6;
+ padding: 6px;
+ }
+ </programlisting>
Usage: The above selector styles all FIELDSET elements that do not have their
own class/selector applied.
<programlisting>
- LEGEND {
- background-color: transparent;
- padding-left: 6px;
- padding-right: 6px;
- padding-bottom: 0px;
- font-size: 14px;
- }
- </programlisting>
+ LEGEND {
+ background-color: transparent;
+ padding-left: 6px;
+ padding-right: 6px;
+ padding-bottom: 0px;
+ font-size: 14px;
+ }
+ </programlisting>
Usage: The above selector styles all LEGEND elements that do not have their own
- class/selector applied. </para>
+ class/selector applied.
+ </para>
</listitem>
<listitem>
- <para> Table Selectors
+ <para>Table Selectors
<programlisting>
- .portlet-table-header {}
- </programlisting>
+ .portlet-table-header {}
+ </programlisting>
Usage: Not currently in use. Intended for styling tables (specifically, the TH
or table header elements) that get rendered within a portlet window.
<programlisting>
- .portlet-table-body {}
- </programlisting>
+ .portlet-table-body {}
+ </programlisting>
Usage: Not currently in use. Intended for styling the table body element used
to group rows in a table.
<programlisting>
- .portlet-table-alternate {}
- </programlisting>
+ .portlet-table-alternate {}
+ </programlisting>
Usage: Not currently in use. Used to style the background color (and possibly
other attributes) for every other row within a table.
<programlisting>
- .portlet-table-selected {}
- </programlisting>
+ .portlet-table-selected {}
+ </programlisting>
Usage: Not currently in use. Used to style text, color, etc. in a selected cell
range.
<programlisting>
- .portlet-table-subheader {}
- </programlisting>
+ .portlet-table-subheader {}
+ </programlisting>
Usage: Not currently in use. Used to style a subheading within a table that
gets rendered in a portlet.
<programlisting>
- .portlet-table-footer {}
- </programlisting>
+ .portlet-table-footer {}
+ </programlisting>
Usage: Not currently in use. Similar to portlet-table-header and
portlet-table-body, this selector is used to style the table footer element
which is used to group the footer row in a table.
<programlisting>
- .portlet-table-text {}
- </programlisting>
+ .portlet-table-text {}
+ </programlisting>
Usage: Text that belongs to the table but does not fall in one of the other
categories (e.g. explanatory or help text that is associated with the table).
This selector can also be modified to provide styled text that can be used in
- all tables that are rendered within a portlet. </para>
+ all tables that are rendered within a portlet.
+ </para>
</listitem>
<listitem>
- <para> FONT Selectors
+ <para>FONT Selectors
<programlisting>
- .portlet-font {
- color:#000;
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 10px;
- }
- </programlisting>
+ .portlet-font {
+ color:#000;
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 10px;
+ }
+ </programlisting>
Usage: Used to style the font properties on text used in a portlet. Typically
this class is used for the display of non-accentuated information.
<programlisting>
- .portlet-font-dim {
- color:#888385;
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 10px;
- }
- </programlisting>
- Usage: A lighter version (color-wise) of the portlet-font selector. </para>
+ .portlet-font-dim {
+ color:#888385;
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 10px;
+ }
+ </programlisting>
+ Usage: A lighter version (color-wise) of the portlet-font selector.
+ </para>
</listitem>
<listitem>
- <para> FORM Selectors
+ <para>FORM Selectors
<programlisting>
- .portlet-form-label {
- color:#4A4A4A;
- text-decoration:none;
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- }
- </programlisting>
+ .portlet-form-label {
+ color:#4A4A4A;
+ text-decoration:none;
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ }
+ </programlisting>
Usage: Text used for the descriptive label of an entire form (not the label for
each actual form field).
<programlisting>
- .portlet-form-button {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #270F07;
- }
- </programlisting>
+ .portlet-form-button {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #270F07;
+ }
+ </programlisting>
Usage: Used to style portlet form buttons (e.g. Submit).
<programlisting>
- .portlet-icon-label {}
- </programlisting>
+ .portlet-icon-label {}
+ </programlisting>
Usage: Not currently in use. Text that appears beside a context dependent
action icon.
<programlisting>
- .portlet-dlg-icon-label {}
- </programlisting>
+ .portlet-dlg-icon-label {}
+ </programlisting>
Usage: Not currently in use. Text that appears beside a "standard" icon (e.g
Ok, or Cancel).
<programlisting>
- .portlet-form-field-label {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- color: #4A4A4A;
- }
- </programlisting>
+ .portlet-form-field-label {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ color: #4A4A4A;
+ }
+ </programlisting>
Usage: Selector used to style portlet form field labels.
<programlisting>
- .portlet-form-field {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- color: #4A4A4A;
- margin-top: 10px;
- }
- </programlisting>
+ .portlet-form-field {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ color: #4A4A4A;
+ margin-top: 10px;
+ }
+ </programlisting>
Usage: Selector used to style portlet form fields (i.e. INPUT controls, SELECT
- elements, etc.). </para>
+ elements, etc.).
+ </para>
</listitem>
<listitem>
- <para> LINK Selectors
+ <para>LINK Selectors
<programlisting>
- .portal-links:link {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #242424;
- text-decoration: none;
- }
-
- .portal-links:hover {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #5699B7;
- text-decoration: none;
- }
-
- .portal-links:active {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #242424;
- text-decoration: none;
- }
-
- .portal-links:visited {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #242424;
- text-decoration: none;
- }
- </programlisting>
+ .portal-links:link {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #242424;
+ text-decoration: none;
+ }
+
+ .portal-links:hover {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #5699B7;
+ text-decoration: none;
+ }
+
+ .portal-links:active {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #242424;
+ text-decoration: none;
+ }
+
+ .portal-links:visited {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #242424;
+ text-decoration: none;
+ }
+ </programlisting>
Usage: The above four selectors are used to style links in the portal. Each
pseudo class (i.e. hover, active, etc.) provides a different link style.
</para>
</listitem>
<listitem>
- <para> MESSAGE Selectors
+ <para>MESSAGE Selectors
<programlisting>
- .portlet-msg-status {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 10px;
- font-style: normal;
- color: #788793;
- }
- </programlisting>
+ .portlet-msg-status {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 10px;
+ font-style: normal;
+ color: #788793;
+ }
+ </programlisting>
Usage: Selector used to signify the status of a current operation that takes
place in the portlet (e.g. “saving results�?, “step 1 of 4�?).
<programlisting>
- .portlet-msg-info {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-style: italic;
- color: #000;
- }
- </programlisting>
+ .portlet-msg-info {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-style: italic;
+ color: #000;
+ }
+ </programlisting>
Usage: Selector used to signify general information in a portlet (e.g. help
messages).
<programlisting>
- .portlet-msg-error {
- color:red;
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- }
- </programlisting>
+ .portlet-msg-error {
+ color:red;
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ }
+ </programlisting>
Usage: Selector used to signify an error message in the portlet (e.g. form
validation error).
<programlisting>
- .portlet-msg-alert {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #821717;
- }
- </programlisting>
+ .portlet-msg-alert {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #821717;
+ }
+ </programlisting>
Usage: Selector used to style an alert that is displayed to the user.
<programlisting>
- .portlet-msg-success {
- font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
- font-size: 9px;
- font-weight: bold;
- color: #359630;
- }
- </programlisting>
+ .portlet-msg-success {
+ font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
+ font-size: 9px;
+ font-weight: bold;
+ color: #359630;
+ }
+ </programlisting>
Usage: Selector used to indicate successful completion of an action in a
- portlet (e.g. “save successful�?). </para>
+ portlet (e.g. “save successful�?).
+ </para>
</listitem>
<listitem>
- <para> SECTION Selectors
+ <para>SECTION Selectors
<programlisting>
- .portlet-section-header {
- font-weight: bold;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 13px;
- color: #768591;
- background-color: #f7f7f7;
- }
- </programlisting>
+ .portlet-section-header {
+ font-weight: bold;
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 13px;
+ color: #768591;
+ background-color: #f7f7f7;
+ }
+ </programlisting>
Usage: Table or section header.
<programlisting>
- .portlet-section-body {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 10px;
- }
- </programlisting>
+ .portlet-section-body {
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 10px;
+ }
+ </programlisting>
Usage: Normal text in a table cell.
<programlisting>
- .portlet-section-alternate {
- background-color: #ececed;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 9px;
- }
- </programlisting>
+ .portlet-section-alternate {
+ background-color: #ececed;
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 9px;
+ }
+ </programlisting>
Usage: Used to style background color and text in every other table row.
<programlisting>
- .portlet-section-selected {
- background-color: #89AEC6;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 9px;
- }
- </programlisting>
+ .portlet-section-selected {
+ background-color: #89AEC6;
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 9px;
+ }
+ </programlisting>
Usage: Used to style background and font properties in a selected cell range.
<programlisting>
- .portlet-section-subheader {
- font-weight: bold;
- font-size: 10px;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- color: #000;
- }
- </programlisting>
+ .portlet-section-subheader {
+ font-weight: bold;
+ font-size: 10px;
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ color: #000;
+ }
+ </programlisting>
Usage: Used to style a subheading within a table/section that gets rendered in
a portlet.
<programlisting>
- .portlet-section-footer {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- background-color: #f7f7f7;
- font-size: 8px;
- }
- </programlisting>
+ .portlet-section-footer {
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ background-color: #f7f7f7;
+ font-size: 8px;
+ }
+ </programlisting>
Usage: Used to style footer area of a section/table that gets rendered in a
portlet.
<programlisting>
- .portlet-section-text {}
- </programlisting>
+ .portlet-section-text {}
+ </programlisting>
Usage: Not currently used. Text that belongs to a section but does not fall in
one of the other categories. This selector can also be modified to provide
styled text that can be used in all sections that are rendered within a
- portlet. </para>
+ portlet.
+ </para>
</listitem>
<listitem>
- <para> MENU Selectors
+ <para>MENU Selectors
<programlisting>
- .portlet-menu {}
- </programlisting>
+ .portlet-menu {}
+ </programlisting>
Usage: Not currently used. General menu settings such as background color,
margins, etc.
<programlisting>
- .portlet-menu-item {
- color: #242424;
- text-decoration: none;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 9px;
- }
- </programlisting>
+ .portlet-menu-item {
+ color: #242424;
+ text-decoration: none;
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 9px;
+ }
+ </programlisting>
Usage: Not currently used. Normal, unselected menu item.
<programlisting>
- .portlet-menu-item:hover {
- color: #5699B7;
- text-decoration: none;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 9px;
- }
- </programlisting>
+ .portlet-menu-item:hover {
+ color: #5699B7;
+ text-decoration: none;
+ font-family: Verdana, Arial, Helvetica, sans-serif;
+ font-size: 9px;
+ }
+ </programlisting>
Usage: Not currently used. Used to style hover effect on a normal, unselected
menu item.
<programlisting>
- .portlet-menu-item-selected {}
- </programlisting>
+ .portlet-menu-item-selected {}
+ </programlisting>
Usage: Not currently used. Applies to selected menu items.
<programlisting>
- .portlet-menu-item-selected:hover {
-
- }
- </programlisting>
+ .portlet-menu-item-selected:hover {
+
+ }
+ </programlisting>
Usage: Not currently used. Selector styles the hover effect on a selected menu
item.
<programlisting>
- .portlet-menu-cascade-item {}
- </programlisting>
+ .portlet-menu-cascade-item {}
+ </programlisting>
Usage: Not currently used. Normal, unselected menu item that has sub-menus.
<programlisting>
- .portlet-menu-cascade-item-selected {}
- </programlisting>
+ .portlet-menu-cascade-item-selected {}
+ </programlisting>
Usage: Not currently used. Selected sub-menu item.
<programlisting>
- .portlet-menu-description {}
- </programlisting>
+ .portlet-menu-description {}
+ </programlisting>
Usage: Not currently used. Descriptive text for the menu (e.g. in a help
context below the menu).
<programlisting>
- .portlet-menu-caption {}
- </programlisting>
- Usage: Not currently used. Selector used to style menu captions. </para>
+ .portlet-menu-caption {}
+ </programlisting>
+ Usage: Not currently used. Selector used to style menu captions.
+ </para>
</listitem>
<listitem>
- <para> WSRP Selectors
+ <para>WSRP Selectors
<programlisting>
- .portlet-horizontal-separator {}
- </programlisting>
+ .portlet-horizontal-separator {}
+ </programlisting>
Usage: Not currently used. A separator bar similar to a horizontal rule, but
with styling matching the page.
<programlisting>
- .portlet-nestedTitle-bar {}
- </programlisting>
+ .portlet-nestedTitle-bar {}
+ </programlisting>
Usage: Not currently used. Allows portlets to mimic the title bar when nesting
something.
<programlisting>
- .portlet-nestedTitle {}
- </programlisting>
+ .portlet-nestedTitle {}
+ </programlisting>
Usage: Not currently used. Allows portlets to match the textual character of
the title on the title bar.
<programlisting>
- .portlet-tab {}
- </programlisting>
+ .portlet-tab {}
+ </programlisting>
Usage: Not currently used. Support portlets having tabs in the same style as
the page or other portlets.
<programlisting>
- .portlet-tab-active {}
- </programlisting>
+ .portlet-tab-active {}
+ </programlisting>
Usage: Not currently used. Highlight the tab currently being shown.
<programlisting>
- .portlet-tab-selected {}
- </programlisting>
+ .portlet-tab-selected {}
+ </programlisting>
Usage: Not currently used. Highlight the selected tab (not yet active).
<programlisting>
- .portlet-tab-disabled {}
- </programlisting>
+ .portlet-tab-disabled {}
+ </programlisting>
Usage: Not currently used. A tab which can not be currently activated.
<programlisting>
- .portlet-tab-area {}
- </programlisting>
- Usage: Not currently used. Top level style for the content of a tab. </para>
+ .portlet-tab-area {}
+ </programlisting>
+ Usage: Not currently used. Top level style for the content of a tab.
+ </para>
</listitem>
</itemizedlist>
</para>
Added: docs/trunk/userGuide/en/images/setup/default_ss.jpg
===================================================================
(Binary files differ)
Property changes on: docs/trunk/userGuide/en/images/setup/default_ss.jpg
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Modified: docs/trunk/userGuide/en/modules/overview.xml
===================================================================
--- docs/trunk/userGuide/en/modules/overview.xml 2006-10-13 18:44:54 UTC (rev 5446)
+++ docs/trunk/userGuide/en/modules/overview.xml 2006-10-13 18:58:37 UTC (rev 5447)
@@ -2,7 +2,7 @@
<title>JBoss Portal - Overview</title>
<para>
<imageobject>
- <imagedata fileref="images/setup/default_ss.gif" format="gif" align="center"
+ <imagedata fileref="images/setup/default_ss.jpg" format="jpg" align="center"
valign="middle"/>
</imageobject>
</para>
More information about the jboss-svn-commits
mailing list