0 Replies Latest reply on Aug 18, 2011 7:53 AM by Vikas V

    GateIn : Issue with creating new skin

    Vikas V Newbie

      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,