[gatein-commits] gatein SVN: r8160 - epp/docs/branches/5.2/Reference_Guide/en-US/modules/PortalDevelopment.

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>