How to remove aui from own portlet in Liferay

Question

I'm using Liferay Portal Community Edition 6.2 CE GA2 (Newton / Build 6201 / March 20, 2014). It uses AlloyUI. Every page in my project is created by using JSF and Primefaces. Unfortunately AUI css has ie. that rule:

.aui input {
    width: 209px;
}

... and my colorpicker created by PF looks like this

Best solution for me is reseting aui css for portlet, how to do it? Sorry for my english.

liferay-portlet.xml

[...]    
<portlet>
    <portlet-name>DSeedvar</portlet-name>
    <icon>/icon.png</icon>
    <requires-namespaced-parameters>false</requires-namespaced-parameters>
    <header-portlet-css>/css/main.css</header-portlet-css>
    <footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
    <css-class-wrapper>seedvar-portlet</css-class-wrapper>
</portlet>
[...]

What error are you seeing? If it's based on CSS, it may be a bug that can be fixed in Primefaces. However, for now, I'd recommend simply including the CSS fix in your `` section for your portlet (or [adding it to your theme if you want it applied to all pages](https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-2/setting-up-custom-css)). — stiemannkj1, Jul 22 '16 at 14:10

score -1 · Answer 1 · answered Oct 29 '14 at 14:29

-1

You may create your own css which will overlap liferay default css and set it for your portlet in liferay-portlet.xml

<portlet>
    <portlet-name>MyPortlet</portlet-name>
    ...
    <header-portlet-css>/css/main.css</header-portlet-css>
    <css-class-wrapper>portlet-login</css-class-wrapper>
    <add-default-resource>true</add-default-resource>
    ...
</portlet>

See also: https://www.liferay.com/documentation/liferay-portal/6.0/development/-/ai/anatomy-of-a-portlet

answered Oct 29 '14 at 14:29

Multisync

8,657
1
16
20

I already have a css (main.css), but I haven't rules that could overlap the entire AUI. I could find all rules in the resultant html/css, but it's time-consuming. – bemol Oct 29 '14 at 14:45

score -1 · Answer 2 · answered Jul 21 '16 at 08:28

Try to create a new custom.css into your portlet and define it into the liferay-portlet.xml too, custom.css have more preference than main.css and will not take the aui from your theme.

I had the same problem, if that doesn't work, then you must overwrite your custom.css of your theme.

Hope it works

How to remove aui from own portlet in Liferay

2 Answers2