How to make different theme for some portlets

Question

I am new to Liferay and I have the following problem. I need to create portal theme - this is ok, no problem. This will style my portal and default portlets. But in some of my own portlets I use ZKOSS pages, which reqires completely different styling. My question is, how to do it that Liferay theme classes will not influence my ZKOSS pages? There are some general styles in Liferay theme like for input etc but I dont want those rules to be applied inside my ZKOSS portlets. Hope I explained myself clearly. Any suggestions?

Answer 1

You can set the <css-class-wrapper>My_Portlet</css-class-wrapper> in liferay-portlet.xml

for details see: http://www.liferay.com/community/wiki/-/wiki/Main/Liferay+UI+Guidelines

Answer 2

I don't know ZKOSS portlets, but the generic way to introduce portlet specific theme css is through the DOM: Inspect your page, see how your ZKOSS portlets are generated: Liferay generates a wrapper around each portlet that contains the portlet-name, you can use that for styling.

As I don't have ZKOSS available, here's an example to have some specifically ugly styling applied to every Navigation portlet:

 .portlet-navigation .portlet {
       background: purple;
 }

Use Firebug or similar tools to find out the relevant DOM structure and just add the required styling for these elements to your theme

Answer 3

You can also use Liferay color schemes to define separate UI for same portlet.

Liferay 7/DXP: https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/specifying-color-schemes

Liferay 6.2:

https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-2/specifying-color-schemes