Liferay theme CSS conflict issues

Liferay theme CSS conflict issues tutorial gives solution for CSS conflict issues in Liferay theme. In general, Liferay applications are required to use custom css such as bootstrap plugins. etc, but Liferay it self used Bootstrap as .aui css. Third party vendors may provide their own framework css which would always conflicted with Liferay AUI CSS. In this case, Page distortion will happen.

So how to resolve css conflict issues between custom theme and Liferay ? Here is best recommend practice to avoid CSS conflicts in larger way.

  • Load all CSS into _diffs/css folder
  • In main.css file prefix you application name and include all third party css file references  into that like shown below. for eg, here we are  prefixing  application_body
  1. @import url(base.css);
    @import url(application.css);
    @import url(layout.css);
    @import url(dockbar.css);
    @import url(navigation.css);
    @import url(portlet.css);
    @import url(extras.css);
    @import url(font-awesome.min.css); 
    .application_body{
     @import url(bootstrap.min.css);
     @import url(dataTables.bootstrap.min.css);
     @import url(jquery.dataTables.min.css);
      @import url(style.css);
    }
    @import url(custom.css);
  • In portal_normal.vm put  the “application_body” in body class or create separate div inside body.

 

This will resolve 90% of your CSS conflicts. Hope this helps!!!