2.1.3. Skins in page markups

The GateIn 3.5 skin contains CSS styles for the portal's components but also shares components that may be reused in portlets. When GateIn 3.5 generates a portal page markup, it inserts the stylesheet links in the page's head tag.

There are two main types of CSS links that will appear in the head tag: a link to the portal skin CSS file and a link to the portlet skin CSS files.

Portal Skin

The portal skin will appear as a single link to a CSS file. This link contains content from all the portal skin classes merged into one file. This allows the portal skin to be transferred more quickly as a single file instead of many multiple smaller files. All pages of the portal have the same skin defined in the CSS file.

Portlet Skin

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.

In the code fragment below, you can see two types of links:


<head>
...
<!-- The portal skin -->
<link id="CoreSkin" rel="stylesheet" type="text/css" href="/eXoResources/skin/Stylesheet.css" />

<!-- The portlet skins -->
<link id="web_FooterPortlet" rel="stylesheet" type="text/css" href= "/web/skin/portal/webui/component/UIFooterPortlet/DefaultStylesheet.css" />
<link id="web_NavigationPortlet" rel="stylesheet" type="text/css" href= "/web/skin/portal/webui/component/UINavigationPortlet/DefaultStylesheet.css" />
<link id="web_HomePagePortlet" rel="stylesheet" type="text/css" href= "/portal/templates/skin/webui/component/UIHomePagePortlet/DefaultStylesheet.css" />
<link id="web_BannerPortlet" rel="stylesheet" type="text/css" href= "/web/skin/portal/webui/component/UIBannerPortlet/DefaultStylesheet.css" />
...
</head>

Note

Both window styles and portlet specification CSS classes are included in the portal skin.

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