Author: smumford
Date: 2011-11-29 23:57:54 -0500 (Tue, 29 Nov 2011)
New Revision: 8160
Modified:
epp/docs/branches/5.2/Reference_Guide/en-US/modules/PortalDevelopment/Skinning.xml
Log:
Cleaned Skinning.xml formatting
Modified:
epp/docs/branches/5.2/Reference_Guide/en-US/modules/PortalDevelopment/Skinning.xml
===================================================================
---
epp/docs/branches/5.2/Reference_Guide/en-US/modules/PortalDevelopment/Skinning.xml 2011-11-30
04:51:52 UTC (rev 8159)
+++
epp/docs/branches/5.2/Reference_Guide/en-US/modules/PortalDevelopment/Skinning.xml 2011-11-30
04:57:54 UTC (rev 8160)
@@ -3,515 +3,541 @@
<!ENTITY % BOOK_ENTITIES SYSTEM "Reference_Guide.ent">
%BOOK_ENTITIES;
]>
-<chapter id="chap-Reference_Guide-Skinning_the_Portal">
- <title>Skinning the Portal</title>
- <section id="sect-Reference_Guide-Skinning_the_Portal-Overview">
- <title>Overview</title>
+ <chapter id="chap-Reference_Guide-Skinning_the_Portal">
+ <title>Skinning the Portal</title>
+
+ <section id="sect-Reference_Guide-Skinning_the_Portal-Overview">
+ <title>Overview</title>
+
<para>
JBoss Enterprise Portal Platform provides robust skinning support for the
entire portal User Interface (UI). This includes support for skinning all of the common
portal elements as well as being able to provide custom skins and window decoration for
individual portlets. This has been designed with common graphic resource reuse and ease of
development in mind.
- </para>
-
- </section>
-
- <section
id="sect-Reference_Guide-Skinning_the_Portal-Skin_Components">
- <title>Skin Components</title>
+ </para>
+ </section>
+
+ <section
id="sect-Reference_Guide-Skinning_the_Portal-Skin_Components">
+ <title>Skin Components</title>
+
<para>
The skin of a page is composed of three separate parts:
- </para>
+ </para>
+
<variablelist>
<varlistentry>
- <term>Portal Skin</term>
- <listitem>
- <para>
- The portal skin contains the CSS styles for the portal and its
various UI components. This should include all the UI components except for the window
decorators and portlet specific styles.
- </para>
-
- </listitem>
-
+ <term>Portal Skin</term>
+
+ <listitem>
+ <para>
+ The portal skin contains the CSS styles for the portal and its
various UI components. This should include all the UI components except for the window
decorators and portlet specific styles.
+ </para>
+ </listitem>
</varlistentry>
- <varlistentry>
- <term>Window Styles</term>
- <listitem>
- <para>
- The CSS styles associated with the portlet window decorators. The
window decorators contain the control buttons and borders surrounding each portlet.
Individual portlets can have their own window decorator selected or be rendered without
one.
- </para>
-
- </listitem>
-
+
+ <varlistentry>
+ <term>Window Styles</term>
+
+ <listitem>
+ <para>
+ The CSS styles associated with the portlet window decorators. The
window decorators contain the control buttons and borders surrounding each portlet.
Individual portlets can have their own window decorator selected or be rendered without
one.
+ </para>
+ </listitem>
</varlistentry>
- <varlistentry>
- <term>Portlet Skins</term>
- <listitem>
- <para>
- The portlet skins dictate how portlets are rendered on the page.
There are two main ways they can be effected:
- </para>
- <variablelist>
- <varlistentry>
- <term>Portlet Specification CSS Classes</term>
- <listitem>
- <para>
- The portlet specification defines a set of CSS
classes that should be available to portlets. JBoss Enterprise Portal Platform provides
these classes as part of the portal skin. This allows each portal skin to define its own
look and feel for these default values.
- </para>
-
- </listitem>
-
- </varlistentry>
- <varlistentry>
- <term>Portlet Skins</term>
- <listitem>
- <para>
- JBoss Enterprise Portal Platform provides a means for
portlet CSS files to be loaded based on the current portal skin. This allows a portlet to
provide different CSS styles to better match the current portal look and feel. Portlet
skins provide a much more customizable CSS experience than just using the portlet
specification CSS classes.
- </para>
-
- </listitem>
-
- </varlistentry>
-
- </variablelist>
-
- </listitem>
-
+
+ <varlistentry>
+ <term>Portlet Skins</term>
+
+ <listitem>
+ <para>
+ The portlet skins dictate how portlets are rendered on the page.
There are two main ways they can be effected:
+ </para>
+
+ <variablelist>
+ <varlistentry>
+ <term>Portlet Specification CSS Classes</term>
+
+ <listitem>
+ <para>
+ The portlet specification defines a set of CSS classes that
should be available to portlets. JBoss Enterprise Portal Platform provides these classes
as part of the portal skin. This allows each portal skin to define its own look and feel
for these default values.
+ </para>
+ </listitem>
+ </varlistentry>
+
+ <varlistentry>
+ <term>Portlet Skins</term>
+
+ <listitem>
+ <para>
+ JBoss Enterprise Portal Platform provides a means for
portlet CSS files to be loaded based on the current portal skin. This allows a portlet to
provide different CSS styles to better match the current portal look and feel. Portlet
skins provide a much more customizable CSS experience than just using the portlet
specification CSS classes.
+ </para>
+ </listitem>
+ </varlistentry>
+ </variablelist>
+ </listitem>
</varlistentry>
-
- </variablelist>
+ </variablelist>
+
<note>
<title>CSS Classes</title>
- <para>
- The window decorators and the default portlet specification CSS classes
should be considered separate types of skinning components, but they need to be included
as part of the overall portal skin. The portal skin must include these components' CSS
classes or they will not be displayed correctly.
+
+ <para>
+ The window decorators and the default portlet specification CSS classes
should be considered separate types of skinning components, but they need to be included
as part of the overall portal skin. The portal skin must include these components' CSS
classes or they will not be displayed correctly.
</para>
- <para>
- A portlet skin does not need to be included as part of the portal skin
and can be included within the portlets web application.
+
+ <para>
+ A portlet skin does not need to be included as part of the portal skin and
can be included within the portlets web application.
</para>
-
- </note>
-
- </section>
-
- <section
id="sect-Reference_Guide-Skinning_the_Portal-Skin_Selection">
- <title>Skin Selection</title>
+ </note>
+ </section>
+
+ <section
id="sect-Reference_Guide-Skinning_the_Portal-Skin_Selection">
+ <title>Skin Selection</title>
+
<section
id="sect-Reference_Guide-Skin_Selection-Skin_Selection_Through_the_User_Interface">
<title>Skin Selection Through the User Interface</title>
- <para>
- A skin can be selected to be displayed to the user by multiple means. The
easiest way to change the skin is to select it through the user interface. An
administrator can change the default skin for the portal, or a logged in user can select
which skin they would prefer to be displayed.
+
+ <para>
+ A skin can be selected to be displayed to the user by multiple means. The
easiest way to change the skin is to select it through the user interface. An
administrator can change the default skin for the portal, or a logged in user can select
which skin they would prefer to be displayed.
</para>
- <para>
- Please see the <ulink type="http"
url="http://www.redhat.com/docs/en-US/JBoss_Enterprise_Portal_Platfo...
Guide</ulink> for information on how to change the skin using the user interface.
+
+ <para>
+ Please see the <ulink type="http"
url="http://www.redhat.com/docs/en-US/JBoss_Enterprise_Portal_Platfo...
Guide</ulink> for information on how to change the skin using the user interface.
</para>
-
- </section>
-
+ </section>
+
<section
id="sect-Reference_Guide-Skin_Selection-Setting_the_Default_Skin_within_the_Configuration_Files">
<title>Setting the Default Skin within the Configuration
Files</title>
- <para>
- The default skin can also be configured using the portal configuration
files. This allows the portal to have the new default skin ready for use when JBoss
Enterprise Portal Platform is first started.
+
+ <para>
+ The default skin can also be configured using the portal configuration
files. This allows the portal to have the new default skin ready for use when JBoss
Enterprise Portal Platform is first started.
</para>
- <para>
- The default skin of the portal is called
<literal>Default</literal>. To change this value add a
<literal>skin</literal> tag in the
<literal>02portal.war/WEB-INF/conf/portal/portal/classic/portal.xml</literal>
configuration file.
+
+ <para>
+ The default skin of the portal is called
<literal>Default</literal>. To change this value add a
<literal>skin</literal> tag in the
<literal>02portal.war/WEB-INF/conf/portal/portal/classic/portal.xml</literal>
configuration file.
</para>
- <para>
- To change the skin to <literal>MySkin</literal> you would
make the following changes:
+
+ <para>
+ To change the skin to <literal>MySkin</literal> you would make
the following changes:
</para>
-
<programlisting language="XML" role="XML"><xi:include
href="../../extras/PortalDevelopment_Skinning/default180.xml"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
-
- </section>
-
-
- </section>
-
- <section
id="sect-Reference_Guide-Skinning_the_Portal-Skins_in_Page_Markups">
- <title>Skins in Page Markups</title>
+ </section>
+ </section>
+
+ <section
id="sect-Reference_Guide-Skinning_the_Portal-Skins_in_Page_Markups">
+ <title>Skins in Page Markups</title>
+
<para>
A JBoss Enterprise Portal Platform skin contains CSS styles for the
portal's components but also shares components that may be reused in portlets. When
JBoss Enterprise Portal Platform generates a portal page markup, it inserts stylesheet
links in the page's <literal>head</literal> tag.
- </para>
+ </para>
+
<para>
There are two main types of CSS links that will appear in the
<literal>head</literal> tag: a link to the portal skin CSS file and a link to
the portlet skin CSS files.
- </para>
+ </para>
+
<variablelist>
<varlistentry>
- <term>Portal Skin</term>
- <listitem>
- <para>
- The portal skin will appear as a single link to a CSS file. This
link will contain contents from all the portal skin classes merged into one file. This
allows the portal skin to be transferred as a single file instead of multiple smaller
files.
- </para>
-
- </listitem>
-
+ <term>Portal Skin</term>
+
+ <listitem>
+ <para>
+ The portal skin will appear as a single link to a CSS file. This
link will contain contents from all the portal skin classes merged into one file. This
allows the portal skin to be transferred as a single file instead of multiple smaller
files.
+ </para>
+ </listitem>
</varlistentry>
- <varlistentry>
- <term>Portlet Skin</term>
- <listitem>
- <para>
- Each portlet on a page may contribute its own style. The link to
the portlet skin will only appear on the page if that portlet is loaded on the current
page. A page may contain many portlet skin CSS links or none.
- </para>
-
- </listitem>
-
+
+ <varlistentry>
+ <term>Portlet Skin</term>
+
+ <listitem>
+ <para>
+ Each portlet on a page may contribute its own style. The link to the
portlet skin will only appear on the page if that portlet is loaded on the current page. A
page may contain many portlet skin CSS links or none.
+ </para>
+ </listitem>
</varlistentry>
-
- </variablelist>
+ </variablelist>
+
<para>
In the code fragment below you can see the two types of links:
- </para>
-
+ </para>
<programlisting language="XML" role="XML"><xi:include
href="../../extras/PortalDevelopment_Skinning/default181.xml"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
<note>
<title>CSS Classes</title>
- <para>
- Window styles and the portlet specification CSS classes are included
within the portal skin.
+
+ <para>
+ Window styles and the portlet specification CSS classes are included
within the portal skin.
</para>
-
- </note>
-
- </section>
-
- <section
id="sect-Reference_Guide-Skinning_the_Portal-The_Skin_Service">
- <title>The Skin Service</title>
+ </note>
+ </section>
+
+ <section
id="sect-Reference_Guide-Skinning_the_Portal-The_Skin_Service">
+ <title>The Skin Service</title>
+
<para>
The skin service manages the various types of skins. It is responsible for
discovering and deploying skins into the portal.
- </para>
+ </para>
+
<section
id="sect-Reference_Guide-The_Skin_Service-Skin_configuration">
<title>Skin configuration</title>
- <para>
- JBoss Enterprise Portal Platform automatically discovers web archives
that contain a file descriptor for skins
(<filename>WEB-INF/gatein-resources.xml</filename>). This file is responsible
for specifying the portal, portlet and window decorators to be deployed into the skin
service.
+
+ <para>
+ JBoss Enterprise Portal Platform automatically discovers web archives that
contain a file descriptor for skins
(<filename>WEB-INF/gatein-resources.xml</filename>). This file is responsible
for specifying the portal, portlet and window decorators to be deployed into the skin
service.
</para>
- <para>
- The full schema can be found at: <ulink type="http"
url="http://www.gatein.org/xml/ns/gatein_resources_1_2" />.
+
+ <para>
+ The full schema can be found at: <ulink type="http"
url="http://www.gatein.org/xml/ns/gatein_resources_1_2" />.
</para>
- <para>
- Below is an example of where to define a skin
(<literal>MySkin</literal>) with its CSS location, and specify some window
decorator skins:
+
+ <para>
+ Below is an example of where to define a skin
(<literal>MySkin</literal>) with its CSS location, and specify some window
decorator skins:
</para>
-
<programlisting language="XML" role="XML"><xi:include
href="../../extras/PortalDevelopment_Skinning/default182.xml"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
-
- </section>
-
+ </section>
+
<section
id="sect-Reference_Guide-The_Skin_Service-Resource_Request_Filter">
<title>Resource Request Filter</title>
- <para>
- Because of JBoss Enterprise Portal Platform's Right-To-Left support,
all CSS files need to be retrieved through a Servlet filter and the web application needs
to be configured to activate this filter. This is already done for
<literal>01eXoResources.war</literal> web application which contains the
default skin.
+
+ <para>
+ Because of JBoss Enterprise Portal Platform's Right-To-Left support,
all CSS files need to be retrieved through a Servlet filter and the web application needs
to be configured to activate this filter. This is already done for
<literal>01eXoResources.war</literal> web application which contains the
default skin.
</para>
- <para>
- Any new web applications containing skinning CSS files will need to have
the following added to their <filename>web.xml</filename> :
+
+ <para>
+ Any new web applications containing skinning CSS files will need to have
the following added to their <filename>web.xml</filename> :
</para>
-
<programlisting language="XML" role="XML"><xi:include
href="../../extras/PortalDevelopment_Skinning/default183.xml"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
- <note>
- <title>The <literal>display-name</literal>
Element</title>
- <para>
- The <literal>display-name</literal> element will also
need to be specified in the <literal>web.xml</literal> for the skinning
service to work properly with the web application.
- </para>
-
+ <note>
+ <title>The <literal>display-name</literal>
Element</title>
+
+ <para>
+ The <literal>display-name</literal> element will also need
to be specified in the <literal>web.xml</literal> for the skinning service to
work properly with the web application.
+ </para>
</note>
-
- </section>
-
-
- </section>
-
- <section
id="sect-Reference_Guide-Skinning_the_Portal-The_Default_Skin">
- <title>The Default Skin</title>
+ </section>
+ </section>
+
+ <section
id="sect-Reference_Guide-Skinning_the_Portal-The_Default_Skin">
+ <title>The Default Skin</title>
+
<para>
The default skin for JBoss Enterprise Portal Platform is located as part of
the <literal>01eXoResources.war</literal>. The main files associated with the
skin are:
- </para>
+ </para>
+
<variablelist>
<varlistentry>
- <term>WEB-INF/gatein-resources.xml</term>
- <listitem>
- <para>
- For the default portal skin, this file contains definitions for
the portal skin, the window decorations that this skin provides and well as defining some
javascript resources which are not related to the skin. The default portal skin
doesn't directly define portlet skins, these should be provided by the portlets
themselves.
- </para>
-
- </listitem>
-
+ <term>WEB-INF/gatein-resources.xml</term>
+
+ <listitem>
+ <para>
+ For the default portal skin, this file contains definitions for the
portal skin, the window decorations that this skin provides and well as defining some
javascript resources which are not related to the skin. The default portal skin
doesn't directly define portlet skins, these should be provided by the portlets
themselves.
+ </para>
+ </listitem>
</varlistentry>
- <varlistentry>
- <term>WEB-INF/web.xml</term>
- <listitem>
- <para>
- For the default portal skin, the
<filename>web.xml</filename> of the
<literal>eXoResources.war</literal> will contains a lot of information which
is mostly irrelevant to the portal skinning. The area of interest in this file is the
<literal>resourcerequestfilter</literal> and the fact that the
<parameter>display-name</parameter> is set.
- </para>
-
- </listitem>
-
+
+ <varlistentry>
+ <term>WEB-INF/web.xml</term>
+
+ <listitem>
+ <para>
+ For the default portal skin, the
<filename>web.xml</filename> of the
<literal>eXoResources.war</literal> will contains a lot of information which
is mostly irrelevant to the portal skinning. The area of interest in this file is the
<literal>resourcerequestfilter</literal> and the fact that the
<parameter>display-name</parameter> is set.
+ </para>
+ </listitem>
</varlistentry>
- <varlistentry>
- <term>skin/Stylesheet.css</term>
- <listitem>
- <para>
- This file is the main portal skin stylesheet. It is the main
entry point to the CSS class definitions for the skin. The main content points of this
file are:
- </para>
- <programlistingco>
- <areaspec>
+
+ <varlistentry>
+ <term>skin/Stylesheet.css</term>
+
+ <listitem>
+ <para>
+ This file is the main portal skin stylesheet. It is the main entry
point to the CSS class definitions for the skin. The main content points of this file
are:
+ </para>
+
+ <programlistingco>
+<areaspec>
<area coords="1"
id="area-Reference_Guide-Skinning_the_Portal-The_Default_Skin-uiportletapplication"
/>
<area coords="2"
id="area-Reference_Guide-Skinning_the_Portal-The_Default_Skin-components" />
<area coords="3"
id="area-Reference_Guide-Skinning_the_Portal-The_Default_Skin-portletthemes"
/>
<area coords="4"
id="area-Reference_Guide-Skinning_the_Portal-The_Default_Skin-portlet" />
</areaspec>
-
<programlisting language="Java" role="Java"><xi:include
href="../../extras/PortalDevelopment_Skinning/default184.java"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
- <calloutlist>
- <callout
arearefs="area-Reference_Guide-Skinning_the_Portal-The_Default_Skin-uiportletapplication">
- <para>
- The skin for the main portal page.
- </para>
+ <calloutlist>
+ <callout
arearefs="area-Reference_Guide-Skinning_the_Portal-The_Default_Skin-uiportletapplication">
+ <para>
+ The skin for the main portal page.
+ </para>
+ </callout>
- </callout>
- <callout
arearefs="area-Reference_Guide-Skinning_the_Portal-The_Default_Skin-components">
- <para>
- Skins for various portal components.
- </para>
+
- </callout>
- <callout
arearefs="area-Reference_Guide-Skinning_the_Portal-The_Default_Skin-portletthemes">
- <para>
- Window decoration skins.
- </para>
+ <callout
arearefs="area-Reference_Guide-Skinning_the_Portal-The_Default_Skin-components">
+ <para>
+ Skins for various portal components.
+ </para>
+ </callout>
- </callout>
- <callout
arearefs="area-Reference_Guide-Skinning_the_Portal-The_Default_Skin-portlet">
- <para>
- The portlet specification CSS classes.
- </para>
+
- </callout>
+ <callout
arearefs="area-Reference_Guide-Skinning_the_Portal-The_Default_Skin-portletthemes">
+ <para>
+ Window decoration skins.
+ </para>
+ </callout>
- </calloutlist>
+
- </programlistingco>
-
+ <callout
arearefs="area-Reference_Guide-Skinning_the_Portal-The_Default_Skin-portlet">
+ <para>
+ The portlet specification CSS classes.
+ </para>
+ </callout>
+ </calloutlist>
+ </programlistingco>
+
+ <para>
+ This method imports other CSS stylesheet files (some of which may
also import further CSS stylesheets) instead of defining all the CSS classes in this one
file. Splitting the CSS classes between multiple files allows new skins to reuse parts of
the default skin.
+ </para>
+
+ <para>
+ To reuse a CSS stylesheet from the default portal skin you would
need to reference the default skin from <literal>eXoResources</literal>. For
example; to include the window decorators from the default skin within a new portal skin
you would need to use this import:
+ </para>
+<programlisting language="Java" role="Java"><xi:include
href="../../extras/PortalDevelopment_Skinning/default185.java"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
+ <note>
+ <title>Stylesheet Merging</title>
+
<para>
- This method imports other CSS stylesheet files (some of which may
also import further CSS stylesheets) instead of defining all the CSS classes in this one
file. Splitting the CSS classes between multiple files allows new skins to reuse parts of
the default skin.
- </para>
- <para>
- To reuse a CSS stylesheet from the default portal skin you would
need to reference the default skin from <literal>eXoResources</literal>. For
example; to include the window decorators from the default skin within a new portal skin
you would need to use this import:
- </para>
-
-<programlisting language="Java" role="Java"><xi:include
href="../../extras/PortalDevelopment_Skinning/default185.java"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
- <note>
- <title>Stylesheet Merging</title>
- <para>
- When the portal skin is added to the page, it merges all the
CSS stylesheets into a single file.
- </para>
-
- </note>
-
- </listitem>
-
+ When the portal skin is added to the page, it merges all the CSS
stylesheets into a single file.
+ </para>
+ </note>
+ </listitem>
</varlistentry>
-
- </variablelist>
-
- </section>
-
- <section
id="sect-Reference_Guide-Skinning_the_Portal-Creating_New_Skins">
- <title>Creating New Skins</title>
+ </variablelist>
+ </section>
+
+ <section
id="sect-Reference_Guide-Skinning_the_Portal-Creating_New_Skins">
+ <title>Creating New Skins</title>
+
<section
id="sect-Reference_Guide-Creating_New_Skins-Creating_a_New_Portal_Skin">
<title>Creating a New Portal Skin</title>
- <para>
- New portal skins will need to be added to the portal through the skin
service. Therefore, the web application which contains the skins will need to be properly
configured for the skin service to discover them. This means properly configuring the
<literal>ResourceRequestFilter</literal> and
<filename>gatein-resources.xml</filename>.
+
+ <para>
+ New portal skins will need to be added to the portal through the skin
service. Therefore, the web application which contains the skins will need to be properly
configured for the skin service to discover them. This means properly configuring the
<literal>ResourceRequestFilter</literal> and
<filename>gatein-resources.xml</filename>.
</para>
- <section
id="sect-Reference_Guide-Creating_a_New_Portal_Skin-Portal_Skin_Configuration">
- <title>Portal Skin Configuration</title>
- <para>
- The <filename>gatein-resources.xml</filename> will need
to specify the new portal skin. This will include the name of the new skin, where to
locate its CSS stylesheet file and whether to overwrite an existing portal theme with the
same name.
- </para>
-
+
+ <section
id="sect-Reference_Guide-Creating_a_New_Portal_Skin-Portal_Skin_Configuration">
+ <title>Portal Skin Configuration</title>
+
+ <para>
+ The <filename>gatein-resources.xml</filename> will need to
specify the new portal skin. This will include the name of the new skin, where to locate
its CSS stylesheet file and whether to overwrite an existing portal theme with the same
name.
+ </para>
<programlisting language="XML" role="XML"><xi:include
href="../../extras/PortalDevelopment_Skinning/default186.xml"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
- <para>
- The default portal skin and window styles are defined in
<filename>01eXoResources.war/WEB-INF/gatein-resources.xml</filename>.
- </para>
- <note>
- <title>CSS</title>
- <para>
- The CSS for the portal skin needs to contain the CSS for all the
window decorations and the portlet specification CSS classes.
- </para>
-
- </note>
-
+ <para>
+ The default portal skin and window styles are defined in
<filename>01eXoResources.war/WEB-INF/gatein-resources.xml</filename>.
+ </para>
+
+ <note>
+ <title>CSS</title>
+
+ <para>
+ The CSS for the portal skin needs to contain the CSS for all the
window decorations and the portlet specification CSS classes.
+ </para>
+ </note>
</section>
-
- <section
id="sect-Reference_Guide-Creating_a_New_Portal_Skin-Portal_Skin_Preview_Icon">
- <title>Portal Skin Preview Icon</title>
- <para>
- It is possible to see a preview of what the portal will look like
when selecting a new skin. This functionality relies on the current skin being updated
with skin icons for all other available skins. Otherwise it will not be able to show the
previews.
- </para>
- <para>
- It is recommended that preview icons of any other skins are included
when creating a new portal skin and that the other skins are updated with your new portal
skin preview.
- </para>
- <mediaobject>
- <imageobject role="html">
- <imagedata align="center"
fileref="images/PortalDevelopment/Skinning/portal-change-skin.png"
format="PNG" scale="100" width="444" />
- </imageobject>
- <imageobject role="fo">
- <imagedata align="center"
contentwidth="150mm"
fileref="images/PortalDevelopment/Skinning/portal-change-skin.png"
format="PNG" width="444" />
- </imageobject>
-
- </mediaobject>
- <para>
- The portal skin preview icon is specified through the CSS of the
portal skin. In order for the current portal skin to be able to display the preview it
must specify a specific CSS class and set the icon as the background.
- </para>
- <para>
- For a portal named <emphasis
role="bold">MySkin</emphasis> in must define the following CSS class:
- </para>
-
+
+ <section
id="sect-Reference_Guide-Creating_a_New_Portal_Skin-Portal_Skin_Preview_Icon">
+ <title>Portal Skin Preview Icon</title>
+
+ <para>
+ It is possible to see a preview of what the portal will look like when
selecting a new skin. This functionality relies on the current skin being updated with
skin icons for all other available skins. Otherwise it will not be able to show the
previews.
+ </para>
+
+ <para>
+ It is recommended that preview icons of any other skins are included
when creating a new portal skin and that the other skins are updated with your new portal
skin preview.
+ </para>
+
+ <mediaobject>
+ <imageobject role="html">
+ <imagedata align="center"
fileref="images/PortalDevelopment/Skinning/portal-change-skin.png"
format="PNG" scale="100" width="444" />
+ </imageobject>
+
+ <imageobject role="fo">
+ <imagedata align="center"
contentwidth="150mm"
fileref="images/PortalDevelopment/Skinning/portal-change-skin.png"
format="PNG" width="444" />
+ </imageobject>
+ </mediaobject>
+
+ <para>
+ The portal skin preview icon is specified through the CSS of the portal
skin. In order for the current portal skin to be able to display the preview it must
specify a specific CSS class and set the icon as the background.
+ </para>
+
+ <para>
+ For a portal named <emphasis
role="bold">MySkin</emphasis> in must define the following CSS class:
+ </para>
<programlisting language="XML" role="XML"><xi:include
href="../../extras/PortalDevelopment_Skinning/default187.xml"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
- <para>
- In order for the default skin to display the skin icon for a new
portal skin, the preview screenshot needs to be placed in:
<filename>01eXoResources.war:/skin/DefaultSkin/portal/webui/component/customization/UIChangeSkinForm/background</filename>.
- </para>
- <para>
- The CSS stylesheet for the default portal needs to have the following
updated with the preview icon CSS class. For a skin named <emphasis
role="bold">MySkin</emphasis> then the following needs to be updated:
<filename>01eXoResources.war:/skin/DefaultSkin/portal/webui/component/customization/UIChangeSkinForm/Stylesheet.css</filename>.
- </para>
-
+ <para>
+ In order for the default skin to display the skin icon for a new portal
skin, the preview screenshot needs to be placed in:
<filename>01eXoResources.war:/skin/DefaultSkin/portal/webui/component/customization/UIChangeSkinForm/background</filename>.
+ </para>
+
+ <para>
+ The CSS stylesheet for the default portal needs to have the following
updated with the preview icon CSS class. For a skin named <emphasis
role="bold">MySkin</emphasis> then the following needs to be updated:
<filename>01eXoResources.war:/skin/DefaultSkin/portal/webui/component/customization/UIChangeSkinForm/Stylesheet.css</filename>.
+ </para>
<programlisting language="XML" role="XML"><xi:include
href="../../extras/PortalDevelopment_Skinning/default188.xml"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
-
</section>
-
-
- </section>
-
+ </section>
+
<section
id="sect-Reference_Guide-Creating_New_Skins-Creating_a_New_Window_Style">
<title>Creating a New Window Style</title>
- <para>
- Window styles are the CSS applied to window decorations. An administrator
can decide which style of decoration should go around the window when they add a new
application or gadget to a page.
+
+ <para>
+ Window styles are the CSS applied to window decorations. An administrator
can decide which style of decoration should go around the window when they add a new
application or gadget to a page.
</para>
- <mediaobject>
- <imageobject role="html">
- <imagedata align="center"
fileref="images/PortalDevelopment/Skinning/windowStyles.png"
format="PNG" scale="100" width="444" />
- </imageobject>
- <imageobject role="fo">
- <imagedata align="center" contentwidth="150mm"
fileref="images/PortalDevelopment/Skinning/windowStyles.png"
format="PNG" width="444" />
- </imageobject>
-
+
+ <mediaobject>
+ <imageobject role="html">
+ <imagedata align="center"
fileref="images/PortalDevelopment/Skinning/windowStyles.png"
format="PNG" scale="100" width="444" />
+ </imageobject>
+
+ <imageobject role="fo">
+ <imagedata align="center" contentwidth="150mm"
fileref="images/PortalDevelopment/Skinning/windowStyles.png"
format="PNG" width="444" />
+ </imageobject>
</mediaobject>
- <section
id="sect-Reference_Guide-Creating_a_New_Window_Style-Window_Style_Configuration">
- <title>Window Style Configuration</title>
- <para>
- Window Styles are defined within a
<filename>gatein-resources.xml</filename> file which is used by the skin
service to deploy the window style into the portal. Window styles can belong in a window
style category. This category and the window styles will need to be specified in resources
file.
- </para>
- <para>
- The following <filename>gatein-resources.xml</filename>
fragment will add <literal>MyThemeBlue</literal> and
<literal>MyThemeRed</literal> to the <literal>MyTheme</literal>
category.
- </para>
-
+
+ <section
id="sect-Reference_Guide-Creating_a_New_Window_Style-Window_Style_Configuration">
+ <title>Window Style Configuration</title>
+
+ <para>
+ Window Styles are defined within a
<filename>gatein-resources.xml</filename> file which is used by the skin
service to deploy the window style into the portal. Window styles can belong in a window
style category. This category and the window styles will need to be specified in resources
file.
+ </para>
+
+ <para>
+ The following <filename>gatein-resources.xml</filename>
fragment will add <literal>MyThemeBlue</literal> and
<literal>MyThemeRed</literal> to the <literal>MyTheme</literal>
category.
+ </para>
<programlisting language="XML" role="XML"><xi:include
href="../../extras/PortalDevelopment_Skinning/default189.xml"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
- <para>
- The windows style configuration for the default skin is configured
in: <filename>01eXoResources.war/WEB-INF/gatein-resources.xml</filename>.
- </para>
- <note>
- <title>Window Styles and Portal Skins</title>
- <para>
- When a window style is defined in
<filename>gatein-resources.xml</filename> file, it will be available to all
portlets regardless of whether the current portal skin supports the window decorator or
not.
- </para>
- <para>
- It is recommended that when a new window decorator is added that
it be added to all portal skins or that all portal skins share a common stylesheet for
window decorators.
- </para>
-
- </note>
-
+ <para>
+ The windows style configuration for the default skin is configured in:
<filename>01eXoResources.war/WEB-INF/gatein-resources.xml</filename>.
+ </para>
+
+ <note>
+ <title>Window Styles and Portal Skins</title>
+
+ <para>
+ When a window style is defined in
<filename>gatein-resources.xml</filename> file, it will be available to all
portlets regardless of whether the current portal skin supports the window decorator or
not.
+ </para>
+
+ <para>
+ It is recommended that when a new window decorator is added that it
be added to all portal skins or that all portal skins share a common stylesheet for window
decorators.
+ </para>
+ </note>
</section>
-
- <section
id="sect-Reference_Guide-Creating_a_New_Window_Style-Window_Style_CSS">
- <title>Window Style CSS</title>
- <para>
- In order for the skin service to display the window decorators, it
must have CSS classes specifically named in relation to the window style name. The service
will try and display CSS based on this naming convention. The CSS class must be included
as part of the current portal skin for the window decorators to be displayed.
- </para>
- <para>
- The location of the window decorator CSS classes for the default
portal theme is located at:
<filename>01eXoResources.war/skin/PortletThemes/Stylesheet.css</filename>.
- </para>
- <para>
-
- </para>
- <para>
- Create the CSS file:
- </para>
-
+
+ <section
id="sect-Reference_Guide-Creating_a_New_Window_Style-Window_Style_CSS">
+ <title>Window Style CSS</title>
+
+ <para>
+ In order for the skin service to display the window decorators, it must
have CSS classes specifically named in relation to the window style name. The service will
try and display CSS based on this naming convention. The CSS class must be included as
part of the current portal skin for the window decorators to be displayed.
+ </para>
+
+ <para>
+ The location of the window decorator CSS classes for the default portal
theme is located at:
<filename>01eXoResources.war/skin/PortletThemes/Stylesheet.css</filename>.
+ </para>
+
+ <para></para>
+
+ <para>
+ Create the CSS file:
+ </para>
<programlisting language="Java" role="Java"><xi:include
href="../../extras/PortalDevelopment_Skinning/default190.java"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
-
</section>
-
- <section
id="sect-Reference_Guide-Creating_a_New_Window_Style-How_to_Set_the_Default_Window_Style">
- <title>How to Set the Default Window Style</title>
- <para>
- To set the default window style to be used for a portal you will need
to specify the CSS classes for a theme called
<literal>DefaultTheme</literal>.
- </para>
- <note>
- <title>DefaultTheme</title>
- <para>
- You do not need to specify the
<literal>DefaultTheme</literal> in
<filename>gatein-resources.xml</filename>.
- </para>
-
- </note>
-
+
+ <section
id="sect-Reference_Guide-Creating_a_New_Window_Style-How_to_Set_the_Default_Window_Style">
+ <title>How to Set the Default Window Style</title>
+
+ <para>
+ To set the default window style to be used for a portal you will need
to specify the CSS classes for a theme called
<literal>DefaultTheme</literal>.
+ </para>
+
+ <note>
+ <title>DefaultTheme</title>
+
+ <para>
+ You do not need to specify the
<literal>DefaultTheme</literal> in
<filename>gatein-resources.xml</filename>.
+ </para>
+ </note>
</section>
-
-
- </section>
-
+ </section>
+
<section
id="sect-Reference_Guide-Creating_New_Skins-How_to_Create_New_Portlet_Skins">
<title><remark>How to Create New Portlet
Skins</remark></title>
-
- <para>
- Portlets often require additional styles that may not be defined by the
portal skin. JBoss Enterprise Portal Platform allows portlets to define additional
stylesheets for each portlet and will append the corresponding
<literal>link</literal> tags to the <literal>head</literal>.
+
+ <para>
+ Portlets often require additional styles that may not be defined by the
portal skin. JBoss Enterprise Portal Platform allows portlets to define additional
stylesheets for each portlet and will append the corresponding
<literal>link</literal> tags to the <literal>head</literal>.
</para>
- <para>
- The link ID will be of the form
<parameter>{portletAppName}{PortletName}</parameter>.
+
+ <para>
+ The link ID will be of the form
<parameter>{portletAppName}{PortletName}</parameter>.
</para>
- <para>
- For example: <literal>ContentPortlet</literal> in
<literal>content.war</literal>, will give
<parameter>id="content<literal>ContentPortlet"</literal></parameter>.
+
+ <para>
+ For example: <literal>ContentPortlet</literal> in
<literal>content.war</literal>, will give
<parameter>id="content<literal>ContentPortlet"</literal></parameter>.
</para>
- <para>
- To define a new CSS file to include whenever a portlet is available on a
portal page, the following fragment needs to be added in
<filename>gatein-resources.xml</filename>.
+
+ <para>
+ To define a new CSS file to include whenever a portlet is available on a
portal page, the following fragment needs to be added in
<filename>gatein-resources.xml</filename>.
</para>
-
<programlisting language="XML" role="XML"><xi:include
href="../../extras/PortalDevelopment_Skinning/default191.xml"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
- <para>
- This will load the <literal>DefaultStylesheet.css</literal>
when the Default skin is used and the
<literal>OtherSkinStylesheet.css</literal> when the
<literal>OtherSkin</literal> is used.
+ <para>
+ This will load the <literal>DefaultStylesheet.css</literal>
when the Default skin is used and the
<literal>OtherSkinStylesheet.css</literal> when the
<literal>OtherSkin</literal> is used.
</para>
- <note>
- <title>Updating Portlet Skins</title>
- <para>
- If the current portal skin is not defined as one of the supported
skins, then the portlet CSS class will not be loaded. It is recommended that portlet skins
are updated whenever a new portal skin is created.
- </para>
-
+
+ <note>
+ <title>Updating Portlet Skins</title>
+
+ <para>
+ If the current portal skin is not defined as one of the supported
skins, then the portlet CSS class will not be loaded. It is recommended that portlet skins
are updated whenever a new portal skin is created.
+ </para>
</note>
+
<section
id="sect-Reference_Guide-How_to_Create_New_Portlet_Skins-Define_a_Custom_CSS_File">
- <title><remark>Define a Custom CSS
File</remark></title>
-
- <para>
- JBoss Enterprise Portal Platform &VX; does not serve CSS files
directly, but uses a filter as well as a skin service in order to:
- </para>
- <itemizedlist>
- <listitem>
- <para>
- Cache the CSS files.
- </para>
- </listitem>
- <listitem>
- <para>
- Merge them into one file if possible. This will be discussed
further in <xref
linkend="sect-Reference_Guide-Tips_and_Tricks-Easier_CSS_Debugging"/>.
- </para>
- </listitem>
- <listitem>
- <para>
- Add support for Right-To-Left (RTL) languages. This is
discussed in more detail in <xref
linkend="sect-Reference_Guide-Right_To_Left_RTL_Framework-Stylesheet"/>.
- </para>
- </listitem>
- </itemizedlist>
- <para>
- This causes JBoss Enterprise Portal Platform to create
non-functioning a CSS-link in html-src-code.
- </para>
- <procedure>
- <title>To Resolve This:</title>
- <step>
- <para>
- Add the following files to the custom portlet
application:
- </para>
- <variablelist>
- <title></title>
- <varlistentry>
-
<term><filename>WEB-INF/gatein-resources.xml</filename>:</term>
- <listitem>
+ <title><remark>Define a Custom CSS
File</remark></title>
+
+ <para>
+ JBoss Enterprise Portal Platform &VX; does not serve CSS files
directly, but uses a filter as well as a skin service in order to:
+ </para>
+
+ <itemizedlist>
+ <listitem>
+ <para>
+ Cache the CSS files.
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ Merge them into one file if possible. This will be discussed
further in <xref
linkend="sect-Reference_Guide-Tips_and_Tricks-Easier_CSS_Debugging"/>.
+ </para>
+ </listitem>
+
+ <listitem>
+ <para>
+ Add support for Right-To-Left (RTL) languages. This is discussed
in more detail in <xref
linkend="sect-Reference_Guide-Right_To_Left_RTL_Framework-Stylesheet"/>.
+ </para>
+ </listitem>
+ </itemizedlist>
+
+ <para>
+ This causes JBoss Enterprise Portal Platform to create non-functioning
a CSS-link in html-src-code.
+ </para>
+
+ <procedure>
+ <title>To Resolve This:</title>
+
+ <step>
+ <para>
+ Add the following files to the custom portlet application:
+ </para>
+
+ <variablelist>
+ <title></title>
+
+ <varlistentry>
+
<term><filename>WEB-INF/gatein-resources.xml</filename>:</term>
+
+ <listitem>
<programlisting><![CDATA[<portlet-skin>
<application-name>custom</application-name>
<portlet-name>test</portlet-name>
@@ -519,26 +545,30 @@
<css-path>/css/main.css</css-path>
</portlet-skin>
]]></programlisting>
- <note>
- <title>Note:</title>
- <itemizedlist>
- <listitem>
- <para>
- The value of the
<parameter>application-name</parameter> element needs to match the value of
the <parameter>display-name</parameter> element in
<filename>web.xml</filename>.
- </para>
- </listitem>
- <listitem>
- <para>
- The value of the
<parameter>portlet-name</parameter> element needs to match the value of the
<parameter>portlet-name</parameter> element in
<filename>portlet.xml</filename>.
- </para>
- </listitem>
- </itemizedlist>
- </note>
+ <note>
+ <title>Note:</title>
+
+ <itemizedlist>
+ <listitem>
+ <para>
+ The value of the
<parameter>application-name</parameter> element needs to match the value of
the <parameter>display-name</parameter> element in
<filename>web.xml</filename>.
+ </para>
</listitem>
- </varlistentry>
- <varlistentry>
-
<term><filename>WEB-INF/web.xml</filename>:</term>
+
<listitem>
+ <para>
+ The value of the
<parameter>portlet-name</parameter> element needs to match the value of the
<parameter>portlet-name</parameter> element in
<filename>portlet.xml</filename>.
+ </para>
+ </listitem>
+ </itemizedlist>
+ </note>
+ </listitem>
+ </varlistentry>
+
+ <varlistentry>
+
<term><filename>WEB-INF/web.xml</filename>:</term>
+
+ <listitem>
<programlisting><![CDATA[<display-name>custom</display-name>
<filter>
@@ -551,40 +581,46 @@
<url-pattern>/*</url-pattern>
</filter-mapping>
]]></programlisting>
- <note>
- <title>Note:</title>
- <itemizedlist>
- <listitem>
- <para>
- The value of the
<parameter>display-name</parameter> element needs to match the value of the
<parameter>application-name</parameter> element in
<filename>gatein-resources.xml</filename>.
- </para>
- </listitem>
- <listitem>
- <para>
- The
<literal>ResourceRequestFilter</literal> needs to be added to the custom
portlet application for proper CSS file handling within the Portal container.
- </para>
- </listitem>
- </itemizedlist>
- </note>
+ <note>
+ <title>Note:</title>
+
+ <itemizedlist>
+ <listitem>
+ <para>
+ The value of the
<parameter>display-name</parameter> element needs to match the value of the
<parameter>application-name</parameter> element in
<filename>gatein-resources.xml</filename>.
+ </para>
</listitem>
- </varlistentry>
- <varlistentry>
-
<term><filename>WEB-INF/portlet.xml</filename>:</term>
+
<listitem>
+ <para>
+ The
<literal>ResourceRequestFilter</literal> needs to be added to the custom
portlet application for proper CSS file handling within the Portal container.
+ </para>
+ </listitem>
+ </itemizedlist>
+ </note>
+ </listitem>
+ </varlistentry>
+
+ <varlistentry>
+
<term><filename>WEB-INF/portlet.xml</filename>:</term>
+
+ <listitem>
<programlisting><![CDATA[<portlet-name>test</portlet-name>
]]></programlisting>
- <note>
- <title>Note:</title>
- <para>
- The value of the
<parameter>portlet-name</parameter> element needs to match the value of the
<parameter>portlet-name</parameter> element in
<filename>gatein-resources.xml</filename>.
- </para>
- </note>
- </listitem>
- </varlistentry>
- </variablelist>
- <para>
- The final portlet application will be structured as
illustrated below:
- </para>
+ <note>
+ <title>Note:</title>
+
+ <para>
+ The value of the
<parameter>portlet-name</parameter> element needs to match the value of the
<parameter>portlet-name</parameter> element in
<filename>gatein-resources.xml</filename>.
+ </para>
+ </note>
+ </listitem>
+ </varlistentry>
+ </variablelist>
+
+ <para>
+ The final portlet application will be structured as illustrated
below:
+ </para>
<programlisting>custom.war
├── css
│ └── main.css
@@ -595,139 +631,134 @@
├── portlet.xml
└── web.xml
</programlisting>
- </step>
- </procedure>
+ </step>
+ </procedure>
</section>
-
- <section
id="sect-Reference_Guide-How_to_Create_New_Portlet_Skins-Change_Portlet_Icons">
- <title>Change Portlet Icons</title>
- <para>
- Each portlet can be registered by a unique icon in the portlet
registry or page editor. This icon can be changed by adding an image to the directory of
the portlet web application:
- </para>
- <itemizedlist>
- <listitem>
- <para>
-
<filename>skin/DefaultSkin/portletIcons/<replaceable>portlet_name</replaceable>.png
</filename>.
- </para>
-
- </listitem>
-
- </itemizedlist>
- <para>
- To be used correctly the icon must be named after the portlet.
- </para>
- <para>
- For example; the icon for an account portlet named
<literal>AccountPortlet</literal> would be located at:
- </para>
- <itemizedlist>
- <listitem>
- <para>
-
<filename>skin/DefaultSkin/portletIcons/AccountPortlet.png</filename>
- </para>
-
- </listitem>
-
- </itemizedlist>
- <note>
- <title>Portlet Icons Directory</title>
+
+ <section
id="sect-Reference_Guide-How_to_Create_New_Portlet_Skins-Change_Portlet_Icons">
+ <title>Change Portlet Icons</title>
+
+ <para>
+ Each portlet can be registered by a unique icon in the portlet registry
or page editor. This icon can be changed by adding an image to the directory of the
portlet web application:
+ </para>
+
+ <itemizedlist>
+ <listitem>
<para>
- You must use
<literal>skin/DefaultSkin/portletIcons/</literal> for the directory to store
the portlet icon regardless of what skin is going to be used.
- </para>
-
- </note>
-
+
<filename>skin/DefaultSkin/portletIcons/<replaceable>portlet_name</replaceable>.png
</filename>.
+ </para>
+ </listitem>
+ </itemizedlist>
+
+ <para>
+ To be used correctly the icon must be named after the portlet.
+ </para>
+
+ <para>
+ For example; the icon for an account portlet named
<literal>AccountPortlet</literal> would be located at:
+ </para>
+
+ <itemizedlist>
+ <listitem>
+ <para>
+
<filename>skin/DefaultSkin/portletIcons/AccountPortlet.png</filename>
+ </para>
+ </listitem>
+ </itemizedlist>
+
+ <note>
+ <title>Portlet Icons Directory</title>
+
+ <para>
+ You must use
<literal>skin/DefaultSkin/portletIcons/</literal> for the directory to store
the portlet icon regardless of what skin is going to be used.
+ </para>
+ </note>
</section>
-
-
- </section>
-
+ </section>
+
<section
id="sect-Reference_Guide-Creating_New_Skins-Create_New_Portlet_Specification_CSS_Classes">
<title>Create New Portlet Specification CSS Classes</title>
- <para>
- The portlet specification defines a set of default CSS classes that
should be available for portlets. These classes are included as part of the portal skin.
Please see the portlet specification for a list of the default classes that should be
available.
+
+ <para>
+ The portlet specification defines a set of default CSS classes that should
be available for portlets. These classes are included as part of the portal skin. Please
see the portlet specification for a list of the default classes that should be available.
</para>
- <para>
- For the default portal skin, the portlet specification CSS classes are
defined in:
<filename>01eXoResources.war/skin/Portlet/Stylesheet.css</filename>.
+
+ <para>
+ For the default portal skin, the portlet specification CSS classes are
defined in:
<filename>01eXoResources.war/skin/Portlet/Stylesheet.css</filename>.
</para>
-
- </section>
-
-
- </section>
-
- <section
id="sect-Reference_Guide-Skinning_the_Portal-Tips_and_Tricks">
- <title>Tips and Tricks</title>
+ </section>
+ </section>
+
+ <section
id="sect-Reference_Guide-Skinning_the_Portal-Tips_and_Tricks">
+ <title>Tips and Tricks</title>
+
<section
id="sect-Reference_Guide-Tips_and_Tricks-Easier_CSS_Debugging">
<title>Easier CSS Debugging</title>
- <para>
- By default, CSS files are cached and their imports are merged into a
single CSS file at the server side. This reduces the number of HTTP requests from the
browser to the server.
+
+ <para>
+ By default, CSS files are cached and their imports are merged into a
single CSS file at the server side. This reduces the number of HTTP requests from the
browser to the server.
</para>
- <para>
- The optimization code is quite simple as all the CSS files are parsed at
the server start and all the <literal>@import</literal> and
<literal>url(...)</literal> references are rewritten to support a single flat
file. The result is stored in a cache directly used from the
<literal>ResourceRequestFilter</literal>.
+
+ <para>
+ The optimization code is quite simple as all the CSS files are parsed at
the server start and all the <literal>@import</literal> and
<literal>url(...)</literal> references are rewritten to support a single flat
file. The result is stored in a cache directly used from the
<literal>ResourceRequestFilter</literal>.
</para>
- <para>
- Although the optimization is useful for a production environment, it may
be easier to deactivate this optimization while debugging stylesheets. Set the java system
property <literal>exo.product.developing</literal> to
<literal>true</literal> to disable the optimization.
+
+ <para>
+ Although the optimization is useful for a production environment, it may
be easier to deactivate this optimization while debugging stylesheets. Set the java system
property <literal>exo.product.developing</literal> to
<literal>true</literal> to disable the optimization.
</para>
- <para>
- For example, the property can be passed as a JVM parameter with
<literal>-D</literal> option when running JBoss Enterprise Portal Platform.
+
+ <para>
+ For example, the property can be passed as a JVM parameter with
<literal>-D</literal> option when running JBoss Enterprise Portal Platform.
</para>
-
<programlisting><command>sh jboss-as/bin/run.sh
-Dexo.product.developing=true</command></programlisting>
- <!-- <programlisting language="Java"
role="Java"><xi:include parse="text"
href="../../extras/PortalDevelopment_Skinning/default192.java"
xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting>
--> <warning>
- <para>
- This option may cause display bugs in some browsers.
- </para>
-
+<!-- <programlisting language="Java"
role="Java"><xi:include parse="text"
href="../../extras/PortalDevelopment_Skinning/default192.java"
xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting>
-->
+ <warning>
+ <para>
+ This option may cause display bugs in some browsers.
+ </para>
</warning>
-
- </section>
-
+ </section>
+
<section
id="sect-Reference_Guide-Tips_and_Tricks-Some_CSS_Techniques">
<title>Some CSS Techniques</title>
- <para>
- It is recommended that users have some experience with CSS before
studying JBoss Enterprise Portal Platform CSS.
+
+ <para>
+ It is recommended that users have some experience with CSS before studying
JBoss Enterprise Portal Platform CSS.
</para>
- <para>
- JBoss Enterprise Portal Platform relies heavily on CSS to create the
layout and effects for the UI. Some common techniques for customizing JBoss Enterprise
Portal Platform CSS are explained below.
+
+ <para>
+ JBoss Enterprise Portal Platform relies heavily on CSS to create the
layout and effects for the UI. Some common techniques for customizing JBoss Enterprise
Portal Platform CSS are explained below.
</para>
- <section
id="sect-Reference_Guide-Some_CSS_Techniques-Border_Pattern">
- <title>Border Pattern</title>
- <para>
- The decorator is a pattern to create a contour or a curve around an
area. In order to achieve this effect you need to create nine cells. The
<literal>BODY</literal> is the central area that you want to decorate. The
other eight cells are distributed around the <literal>BODY</literal> cell. You
can use the width, height and background image properties to achieve any decoration effect
that you want.
- </para>
- <mediaobject>
- <imageobject>
- <imagedata
fileref="images/PortalDevelopment/Skinning/decoratorPattern.png"
format="PNG" width="418" />
- </imageobject>
-
- </mediaobject>
-
+
+ <section
id="sect-Reference_Guide-Some_CSS_Techniques-Border_Pattern">
+ <title>Border Pattern</title>
+
+ <para>
+ The decorator is a pattern to create a contour or a curve around an
area. In order to achieve this effect you need to create nine cells. The
<literal>BODY</literal> is the central area that you want to decorate. The
other eight cells are distributed around the <literal>BODY</literal> cell. You
can use the width, height and background image properties to achieve any decoration effect
that you want.
+ </para>
+
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/PortalDevelopment/Skinning/decoratorPattern.png"
format="PNG" width="418" />
+ </imageobject>
+ </mediaobject>
<programlisting language="XML" role="XML"><xi:include
href="../../extras/PortalDevelopment_Skinning/default193.xml"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
-
</section>
-
- <section
id="sect-Reference_Guide-Some_CSS_Techniques-Left_Margin_Left_Pattern">
- <title>Left Margin Left Pattern</title>
- <para>
- Left margin left pattern is a technique to create two blocks side by
side. The left block will have a fixed size and the right block will take the rest of the
available space. When the user resizes the browser the added or removed space will be
taken from the right block.
- </para>
- <mediaobject>
- <imageobject>
- <imagedata
fileref="images/PortalDevelopment/Skinning/leftMarginPattern.png"
format="PNG" width="303" />
- </imageobject>
-
- </mediaobject>
-
+
+ <section
id="sect-Reference_Guide-Some_CSS_Techniques-Left_Margin_Left_Pattern">
+ <title>Left Margin Left Pattern</title>
+
+ <para>
+ Left margin left pattern is a technique to create two blocks side by
side. The left block will have a fixed size and the right block will take the rest of the
available space. When the user resizes the browser the added or removed space will be
taken from the right block.
+ </para>
+
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/PortalDevelopment/Skinning/leftMarginPattern.png"
format="PNG" width="303" />
+ </imageobject>
+ </mediaobject>
<programlisting language="XML" role="XML"><xi:include
href="../../extras/PortalDevelopment_Skinning/default194.xml"
parse="text"
xmlns:xi="http://www.w3.org/2001/XInclude"
/></programlisting>
-
</section>
-
-
- </section>
-
-
- </section>
-
-
-</chapter>
-
+ </section>
+ </section>
+ </chapter>