Override CSS from portlet


I’m developing a portlet for Liferay and I’d like to change some CSS entries for the portlet like:

.v-button-caption { text-decoration: none; font-weight: bold; font-size: 16px; } I add these in the main.css generated for my portlet, and referenced from liferay-portlet.xml. Somehow my modifications don’t take effect unless I add "
" to each row.

Could someone clarify to me how this should work normally, and why I need this workaround?

Thanks in advance,

See the
book section on cascading
in CSS. !important is the brute way to move rules up in the cascade, it’s usually better to use higher specificity if possible.

You can find out the specificity of the matching rules by inspecting the HTML elements with Firebug or some other inspector.

Hi Marko,

So basically I should use the referenced SASS based theme override, right? Will it work in a portlet environment?


Most likely there is a more specific selector (which will take precendence). You can inspect elements in Firefox, Chrome etc. In Chrome, you right-click and select “Inspect Element”. That should show you the styles of the element.

If you’re using SCSS you can do something like this:

.v-button {
  .v-button-wrap {
    .v-button-caption {
      // stuff

If you’re using CSS:

.v-button .v-button-wrap .v-button-caption {
  // stuff

Just as examples.

Thanks, it seems it works most of the times with some exceptions.