Sun Java logo     Previous      Contents      Index      Next     

Sun logo
Sun Java System Portal Server 6 2004Q2 Desktop Customization Guide 

Chapter 13
Customizing the Global Themes

This chapter contains the following:

What is a Theme?

The Desktop theme provides the capability of creating a customizable user interface that allows the end users to select different look and feel for their Desktop.

The definition of a theme in Sun Java System Portal Server software Desktop is a collection of user interface attributes that are used in the markup output from the Desktop. The attributes can be colors, fonts, and images. Out of the box, there are eight themes that come with the sample portal and each theme contains thirty eight (38) attributes.

Customization Overview

There are two levels of customization for the themes:

The number of themes and theme attributes are configurable by the administrators. Theme and theme attributes are display profile properties; so they can be modified through the Sun Java System Identity Server software administration console, or they can be edited in the display profile directly. The theme properties are defined as global properties in the organization level in the sample portal. So, when a new theme is created, all users in the organization will see it.

The end user can select one of the preset themes that are defined by the administrator, or customize some theme attribute values inside of the theme page in the Desktop. When the theme changes, it applies to all the containers in the Desktop, and also, the changed property will be stored in the user level display profile.

There are tag library functions defined to allow JSPs to retrieve the theme related values from the display profile (see Appendix D, "JavaServer Pages Tag Library Reference" for more information.) Behind the scene, the tag library functions use the Theme Java class to get the theme properties. For more information on the Theme Java class, please see the Java docs for com.sun.portal.providers.context.Theme.

GlobalThemes Display Profile Definition

The following display profile XML fragment shows the eight themes defined in portal-server-install-root/SUNWps/samples/desktop/dp-org.xml file.

Code Example 13-1  Display Profile Definition for GlobalThemes  

<Collection name="GlobalThemes" propagate="false">

    <Collection name="SunTheme">

        <String name="description" value="Sun"/>

        <String name="bgColor" value="white"/>

        <String name="titleBarColor" value="#999999"/>

        <String name="fontColor" value="black"/>

        <String name="borderColor" value="#999999"/>

        <String name="borderWidth" value="1"/>

        <String name="fontFace" value="Sans-serif"/>

        <String name="fontSize" value="3"/>

        <String name="activeBulletImage" value="branded_bullet_on.gif"/>

        <String name="inactiveBulletImage" value="branded_bullet_off.gif"/>

        <String name="brandImage" value="logo_sun.gif"/>

        <String name="brandImage2" value="sunONE_productlogo.gif"/>

       <String name="brandImageBgColor" value="#594FBF"/>

       <String name="brandImage2BgColor" value="#FBE249"/>

       <String name="brandBgColor" value="#ffffff"/>

       <String name="brandImageWidth" value="110"/>

       <String name="headerBgColor" value="#e5e5e5"/>

       <String name="headerFontColor" value="#594FBF"/>

       <String name="headerText" value="sansSerif11Font"/>

       <String name="tabNotchImage" value="tabNotch.gif"/>

       <String name="tabColor" value="#cccccc"/>

       <String name="tabFontColor" value="#000000"/>

        <String name="contentLayoutLinkColor" value="#FFFFFF"/>

       <String name="contentLayoutText" value="sansSerif10Font"/>

       <String name="linkSeparatorColor" value="#CCCCCC"/>

       <String name="tableBgColor" value="#FFFFFF"/>

        <String name="titleFontColor" value="#ffffff"/>

        <String name="titleText" value="sansSerif10Font"/>

        <String name="channelHighlightColor" value="#ffffff"/>

        <String name="channelLinkColor" value="#3a2eb5"/>

       <String name="previewImage" value="Sun_preview.gif"/>

        <String name="helpImage" value="b_help.gif"/>

        <String name="removeImage" value="b_remove.gif"/>

       <String name="minimizeImage" value="b_minimize.gif"/>

       <String name="maximizeImage" value="b_maximize.gif"/>

        <String name="normalizeImage" value="b_normal.gif"/>

       <String name="attachImage" value="b_attach.gif"/>

       <String name="detachImage" value="b_new_window.gif"/>

       <String name="editImage" value="b_edit.gif"/>

   </Collection>

   <Collection name="FieryTheme">

       <String name="description" value="Fiery"/>

       <String name="bgColor" value="white"/>

       <String name="titleBarColor" value="#990000"/>

       <String name="fontColor" value="black"/>

       <String name="borderColor" value="#990000"/>

       <String name="borderWidth" value="1"/>

       <String name="fontFace" value="Sans-serif"/>

       <String name="fontSize" value="3"/>

       <String name="activeBulletImage" value="fiery_bullet_on.gif"/>

       <String name="inactiveBulletImage" value="fiery_bullet_off.gif"/>

       <String name="brandImage" value="Fiery_000000.gif"/>

       <String name="brandImage2" value="spacer.gif"/>

       <String name="brandImageBgColor" value="#000000"/>

       <String name="brandImage2BgColor" value="#000000"/>

       <String name="brandBgColor" value="#000000"/>

       <String name="headerBgColor" value="#000000"/>

       <String name="brandImageWidth" value="243"/>

        <String name="headerFontColor" value="#FFFFFF"/>

       <String name="headerText" value="sansSerif11Font"/>

       <String name="tabNotchImage" value="black_tabend.gif"/>

       <String name="tabColor" value="#FF3300"/>

       <String name="tabFontColor" value="#000000"/>

       <String name="contentLayoutLinkColor" value="#ff3300"/>

       <String name="contentLayoutText" value="sansSerif10Font"/>

        <String name="linkSeparatorColor" value="#000000"/>

       <String name="tableBgColor" value="#999999"/>

       <String name="titleFontColor" value="#ffffff"/>

        <String name="titleText" value="sansSerif10Font"/>

        <String name="channelHighlightColor" value="#ffffff"/>

       <String name="channelLinkColor" value="#3a2eb5"/>

        <String name="previewImage" value="Fiery_preview.gif"/>

       <String name="helpImage" value="b_help.gif"/>

        <String name="removeImage" value="b_remove.gif"/>

        <String name="minimizeImage" value="b_minimize.gif"/>

       <String name="maximizeImage" value="b_maximize.gif"/>

        <String name="normalizeImage" value="b_normal.gif"/>

        <String name="attachImage" value="b_attach.gif"/>

        <String name="detachImage" value="b_new_window.gif"/>

        <String name="editImage" value="b_edit.gif"/>

    </Collection>

    <Collection name="BreezyTheme">

        <String name="description" value="Breezy"/>

        <String name="bgColor" value="white"/>

       <String name="titleBarColor" value="#336699"/>

       <String name="fontColor" value="black"/>

        <String name="borderColor" value="#336699"/>

        <String name="borderWidth" value="1"/>

        <String name="fontFace" value="Sans-serif"/>

        <String name="fontSize" value="3"/>

        <String name="activeBulletImage" value="breezy_bullet_on.gif"/>

        <String name="inactiveBulletImage" value="breezy_bullet_off.gif"/>

        <String name="brandImage" value="Breezy_FFFFFF.gif"/>

        <String name="brandImage2" value="spacer.gif"/>

        <String name="brandImageBgColor" value="#FFFFFF"/>

        <String name="brandImage2BgColor" value="#FFFFFF"/>

        <String name="brandBgColor" value="#FFFFFF"/>

        <String name="headerBgColor" value="#FFFFFF"/>

        <String name="brandImageWidth" value="243"/>

        <String name="headerFontColor" value="#000000"/>

       <String name="headerText" value="sansSerif11Font"/>

       <String name="tabNotchImage" value="tabNotch.gif"/>

        <String name="tabColor" value="#CCCC66"/>

        <String name="tabFontColor" value="#000000"/>

        <String name="contentLayoutLinkColor" value="#FFFFFF"/>

       <String name="contentLayoutText" value="sansSerif10Font"/>

       <String name="linkSeparatorColor" value="#ED471E"/>

       <String name="tableBgColor" value="#CCCCFF"/>

       <String name="titleFontColor" value="#ffffff"/>

       <String name="titleText" value="sansSerif10Font"/>

        <String name="channelHighlightColor" value="#ffffff"/>

       <String name="channelLinkColor" value="#3a2eb5"/>

        <String name="previewImage" value="Breezy_preview.gif"/>

       <String name="helpImage" value="b_help.gif"/>

        <String name="removeImage" value="b_remove.gif"/>

        <String name="minimizeImage" value="b_minimize.gif"/>

        <String name="maximizeImage" value="b_maximize.gif"/>

        <String name="normalizeImage" value="b_normal.gif"/>

        <String name="attachImage" value="b_attach.gif"/>

        <String name="detachImage" value="b_new_window.gif"/>

        <String name="editImage" value="b_edit.gif"/>

    </Collection>

    <Collection name="SereneTheme">

        <String name="description" value="Serene"/>

        <String name="bgColor" value="white"/>

       <String name="titleBarColor" value="#EAE7E7"/>

       <String name="fontColor" value="black"/>

        <String name="borderColor" value="#EAE7E7"/>

       <String name="borderWidth" value="0"/>

       <String name="fontFace" value="Sans-serif"/>

       <String name="fontSize" value="3"/>

        <String name="activeBulletImage" value="serene_bullet_on.gif"/>

        <String name="inactiveBulletImage" value="serene_bullet_off.gif"/>

        <String name="brandImage" value="Serene_330099.gif"/>

        <String name="brandImage2" value="spacer.gif"/>

        <String name="brandImageBgColor" value="#330099"/>

        <String name="brandImage2BgColor" value="#330099"/>

       <String name="brandBgColor" value="#330099"/>

        <String name="headerBgColor" value="#330099"/>

        <String name="brandImageWidth" value="243"/>

        <String name="headerFontColor" value="#FFFFFF"/>

        <String name="headerText" value="sansSerif11Font"/>

       <String name="tabNotchImage" value="serene_tabend.gif"/>

        <String name="tabColor" value="#9999FF"/>

        <String name="tabFontColor" value="#000000"/>

        <String name="contentLayoutLinkColor" value="#330099"/>

       <String name="contentLayoutText" value="sansSerif10Font"/>

       <String name="linkSeparatorColor" value="#9999FF"/>

        <String name="tableBgColor" value="#FFFFFF"/>

        <String name="titleFontColor" value="#330099"/>

       <String name="titleText" value="sansSerif10Font"/>

       <String name="channelHighlightColor" value="#ffffcc"/>

        <String name="channelLinkColor" value="#3a2eb5"/>

       <String name="previewImage" value="Serene_preview.gif"/>

       <String name="helpImage" value="b_help.gif"/>

        <String name="removeImage" value="b_remove.gif"/>

       <String name="minimizeImage" value="b_minimize.gif"/>

       <String name="maximizeImage" value="b_maximize.gif"/>

       <String name="normalizeImage" value="b_normal.gif"/>

       <String name="attachImage" value="b_attach.gif"/>

       <String name="detachImage" value="b_new_window.gif"/>

        <String name="editImage" value="b_edit.gif"/>

    </Collection>

    <Collection name="SportingTheme">

        <String name="description" value="Sporting"/>

        <String name="bgColor" value="white"/>

        <String name="titleBarColor" value="#009999"/>

        <String name="fontColor" value="black"/>

        <String name="borderColor" value="#009999"/>

        <String name="borderWidth" value="1"/>

        <String name="fontFace" value="Sans-serif"/>

        <String name="fontSize" value="3"/>

        <String name="activeBulletImage" value="sporting_bullet_on.gif"/>

        <String name="inactiveBulletImage" value="sporting_bullet_off.gif"/>

        <String name="brandImage" value="Sporting_000000.gif"/>

        <String name="brandImage2" value="spacer.gif"/>

        <String name="brandImageBgColor" value="#000000"/>

        <String name="brandImage2BgColor" value="#000000"/>

        <String name="brandBgColor" value="#000000"/>

            <String name="headerBgColor" value="#000000"/>

        <String name="brandImageWidth" value="243"/>

        <String name="headerFontColor" value="#FFFFFF"/>

        <String name="headerText" value="sansSerif11Font"/>

        <String name="tabNotchImage" value="black_tabend.gif"/>

        <String name="tabColor" value="#CCCCCC"/>

        <String name="tabFontColor" value="#000000"/>

        <String name="contentLayoutLinkColor" value="#000000"/>

        <String name="contentLayoutText" value="sansSerif10Font"/>

        <String name="linkSeparatorColor" value="#CCCCCC"/>

        <String name="tableBgColor" value="#FFFFFF"/>

        <String name="titleFontColor" value="#000000"/>

        <String name="titleText" value="sansSerif10Font"/>

        <String name="channelHighlightColor" value="#ffffff"/>

        <String name="channelLinkColor" value="#3a2eb5"/>

        <String name="previewImage" value="Sporting_preview.gif"/>

        <String name="helpImage" value="b_help.gif"/>

        <String name="removeImage" value="b_remove.gif"/>

        <String name="minimizeImage" value="b_minimize.gif"/>

        <String name="maximizeImage" value="b_maximize.gif"/>

        <String name="normalizeImage" value="b_normal.gif"/>

       <String name="attachImage" value="b_attach.gif"/>

       <String name="detachImage" value="b_new_window.gif"/>

        <String name="editImage" value="b_edit.gif"/>

    </Collection>

    <Collection name="DustyTheme">

        <String name="description" value="Dusty"/>

        <String name="bgColor" value="white"/>

        <String name="titleBarColor" value="#330000"/>

        <String name="fontColor" value="black"/>

        <String name="borderColor" value="#330000"/>

        <String name="borderWidth" value="1"/>

        <String name="fontFace" value="Sans-serif"/>

        <String name="fontSize" value="3"/>

        <String name="activeBulletImage" value="dusty_bullet_on.gif"/>

        <String name="inactiveBulletImage" value="dusty_bullet_off.gif"/>

        <String name="brandImage" value="Dusty_FFFFFF.gif"/>

        <String name="brandImage2" value="spacer.gif"/>

        <String name="brandImageBgColor" value="#FFFFFF"/>

        <String name="brandImage2BgColor" value="#FFFFFF"/>

       <String name="brandBgColor" value="#FFFFFF"/>

        <String name="headerBgColor" value="#FFFFFF"/>

        <String name="brandImageWidth" value="243"/>

        <String name="headerFontColor" value="#330000"/>

        <String name="headerText" value="sansSerif11Font"/>

        <String name="tabNotchImage" value="tabNotch.gif"/>

        <String name="tabColor" value="#999966"/>

        <String name="tabFontColor" value="#000000"/>

        <String name="contentLayoutLinkColor" value="#CC9900"/>

        <String name="contentLayoutText" value="sansSerif10Font"/>

        <String name="linkSeparatorColor" value="#ED471E"/>

        <String name="tableBgColor" value="#CCCC99"/>

        <String name="titleFontColor" value="#FFFFCC"/>

        <String name="titleText" value="sansSerif10Font"/>

        <String name="channelHighlightColor" value="#ffffff"/>

        <String name="channelLinkColor" value="#3a2eb5"/>

        <String name="previewImage" value="Dusty_preview.gif"/>

        <String name="helpImage" value="b_help.gif"/>

        <String name="removeImage" value="b_remove.gif"/>

        <String name="minimizeImage" value="b_minimize.gif"/>

        <String name="maximizeImage" value="b_maximize.gif"/>

        <String name="normalizeImage" value="b_normal.gif"/>

        <String name="attachImage" value="b_attach.gif"/>

       <String name="detachImage" value="b_new_window.gif"/>

       <String name="editImage" value="b_edit.gif"/>

    </Collection>

    <Collection name="CollegiateTheme">

        <String name="description" value="Collegiate"/>

        <String name="bgColor" value="white"/>

        <String name="titleBarColor" value="#000033"/>

        <String name="fontColor" value="black"/>

        <String name="borderColor" value="#000033"/>

        <String name="borderWidth" value="1"/>

       <String name="fontFace" value="Sans-serif"/>

        <String name="fontSize" value="3"/>

        <String name="activeBulletImage" value="collegiate_bullet_on.gif"/>

       <String name="inactiveBulletImage" value="collegiate_bullet_off.gif"/>

       <String name="brandImage" value="Collegiate_FFFFFF.gif"/>

        <String name="brandImage2" value="spacer.gif"/>

       <String name="brandImageBgColor" value="#FFFFFF"/>

        <String name="brandImage2BgColor" value="#FFFFFF"/>

        <String name="brandBgColor" value="#FFFFFF"/>

        <String name="headerBgColor" value="#FFFFFF"/>

        <String name="brandImageWidth" value="243"/>

        <String name="headerFontColor" value="#000000"/>

        <String name="headerText" value="sansSerif11Font"/>

        <String name="tabNotchImage" value="tabNotch.gif"/>

        <String name="tabColor" value="#EED23A"/>

        <String name="tabFontColor" value="#000000"/>

        <String name="contentLayoutLinkColor" value="#EED23A"/>

        <String name="contentLayoutText" value="sansSerif10Font"/>

        <String name="linkSeparatorColor" value="#ED471E"/>

        <String name="tableBgColor" value="#CCCCCC"/>

        <String name="titleFontColor" value="#ffffff"/>

       <String name="titleText" value="sansSerif10Font"/>

        <String name="channelHighlightColor" value="#ffffff"/>

       <String name="channelLinkColor" value="#3a2eb5"/>

       <String name="previewImage" value="Collegiate_preview.gif"/>

        <String name="helpImage" value="b_help.gif"/>

        <String name="removeImage" value="b_remove.gif"/>

        <String name="minimizeImage" value="b_minimize.gif"/>

        <String name="maximizeImage" value="b_maximize.gif"/>

        <String name="normalizeImage" value="b_normal.gif"/>

        <String name="attachImage" value="b_attach.gif"/>

        <String name="detachImage" value="b_new_window.gif"/>

        <String name="editImage" value="b_edit.gif"/>

    </Collection>

   <Collection name="NeonTheme">

        <String name="description" value="Neon"/>

        <String name="bgColor" value="white"/>

        <String name="titleBarColor" value="#CCFF33"/>

        <String name="fontColor" value="black"/>

       <String name="borderColor" value="#CCFF33"/>

       <String name="borderWidth" value="1"/>

        <String name="fontFace" value="Sans-serif"/>

        <String name="fontSize" value="3"/>

        <String name="activeBulletImage" value="neon_bullet_on.gif"/>

       <String name="inactiveBulletImage" value="neon_bullet_off.gif"/>

        <String name="brandImage" value="Neon_000000.gif"/>

       <String name="brandImage2" value="spacer.gif"/>

       <String name="brandImageBgColor" value="#000000"/>

        <String name="brandImage2BgColor" value="#000000"/>

        <String name="brandBgColor" value="#000000"/>

        <String name="headerBgColor" value="#000000"/>

        <String name="brandImageWidth" value="243"/>

       <String name="headerFontColor" value="#FFFFFF"/>

        <String name="headerText" value="sansSerif11Font"/>

        <String name="tabNotchImage" value="black_tabend.gif"/>

        <String name="tabColor" value="#FF0000"/>

       <String name="tabFontColor" value="#000000"/>

       <String name="contentLayoutLinkColor" value="#000000"/>

       <String name="contentLayoutText" value="sansSerif10Font"/>

        <String name="linkSeparatorColor" value="#FF0000"/>

       <String name="tableBgColor" value="#FFFFFF"/>

       <String name="titleFontColor" value="#000000"/>

       <String name="titleText" value="sansSerif10Font"/>

       <String name="channelHighlightColor" value="#ffffff"/>

       <String name="channelLinkColor" value="#3a2eb5"/>

       <String name="previewImage" value="Neon_preview.gif"/>

        <String name="helpImage" value="b_help.gif"/>

        <String name="removeImage" value="b_remove.gif"/>

        <String name="minimizeImage" value="b_minimize.gif"/>

        <String name="maximizeImage" value="b_maximize.gif"/>

        <String name="normalizeImage" value="b_normal.gif"/>

        <String name="attachImage" value="b_attach.gif"/>

        <String name="detachImage" value="b_new_window.gif"/>

        <String name="editImage" value="b_edit.gif"/>

    </Collection>

    </Collection>

    <String name="UserTheme" value="SunTheme" propagate="false"/>

   <Collection name="CustomTheme" propagate="false">

       <String name="bgColor" value=""/>

        <String name="titleBarColor" value=""/>

        <String name="fontColor" value=""/>

       <String name="borderColor" value=""/>

       <String name="borderWidth" value=""/>

       <String name="fontFace" value=""/>

        <String name="fontSize" value=""/>

        <String name="activeBulletImage" value=""/>

        <String name="inactiveBulletImage" value=""/>

       <String name="brandImage" value=""/>

        <String name="brandImage2" value=""/>

        <String name="brandImageBgColor" value=""/>

        <String name="brandImage2BgColor" value=""/>

        <String name="brandBgColor" value=""/>

        <String name="headerBgColor" value=""/>

        <String name="brandImageWidth" value=""/>

        <String name="headerFontColor" value=""/>

        <String name="headerText" value=""/>

        <String name="tabNotchImage" value=""/>

        <String name="tabColor" value=""/>

        <String name="tabFontColor" value=""/>

        <String name="contentLayoutLinkColor" value=""/>

        <String name="contentLayoutText" value=""/>

        <String name="linkSeparatorColor" value=""/>

        <String name="tableBgColor" value=""/>

        <String name="titleFontColor" value=""/>

        <String name="titleText" value=""/>

        <String name="channelHighlightColor" value=""/>

        <String name="channelLinkColor" value=""/>

        <String name="previewImage" value=""/>

        <String name="helpImage" value=""/>

        <String name="removeImage" value=""/>

        <String name="minimizeImage" value=""/>

        <String name="maximizeImage" value=""/>

        <String name="normalizeImage" value=""/>

        <String name="attachImage" value=""/>

        <String name="detachImage" value=""/>

        <String name="editImage" value=""/>

    </Collection>

</Collection>

Theme Properties

The following is a list of theme properties that can be defined, modified, and/or customized in the display profile document. Please reference to the Glossary of Terms for more detailed description for the theme properties.

In the following table, column one lists the theme property name and column two provides a brief description of the corresponding theme property.

activeBulletImage

activeBulletGraphics

inactiveBulletImage

inactiveBulletGraphics

brandImage

logo image

brandImage2

Product name image

brandImageBgColor

header logo bg color

brandImage2BgColor

header product name bg color

brandBgColor

header link box bg color

headerBgColor

header bg color and footer bg color

headerFontColor

header font color

footer font color

headerText

header font size

footer font size

header font face

footer font face

tabNotchImage

tabNotch image

titleText

selected tab font face

selected tab font size

unselected tab font face

unselected tab font size

channel title font face

channel title font size

titleFontColor

selected tab font color

channel title font color

fontSize

channel font size

channel link font size

fontFace

channel font face

channel link font face

titleBarColor

selected tab bg color

channel title bar bg color

content/layout bar color

channel border color

page piping color (bottom)

button bg color

borderColor

tabColor

unselected tab bg color

secondary channel title bar color

tabFontColor

unselected tab font color

bgColor

channel bg color

fontColor

channel font color

borderWidth

channel border width

tableBgColor

table bg color

page piping, top

channelHightlightColor

highlight color for channel content (as seen in the Placida theme JSP channel)

linkSeparatorColor

link separator color (in the toolbar, between Content and Layout)

footer link separator color

channelLinkColor

channel link color

contentLayoutLinkColor

content/layout link color

contentLayoutText

content/layout link font size

content/layout link font face

brandImageWidth

brand image width

previewImage

preview image (on preset themes page)

removeImage

remove image (for the channel title bar)

detachImage

detach image (for the channel title bar)

helpImage

help image (for the channel title bar)

editImage

edit image (for the channel title bar)

minimizeImage

minimize image (for the channel title bar)

maximizeImage

maximize image (for the channel title bar)

normalizeImage

normalize image (in the maximized channel)

attachImage

attach image (in the popup window)

Glossary of Terms

The following table give some detailed description of where the theme attributes are actually used in the desktop.

Table 13-1  Glossary of Terms  

Term

Description

Header

The banner area at the top of the portal page. Contains the branding and the global links.

Bullet graphics

The “dot” graphics that go next to the global links in the header

Logo, product name, link

The three areas in the header for the Sun theme

Footer

The narrow banner at the bottom of the portal page. Contains the global links

Tab notch

The graphic that goes in the upper left corner of the tab table cells

Selected tab

The tab whose contents are displayed

Unselected tab

The other tabs whose contents are not seen

Content/layout bar

The tool bar underneath the tabs that contains the content and layout links

Channel

The data containers displayed inside each tab

Page piping

The narrow bands of color at the top and bottom of the portal page

Table background

The areas the channels sit in

Highlight color for channel content

A contrasting color for tables inside channels

Secondary channel title bar

An extra color bar beneath the standard channel title bar

Link separator

A pipe used between links in the content/layout bar

Adding and Customizing Global Themes

When you add (or customize) a global theme, all channels see the change, as themes are a global property for all channels.

    To Add a Theme to the Sample Portal
  1. Develop the display profile XML definition for the new theme and ensure that the new collection has all thirty eight (38) properties defined in the display profile.

    2. The collection can be added either using the Identity Server administration console, or via the dpadmin command.

  2. Copy new images into the portal-server-install-root/SUNWps/web-src. That is:
    • activeBulletImage, inactiveBulletImage, brandImage, brandImage2, previewImage: these images must be copied in to the portal-server-install-root/SUNWps/web-src/images directory.
    • helpImage, removeImage, minimizeImage, maximizeImage, normalImage, attachImage, detachImage, editImage: these images must be copied in to the portal-server-install-root/SUNWps/web-src/desktop/images directory.
    • tabNotchImage must be copied in to the portal-server-install-root/SUNWps/web-src/desktop/tabs/images directory.
  3. Run the deploy command to deploy the image files. For example, type:

    4. portal-server-install-root/SUNWps/bin/deploy redeploy -deploy_admin_password password

  4. Verify that the new theme shows up on the Desktop’s Theme page.
    To Customize the Current Themes

Change the theme values in the display profile. You can modify the theme properties from the administration console, or by using the dpadmin command to load the XML fragment.

Changing in the administration console is easier, since you want to pin point some specific properties, and change the values. See Editing the Display Profile for loading the display profile into LDAP by using the dpadmin command.

In the sample portal, the portal-server-install-root/SUNWps/samples/desktop/dp-org.xml file defines eight themes. See also, GlobalThemes Display Profile Definition for the default display profile XML fragment for GlobalThemes.

    To Change the Text

The font families and font sizes are combined and defined in the following theme attributes:

The value of these attributes is actually a class defined in the desktop Web-Container-Instance/desktop/style.css file. In the Desktop style.css file, there are predefined font family + font size as follows:

.sansSerif12Font { font-family: sans-serif; font-size: 12pt }

.sansSerif11Font { font-family: sans-serif; font-size: 11pt }

.sansSerif10Font { font-family: sans-serif; font-size: 10pt }

.sansSerif9Font { font-family: sans-serif; font-size: 9pt }

.sansSerif8Font { font-family: sans-serif; font-size: 8pt }

.sansSerif6Font { font-family: sans-serif; font-size: 6pt }

.monospace12Font { font-family: monospace; font-size: 12pt }

.monospace11Font { font-family: monospace; font-size: 11pt }

.monospace10Font { font-family: monospace; font-size: 10pt }

.monospace9Font { font-family: monospace; font-size: 9pt }

.monospace8Font { font-family: monospace; font-size: 8pt }

.monospace6Font { font-family: monospace; font-size: 6pt }

.serif12Font { font-family: serif; font-size: 12pt }

.serif11Font { font-family: serif; font-size: 11pt }

.serif10Font { font-family: serif; font-size: 10pt }

.serif9Font { font-family: serif; font-size: 9pt }

.serif8Font { font-family: serif; font-size: 8pt }

.serif6Font { font-family: serif; font-size: 6pt }

.verdana12Font { font-family: verdana; font-size: 12pt }

.verdana11Font { font-family: verdana; font-size: 11pt }

.verdana10Font { font-family: verdana; font-size: 10pt }

.verdana9Font { font-family: verdana; font-size: 9pt }

.verdana8Font { font-family: verdana; font-size: 8pt }

.verdana6Font { font-family: verdana; font-size: 6pt }

To change the font for the header text, title text, and content and layout text, please use one of the predefined class name, or, add new class definition in the style.css file, and then use it.

    To Change the Sample Anonymous Desktop Theme

Anonymous users cannot choose their own theme as this is determined by the display profile. However, an administrator who has permission to edit the anonymous user’s display profile can change the theme for the anonymous Desktop.

  1. Create a temporary file containing the theme definition.

    2. For example,

    vi newtheme.xml

    <?xml version="1.0" encoding="utf-8" standalone="no"?>

    <!DOCTYPE DisplayProfile SYSTEM "jar://resources/psdp.dtd">

        <Collection name="GlobalThemes">

            <Collection name="NeonTheme">

                <String name="description" value="Neon"/>

                <String name="bgColor" value="white"/>

                <String name="titleBarColor" value="#CCFF33"/>

                <String name="fontColor" value="black"/>

                <String name="borderColor" value="#CCFF33"/>

                <String name="borderWidth" value="1"/>

                <String name="fontFace" value="Sans-serif"/>

                <String name="fontSize" value="3"/>

                <String name="activeBulletImage" value="neon_bullet_on.gif"/>

                <String name="inactiveBulletImage" value="neon_bullet_off.gif"/>

                <String name="brandImage" value="Neon_000000.gif"/>

                <String name="brandImage2" value="spacer.gif"/>

                <String name="brandImageBgColor" value="#000000"/>

                <String name="brandImage2BgColor" value="#000000"/>

                <String name="brandBgColor" value="#000000"/>

                <String name="headerBgColor" value="#000000"/>

                <String name="brandImageWidth" value="243"/>

                <String name="headerFontColor" value="#FFFFFF"/>

                <String name="headerText" value="sansSerif11Font"/>

                <String name="tabNotchImage" value="black_tabend.gif"/>

                <String name="tabColor" value="#FF0000"/>

                <String name="tabFontColor" value="#000000"/>

                <String name="contentLayoutLinkColor" value="#000000"/>

                <String name="contentLayoutText" value="sansSerif10Font"/>

                <String name="linkSeparatorColor" value="#FF0000"/>

                <String name="tableBgColor" value="#FFFFFF"/>

                <String name="titleFontColor" value="#000000"/>

                <String name="titleText" value="sansSerif10Font"/>

                <String name="channelHighlightColor" value="#ffffff"/>

                <String name="channelLinkColor" value="#3a2eb5"/>

                <String name="previewImage" value="Neon_preview.gif"/>

                <String name="helpImage" value="b_help.gif"/>

                <String name="removeImage" value="b_remove.gif"/>

                <String name="minimizeImage" value="b_minimize.gif"/>

                <String name="maximizeImage" value="b_maximize.gif"/>

                <String name="normalizeImage" value="b_normal.gif"/>

                <String name="attachImage" value="b_attach.gif"/>

                <String name="detachImage" value="b_new_window.gif"/>

                <String name="editImage" value="b_edit.gif"/>

            </Collection>

        </Collection>

        <String name="UserTheme" value="NeonTheme" propagate="false"/>

  2. Run the dpadmin command with the add sub-command to load the display profile.

    3. For example, to load the XML fragment to the anonymous user’s node,

    portal-server-install-root/SUNWps/bin/dpadmin add -u "uid=amAdmin,ou=People,o=sesta.com,o=isp" -w password -d "uid=anonymous,ou=people,o=sesta.com,o=isp" newtheme.xml

  3. Log in to the administration console and change the global property. That is:
    1. Select Users from the View pull-down menu.
    2. Select Authlessanonymous
    3. Select View->Portal Desktop on the right panel and select the Edit link.

      4. A popup window displayed.

    4. Select Channel and Container Management.
    5. Select Display Profile: Edit Properties and change User Theme to “NeonTheme”.
    6. Click on Save to save the settings.
  4. Log out of the administration console.


Previous      Contents      Index      Next     

Copyright 2004 Sun Microsystems, Inc. All rights reserved.