I had an experience of creating theme by manually creating a new folder ( of desired name for new theme) under
was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/markup
directory and then copy existing theme content to new theme folder and then finally make changes to required jspf, css, images as per business need.
But, creating a new theme by this approach doesn't come under best practice, because it requires you to export wps.war, update the war.war file and then again deploying the updated wps.war file.
So anytime if you want to make any changes, you will require to update and redeploy wps.war file.This made developing and managing custom themes and skins difficult.
Best Practise for creating custom themes and skins
With WebSphere portal 6.1, new themes and skins should be packaged in their own war file, or optionally ear file.Once you are done with packaging your theme into a war file, the theme war is deployed to WebSphere_Portal application server or cluster via WebSphere admin console.
So, here i am writing steps to create basic custom theme just to have header and footer. (You can later on enhance your theme as needed.)
1) In RAD, create a Dynamic Web Project.
2) Crate folder called themes and skins under webcontent
3) create html folder under themes.
4) create folder for your new theme ( ex:- MyTheme)
5) Create basic 3 jsp called Default.jsp, Header.jsp and Footer.jsp
6) Put your required css, images and js files on your file system and include them in your default.jsp.
( In actual dev, stag or prod portal, these css, images and js files should be placed on WebServer and then make change to path of img,css,js in default.jsp accordingly)
7) Put your header html section in Header.jsp and required footer html to Footer.jsp
8) Include, Header.jsp and Footer.jsp into Default.jsp.
( put
9) Export your project as war.
10) Deploy war to WebSphere Portal Application Server.
( Be sure to select WebSphere Portal in "Map modules to servers" step.
Once it is deployed, start your theme application and if it's clustered env, don't forget to sync your nodes.)
11) Next step will require to tell portal about new theme.
Go to PortalServer/doc/xml-samples/DeployThemeFromWebModule.xml
Make changes to DeployThemeFromWebModule.xml and import it back to portal from Portal Administration.
12) Verifying new theme. You should now see you new theme entry inside Themes and Skins section in portal admin.
and that's it, you are good to go. Create a new page and apply your theme.
Feel free to post comment if you have face any trouble in creating and deploying custom theme.
11 comments:
Thanks for this guide.
There is an interesting side affect to deploying your theme in a separate WAR or EAR. The session is not the same as the wps.war. So for instance if you have a servlet filter in the wps.war that does some initial processing for a user and stores the object in the wps session, it won't be available in the custom theme war. To get around this we had to put the object on every request object, which is passed to the custom theme war.
Pete K
Hi Peter,
I would suggest to store your custom object in DynaCache if you want to access the same through out in portal including theme and any of your portlet application.
let me know, if you have any queris.
Do it support to include the custom screen like Login.jsp in the seperate WAR? Any idea for this case.
Hi
I am a first time user for creating themes, What does this step mean?
Put your required css, images and js files on your file system and include them in your default.jsp.
.
I did keep my CSS and Images in the webcontent folder. and How can we include them in the default.jsp?
Also you could have referenced your styles in style.jspf
hi there..... can help whit portal theme, is possible add a portlet into hean.jspf o a PortalWeb2 theme?
It's been great time to read your article, really informative thanks keep it up.
Alternatively, why dont we use copy and reusing the themes and skins in below way:
1. Copy the old themes and skins from wps.war and paste in the same place.
2.Rename the themes and skins as you wish.
3.Create a project in RAD as you desired [say myTheme]
4. Copy the .project file from this project to the new theme that we created.
5. Delete this project.
6. import the project from wps.war and start doing the changes.
7. To reflect your changes dynamically we can change the file named ibm-web-ext.xmi under wps.ear\wps.war\WEB-INF and change the entry reloadingEnabled from false to true.
Thus you can create new themes and skins easily.
Alternatively, why dont we use copy and reusing the themes and skins in below way:
1. Copy the old themes and skins from wps.war and paste in the same place.
2.Rename the themes and skins as you wish.
3.Create a project in RAD as you desired [say myTheme]
4. Copy the .project file from this project to the new theme that we created.
5. Delete this project.
6. import the project from wps.war and start doing the changes.
7. To reflect your changes dynamically we can change the file named ibm-web-ext.xmi under wps.ear\wps.war\WEB-INF and change the entry reloadingEnabled from false to true.
Thus you can create new themes and skins easily.
thank u very much, it is very useful i tried this and i succeed.
Post a Comment