Window styles are the CSS applied to the window decoration. When the administrator selects a new application to add to a page, he can decide which style of decoration would go around the window if any.
Window Styles are defined within the gatein-resources.xml file which is used by the skin service to
deploy the window style into the portal. Window styles can belong in with a window style category, this
category and the window styles need to be specified in the resources file.
The following gatein-resource.xml fragment adds MyThemeBlue and MyThemeRed to
the MyTheme category.
<window-style>
<style-name>MyTheme</style-name>
<style-theme>
<theme-name>MyThemeBlue</theme-name>
</style-theme>
<style-theme>
<theme-name>MyThemeRed</theme-name>
</style-theme>
</window-style>
The windows style configuration for the default skin is configured in: 01eXoResources.war/WEB-INF/gatein-resources.xml
Note
When a window style is defined in the gatein-resources.xml file, it will be available
to all portlets whether the current portal skin supports the window decorator or
not. When a new window decorator is added, it is recommended that you add it
to all portal skins or that portal skins share a common stylesheet for window decorators.
To display the window decorators for the skin service, it must have the CSS classes with specific naming related to the window style name. The service will try and display the CSS based on this naming. The CSS class must be included as part of the current portal skin for displaying the window decorators.
The location of the window decorator CSS classes for the default portal theme is located at: 01eXoResources.war/skin/PortletThemes/Stylesheet.css.
Create the CSS file:
/*---- MyTheme ----*/
.MyTheme .WindowBarCenter .WindowPortletInfo {
margin-right: 80px; /* orientation=lt */
margin-left: 80px; /* orientation=rt */
}
.MyTheme .WindowBarCenter .ControlIcon {
float: right;/* orientation=lt */
float: left;/* orientation=rt */
width: 24px;
height: 17px;
cursor: pointer;
background-image: url('background/MyTheme.png');
}
.MyTheme .ArrowDownIcon {
background-position: center 20px;
}
.MyTheme .OverArrowDownIcon {
background-position: center 116px;
}
.MyTheme .MinimizedIcon {
background-position: center 44px;
}
.MyTheme .OverMinimizedIcon {
background-position: center 140px;
}
.MyTheme .MaximizedIcon {
background-position: center 68px;
}
.MyTheme .OverMaximizedIcon {
background-position: center 164px;
}
.MyTheme .RestoreIcon {
background-position: center 92px;
}
.MyTheme .OverRestoreIcon {
background-position: center 188px;
}
.MyTheme .NormalIcon {
background-position: center 92px;
}
.MyTheme .OverNormalIcon {
background-position: center 188px;
}
.UIPageDesktop .MyTheme .ResizeArea {
float: right;/* orientation=lt */
float: left;/* orientation=rt */
width: 18px; height: 18px;
cursor: nw-resize;
background: url('background/ResizeArea18x18.gif') no-repeat left top; /* orientation=lt */
background: url('background/ResizeArea18x18-rt.gif') no-repeat right top; /* orientation=rt */
}
.MyTheme .Information {
height: 18px; line-height: 18px;
vertical-align: middle; font-size: 10px;
padding-left: 5px;/* orientation=lt */
padding-right: 5px;/* orientation=rt */
margin-right: 18px;/* orientation=lt */
margin-left: 18px;/* orientation=rt */
}
.MyTheme .WindowBarCenter .WindowPortletIcon {
background-position: left top; /* orientation=lt */
background-position: right top; /* orientation=rt */
padding-left: 20px; /* orientation=lt */
padding-right: 20px; /* orientation=rt */
height: 16px;
line-height: 16px;
}
.MyTheme .WindowBarCenter .PortletName {
font-weight: bold;
color: #333333;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.MyTheme .WindowBarLeft {
padding-left: 12px;
background-image: url('background/MyTheme.png');
background-repeat: no-repeat;
background-position: left -148px;
}
.MyTheme .WindowBarRight {
padding-right: 11px;
background-image: url('background/MyTheme.png');
background-repeat: no-repeat;
background-position: right -119px;
}
.MyTheme .WindowBarCenter {
background-image: url('background/MyTheme.png');
background-repeat: repeat-x;
background-position: left -90px;
}
.MyTheme .WindowBarCenter .FixHeight {
height: 21px;
padding-top: 8px;
}
.MyTheme .MiddleDecoratorLeft {
padding-left: 12px;
background: url('background/MyTheme.png') repeat-y left;
}
.MyTheme .MiddleDecoratorRight {
padding-right: 11px;
background: url('background/MyTheme.png') repeat-y right;
}
.MyTheme .MiddleDecoratorCenter {
background: #ffffff;
}
.MyTheme .BottomDecoratorLeft {
MyTheme: 12px;
background-image: url('background/MyTheme.png');
background-repeat: no-repeat;
background-position: left -60px;
}
.MyTheme .BottomDecoratorRight {
padding-right: 11px;
background-image: url('background/MyTheme.png');
background-repeat: no-repeat;
background-position: right -30px;
}
.MyTheme .BottomDecoratorCenter {
background-image: url('background/MyTheme.png');
background-repeat: repeat-x;
background-position: left top;
}
.MyTheme .BottomDecoratorCenter .FixHeight {
height: 30px;
}
To set the default window style to be used for a portal, you need to specify the CSS classes for a theme called DefaultTheme.
Note
You do not need to specify DefaultTheme in gatein-resources.xml.