Custom ACE Styles for Liferay Portal

Liferay 5 uses, for its own user interface, some of the same jQueryUI and Themeroller class names used by the ACE components, without taking measures to avoid affecting other contents on the page that might be using the same CSS class names. This situation causes some ACE components to not look as intended. Unfortunately, it is not possible to come up with a proper fix for this situation, since both sets of rules (ACE's and Liferay's) try to modify the same set of CSS class names, and whichever is loaded last on the page overrides the other. However, there is a workaround for this problem and is described below.

1. Make sure that all ACE components are wrapped inside a <div> with the CSS class name ace, so it looks like <div class="ace"> ... </div>.
2. Load the following style element somewhere in the body of the page. It might be better to place it just before the wrapper <div> of the previous step. It might also be convenient to do this in every portlet that contains ACE components.

   <style type="text/css"> 
    /* remove bullets from ACE menu components */ 
    .ace .wijmo-wijmenu-list li { 
    list-style-type: none; 
    list-style-position: inside; 
    } 
    /* avoid displaying all resizing handles, except for southeast handle */ 
    .ace .ui-resizable-n, .ace .ui-resizable-s, .ace .ui-resizable-e, .ace .ui-resizable-w, .ace .ui-resizable-sw, .ace .ui-resizable-nw, .ace .ui-resizable-ne { 
    background-image: none; 
    } 
    /* change background of ACE dialog header, affected by Liferay's styling (modify according to your theme) */ 
    .ace .ui-dialog-titlebar { 
    background-color: #cccccc; 
    background-image: url("#{resource['icefaces.ace:themes/sam/images/ui-default.png']}"); 
    } 
    /* remove Liferay's close icon from ACE dialog */ 
    .ace .ui-dialog .ui-dialog-titlebar-close { 
    background-image: none; 
    } 
    /* adjust dialog's header text, according to your theme */ 
    .ace .ui-dialog-title-dialog { 
   
    } 
    /* fix Liferay's dialog, affected by ACE styling */ 
    .ui-dialog .ui-dialog-content { overflow: visible; } 
    .ace .ui-dialog .ui-dialog-content { overflow: auto; } 
    </style>
   

3. The components that are affected are basically all the menu components, dialog and resizable. In the case of dialog, the theme is affected, so you may want to customize the look of the dialog according to your theme by modifying the appropriate rule above. You can also modify any other aspect of ACE components by adding a new rule preceded with the .ace class name. This way, you can be sure that such change won't affect other aspects of the Liferay 5 UI.