Use Liferay theme css in Portlets

Question

I would like to define all our styles in a the custom Liferay theme we developed. I want to know if it is possible to use css classes defined in the theme in portlets project. We need to avoid duplicate css files in every portlet project. The aim is that the theme controls all look and feel aspects of our portlets and so if we change the theme (or deploy portlets in another portal container) portlet styles change. You think this is possible ?

Thanks in advance ..

Yes, that is how theme works in Liferay. You can use css classes in portlet which are defined in theme. — Pankaj Kathiriya

Byran Zaugg Byran Zaugg · Accepted Answer · 2016-01-14T20:41:04

What you want to do is the recommended way to style both the theme and the Portlets.

Portlet styles should only be affect the layout within the Portlet it belongs. All other styles; colors, fonts, etc., should be defined in the theme's custom.css.

I would advise you to try styling the existing Portlet classes before introducing new ones. Then, if you're really stuck, edit portlet.vm.

Take a look at Liferay's Political Theme:

custom.css

...

.portlet {
    margin-bottom: 10px;

    .portlet-topper {
        padding: 0;

        .portlet-title {
...

Use Liferay theme css in Portlets

1 Answers