Creating Themes for OMNI Portlets

In OMNI Portal each theme can have more than one template. Template forms the design skeleton for portlets. By default every Theme will have one template for portlets. The file name for that template is “portlet.template”. When the designer decides to override the default portlet template, he can design portlet specific template and name the template as projectname#portletname.template. The steps involved in designing a theme is as follows

1. Identify the template name - The developer has to tell the designer the project name and the actual portlet name. The naming convention would be projectname#portletname.template
2. Slicing – Designer starts slicing of graphic image in fireworks
3. Directory Structure – Create a folder for your workspace. Inside the workspace folder create two folders one for images and another with the name “css”.  For instance lets say we are doing design for RaceManagerPortlet which is under GeneralSetup project, the workspace folder name can be racetemplate and the images folder can be images-race.
4. Exporting – From fireworks export the image slices as HTML page. Please make sure to place the images inside the images folder created earlier.
5. Work on Dreamweaver – Open the HTML page in dreamweaver. Convert the table width to 100%. Switch to Coding View and delete the row/column that has spacer.gif file. Now switch back to Design View and manually adjust your table rows and columns.
6. Creation of CSS File – Now in dreamweaver create a CSS File under css folder. First step is removal of all tr/td tag attributes from the HTML page using css. Second step is replacing of img tag with div tag(s). The main reason why we doing this is to over come the absolute path referrence problem. All path referred in css must be relative path.
7. Preview of template with CSS – Switch to design mode and view the tempate. Make sure you see what you wanted to see. If you get it what you wanted you are almost done already.
8. Integration of Template into Portal – Copy the template html page and rename it as template file name (Refer point number 1). Open the template file in notepad and remove the unwanted codes, before the <table ….> tag and after the </table>. Copy this file into OMNI template folder (webapps\omni\themes\brush\default\templates).
9. Integration of CSS and images – Copy your css file into webapps\omni\themes\brush\default\css folder. Now open the default.css file and import your css file inside the default.css file. Also copy your image folder into webapps\omni\themes\brush\default folder.
10. Viewing of Template – Start the tomcat login to the portal and enable the portlet that is going to use the template you have designed. Feel the power of template driven portlets.