4

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?

Gatekeeper
  • 1,586
  • 3
  • 21
  • 33

3 Answers3

4

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

Olaf Kock
  • 46,930
  • 8
  • 59
  • 90
  • Yes I get this, but my point is that if(in this case) liferay theme already contains styles for .portlet class, I will have to override its every single property in my .portlet-navigation .portlet class and pray that someone will not add some more to .portlet class, because it will also affect my element inside portlet... – Gatekeeper Apr 04 '12 at 10:52
  • Thanks anyway, I will use solution in other answer because it looks right, even if it does the same thing in the end... – Gatekeeper Apr 04 '12 at 13:35
  • re comment 1: it's you who is in control of your theme, so not too many people can add CSS to ".portlet". And overriding more specific values is exactly the beauty of css. This goes together with the css-class-wrapper that Mark mentioned in the accepted answer. Also, note that the two classes here were just necessary because ".portlet" actually is overloaded to "background:none;" and I wanted to change "background". Had I changed "border:2px solid red;" I wouldn't have needed ".portlet" in the selector. Re comment 2: No problem – Olaf Kock Apr 04 '12 at 14:23
4

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

Mark
  • 17,887
  • 13
  • 66
  • 93
  • Thanks I will sure use this... guess I will just have to keep checking my classes for problem I described in my comment to other answer. Anyway thanks, both answers suggest the same solution but your looks cleaner. – Gatekeeper Apr 04 '12 at 13:33
0

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

designershyam
  • 83
  • 1
  • 8