Hi,

I'm trying to create a custom skin, without modifying the original one. But I had some issues while creating new skin . It would be great if any one can help me out to solve this issue

Requirement : Create new skin for the portal application which includes menu ,header,layout etc with customized css & images

Issue : In preview section the newly created skin is displaying with out any css and images (Available skin is not displaying properly only blank page is displaying)

Based on the information from Gatein user guide we have included the preview icons of the other skins and to update the other skins with our new portal skin preview.

First Approach :

We have followed the below steps

1.Created new folder

 

\gatein.ear\01eXoResources.war\skin\SelfcareSkin

2.Created the main entry CSS

\gatein.ear\01eXoResources.war\skin\SelfCareStylesheet.css

SelfCareStylesheet.css contains :-

@import url(DefaultSkin/webui/component/Stylesheet.css);

@import url(SelfcareSkin/portal/webui/component/UIPortalApplicationSkin.css);

@import url(SelfcareSkin/webui/component/Stylesheet.css);

@import url(PortletThemes/Stylesheet.css);

@import url(Portlet/Stylesheet.css);

3. Created The folder structure for WebUI components:

\Gatein.ear\01eXoResources.war\skin\SelfcareSkin\webui\component\UIHorizontalMenu-

Contains selfcareSkin folder & menu.css

\gatein.ear\01eXoResources.war\skin\SelfcareSkin\webui\component\UIHorizontalMenu\selfcareSkin\background--->Contains all images

\gatein.ear\01eXoResources.war\skin\SelfcareSkin\webui\component\UIPortalStyle-->Contains selfcareSkin folder & portal_style.css

\gatein.ear\01eXoResources.war\skin\SelfcareSkin\webui\component\UIPortalStyle\selfcareSkin\background --->Contains all images

3.Window decorator CSS are placesd at /webapp/skin/PortletThemes/Stylesheet.css

4.Modifiled the gatein-resources.xml path -->WEB-INF/gatein-resources.xml

<gatein-resources>

<portal-skin>

<skin-name>Selfcare</skin-name>

<css-path>/skin/SelfCareStylesheet .css</css-path>

<overwrite>false</overwrite>

</portal-skin>

5. Added ResourceRequestFilter in to web.xml --->\gatein.ear\01eXoResources.war\WEB-INF/web.xml

<filter>

<filter-name>ResourceRequestFilter</filter-name>

<filter- class>org.exoplatform.portal.application.ResourceRequestFilter</filter-class>

</filter>

<filter-mapping>

<filter-name>ResourceRequestFilter</filter-name>

<url-pattern>*.css</url-pattern>

</filter-mapping>

6.Specified in CSS class UIChangeSkinForm-->

UIChangeSkinForm .UIItemSelector .TemplateContainer .selfcareImage {

margin: auto;

width: 329px; height:204px;

background: url('background/selfcare.jpg') no-repeat top;

cursor: pointer ;

}

7. The preview screenshot is placed at

\gatein.ear\01eXoResources.war\skin\DefaultSkin\portal\webui\component\customization\UIChangeSkinForm\background

But I'm getting the below error when I start the server

13:07:08,301 ERROR [portal.SkinService] Not found <CSS FILE>, the path /eXoResources/skin/Stylesheet.css is invalid, SkinService could not load the skin /eXoResources/skin/Stylesheet.css

Second Approach :

I have tried to custom skin from an existing, used gatein-sample-skin.war instead of 01eXoResources.war (reference url :http://anonsvn.jboss.org/repos/gatein/portal/tags/3.1.0-GA/examples/skins/simpleskin/)

Issue : In preview section after selecting the newly created skin from preview section ,the newly created skin is displaying with out any css and imanges (Available skin is not displaying properly)

As per the infomation from Gatein doucment we have included e the preview icons of the other skins and to update the other skins with your new portal skin preview.

Still the skin css & images are not displaying ..

Third Approach :

We have tried to create .war files with the required css & images and deployed but getting the deployment error while starting the server

If error trace and code is required I can provide that.

Any other better approach I can follow ?

Where could I be going wrong in any of the above approaches?

Thanks in advance!

Regards,