2.1.6.2. Creating a new window style

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 style configuration

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.

Window style CSS

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;
}

Setting default window style

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.

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus