The specific styling issues are the following:

• the content of the Add Application dialog of Liferay has an indentation (the left half of the dialog area is blank).
• menu components: all menu items show bullets and they are outside the menu area.
• ace:dialog: the Liferay dialog styling is applied, overriding the theme and altering the structure.
• drag and drop: the Liferay styling interferes, making certain features like ghosting not work.
• resizable: the Liferay styling is applied, placing handles in every direction, not looking right.

Unfortunately, Liferay 5 also uses the same jQuery UI convention we use of CSS class names in various parts of its UI, without taking measures to avoid affecting other content on the page that uses the same CSS class name patterns. This means that in our case, there are two sets of styling rules that are applied to the components mentioned above. Whichever set of rules that is loaded last (usually Liferay's) is the one being applied on the page. If somehow we managed to load our styling rules last, then we would be affecting the Liferay UI. So, this is a logical contradiction and there can't be a proper fix for this situation.

However, it is possible to come up with a workaround, which would consist in wrapping our components/portlets in a container <div> and add a class name to it (let's say 'ace'), so that we can define an additional set of rules which will only be applied to elements preceded by the 'ace' class name. This set of rules would most likely be defined in a <style> element somewhere on the page and will try to undo the styling from Liferay in the ace components.

The following styling rules solve all of the issues mentioned above, except the drag and drop issues, which turned out to be more involved and not solvable with just CSS.

<style type="text/css">
/* remove bullets from ACE menu components */
.ace .wijmo-wijmenu-list li

/* 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

/* 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("#

");
}
/* remove Liferay's close icon from ACE dialog */
.ace .ui-dialog .ui-dialog-titlebar-close

/* 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

.ace .ui-dialog .ui-dialog-content

</style>

This style tag should go at the top of the page that defines the portlet. For example, in the showcase portlets, it should go inside <ui:define name="example">, at the top. Only one style tag is necessary for the whole page (i.e. it is not necessary to do this for every portlet). Additionally, the contents of the portlet that contain ACE components have to be surrounded by a container div with the 'ace' CSS class (i.e. <div class="ace">). This has to be done for every portlet that contains ACE components.

Please document the known issues and suggested workaround styling in this Wiki topic page: http://wiki.icesoft.org/display/ICE/Custom+ACE+Styles+for+Liferay+Portal

The workaround was documented in the wiki page mentioned above.