Override CSS from portlet

Hi,

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 "
!important
" to each row.

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

Thanks in advance,
Vilmos

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?

Regards,
Vilmos

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.