How To Style A Specific Portlet in a Theme

[Darren Smith, módosítva 12 év-val korábban]

Hi there,
I'm new to Liferay and think it's fantastic. I'm playing around with themes at the moment and would like to know how I can specify specific CSS styling to a specific portlet? ie I want to create a theme that gives a general look and feel to all portlets but gives one portlet a different look and feel. I want to be able to do this in the Theme project not in the Portlet project. Is there a way to identify specific portlets in a Liferay theme project to do this?

Thanks for any suggestions,
Darren

[Sergio González Barrios, módosítva 12 év-val korábban]

You have to use the Portlet ID to identify the portlet what you want. You can see it using firebug con firefox. Inspect the Portlet ant find his ID.

[Darren Smith, módosítva 12 év-val korábban]

Hi Sergio,
thanks for your reply, that worked!! One thing that concerns me is that the Portlet ID seems to be automatically generated, ie - one of my portlet's ID is "portlet_1_WAR_mapsportlet_INSTANCE_Nyz9", so I have created a .css file with entries like this:

#portlet_1_WAR_mapsportlet_INSTANCE_Nyz9.portlet-content, #portlet_1_WAR_mapsportlet_INSTANCE_Nyz9.portlet-minimized .portlet-content-container {
background-color: white;
}

and this works. However, later I rebuilt me entire projects and the ID of my portlet had changed to "portlet_1_WAR_mapsportlet_INSTANCE_4A4d" so my CSS styling didn't work anymore. Do you know how to manually specify the portlet ID?

Thanks
Rory

[Jan Gregor, módosítva 12 év-val korábban]

Hi Darren,

Because of the portlet ID, which is diferent by each server restart, there is only 1 option, how you can style specific instance of your portlet. By each portlet you can access the configuration mode, and within this mode choose the option "Look And Feel". All css styles defined in this window will be connected with this instance, and after server restart it will be automatically updated for the new instance id.

Regards,
Jan.

[Felix J Christy, módosítva 12 év-val korábban]

Hi,

If you want to style the portlet, then there are 2 options.

1) Override the style in the theme by changing the css class, id styles in custom.css
2) If your portlet is OOB portlet (Liferay provided portlet) and you want to change the position of some components (like button or text box), then create a hook and override jsp and change the style from that
3) If your portlet is a custom portlet( created by you) then you can modify main.css that is available in portlet/docroot/css

Thanks,
Felix

[Jan Gregor, módosítva 12 év-val korábban]

Felix,

This change will affect all instances of the portlet. The problem here is, that he wants to apply styles only to 1 instance of specific portlet.

Regards,
Jan.

[Samir Gami, módosítva 12 év-val korábban]

Darren,

it seems you want to apply style to your custom portlet(not OOB ), so main.js is better option to do that(as Felix suggested).
or you can specify the css for particular portlet instance from Portlet Controls > Look and Feel > Advanced Styling.

if you want to continue with your current solution then use CLASS selector rather the ID selector,
To find the class,inspect the portlet using the firebug, you will find class related to your portlet without instance id.
like,
<div class="portlet-boundary portlet-boundary_CSSTest_WAR_CSSTest_ CSS-Test-portlet aui-dd-draggable aui-dd-drop" id="p_p_id_CSSTest_WAR_CSSTest_INSTANCE_gM7k_">

Hope this may help.

Thanks,
Samir

[Himanshu Bhandari, módosítva 8 év-val korábban]

Hi

From version 6.2 we have ADT i.e. Application Display Templates too, to style portlets. ADTs are more faster as you don't need to deploy them as in case of hooks.
ADT

Thanks