Custom Skinning in the Webcenter 11g and Image rendering issue..!

Hi All,

I want to share some information about custom skinning in the Webcenter application. This is quite similar to the normal skinning in the ADF application, but we need to configure some points to use custom skinning.

Whenever creating the webcenter portal application you have an option to create all the configuration files using the wizard. That creates all the necessary files in the application including the file portal-skin.css inside oracle/webcenter/portalapp/skins/portal-skin.css.

Generally you can add the styles for the components with the alignment, colors and so on, if you add the images

Steps to do ,

Before start writing your styles in the css file change css level to 3 in the the JDEV preference, this helps you auto suggesting the skin selector classes in the css file while writing.
Tools->Preferences->

1. Add the custom skin selectors in this in the new css file or portal-skin.css file. For example,

af|inputText::content{
color: Blue
}

af|panelBox::header-center:core:default{
background-image: url('/images/cssimages/panelreg.PNG');//background-image: url('../../cssimages/images/panelreg.PNG');
height: 41px;
width: 290px;
}
similar way you can add all the styles for the components for those you need. For more skin selectors http://jdevadf.oracle.com/adf-richclient-demo/faces/components/skinningKeys/panelBox.jspx

Note here have highlighted and commented a line, Usually the when referring the an image inside the style classes in the css file it will allow you to choose the image . If you choose like that the path will be like "url('../../cssimages/images/panelreg.PNG'); ". If you refer like this 'Image will not render in the page' .

This is because if you see the image in the browser using firebug inspect element, the image url will be like this -context-root/mds:/oracle/webcenter/portalapp/shared/faq.PNG.
Here mds: is referring the images. I don't have much idea about why this is coming. It might be the image should be added in the mds I think. Then I used the path like this in the css url('/images/cssimages/panelreg.PNG'); without using the/.../.../. Then its working.



2. Register the skin in the portal by Right click on the css file -> create portal resource

3. Set the default skin family in the adf-config.xml.
Application resources ->Descriptors-> ADF META-INF->adf-config.xml

then go to source and change the skin family name in the value feild.



Note: If you are adding the styles in the portal-skin.css file leave the default value(portal).



4. Set the DISABLE_CONTENT_COMPRESSION value in the web.xml to true. by default it is false. Change is true.

org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION
true

5. Run and test Application page,

For more details about skinning http://docs.oracle.com/cd/E21764_01/webcenter.1111/e10148/jpsdg_skin.htm