WCS PS3: Custom Skin Images

person Bijeshfolder_openOracle, PS3, WebCenterlocal_offer, , access_time April 5, 2011

With Webcenter PS3, Oracle offers something they term “Round-trip Development” using JDeveloper. Simply put, this enables you to

a) download resources from WebCenter Spaces to JDeveloper
b) edit or extend the resources in JDeveloper
c) Directly upload the resources to the server.

Documentation for this in Section 49 in the Developer’s Guide for Oracle WebCenter. As usual, the documentation only speaks of the simplest scenario.

How do I use images in a custom skin? How do I deploy the images and how do I reference them? The documentation points at the “shared” as the location for all content that the resources utilize but does not elaborate on how to actually use the content files. The shared folder is within the WebCenterSpacesResources project

Thanks to Maiko over at the Oracle Forums for clarifying this for me.

  1. Create a folder structure within the shared folder for your resource. For e.g. for a skin titled “mySkin”, you may want to create the path skins/mySkin/
  2. Setup the content directory for the resource (template, skin or whatever else) to point to this folder. You may do this by using the Update Portal Resource wizard in JDeveloper.

  3. Add your images and other files into this folder. For e.g., I added images into a sub-folder images within mySkin
  4. Reference images/files using the full path starting at /oracle.  For e.g.
  5. background-image: url('/oracle/webcenter/siteresources/scopedMD/shared/skins/mySkin/images/bg.png');



2) How do I reuse the custom skin developed for PS2 and deployed in a shared library (custom.webcenter.spaces)? The whitepaper – “Using WebCenter Spaces Extension Samples” – describes how to reference the PS2 library using the new shared library.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>