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>
[...]
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
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
Related
By default we can apply styling to vaadin spring boot applications by annotating UI class with#Theme(themename). In my particular situation i annotated with #Theme(ValoTheme.THEME_NAME) ,but it's not over. Unfortunately, i didn't figured out how to set background for layout without dealing with css and extra files(And it seems the only solution unavoidable).
How to use both themes valotheme and custom (just for setting up background image) at the same time?
Many thanks for suggestions
You can extend a Vaadin theme in your own custom theme. If you extend the Valo theme in your theme, then you get Valo theme plus your own customization and additions:
#import "../valo/valo.scss";
#mixin mytheme {
#include valo;
// your own scss here
}
After enumorous attempts to get it done, i was forced to switch over css styling files. With that being said - i had to combine ValoTheme and my own "style".
For Spring Boot Devs: Initially Spring Boot won't generate any presets for custom styles (vaadin plugin for Eclipse and Netbeans does it), so you have to create folders manually:
src/main/webapp/VAADIN/themes/<yourthemename>/ and place necessary css files there.
Quicktip:
Time-less consuming way:
Make new vaadin project from here: Link
Locate theme folder and copy-paste to your project
Also do not forget to annotate UI with #Theme("myTheme")
Hope this helps someone
we have created a simple Webcontent template with Liferay 6.2 EE.
The template was built with freemarker.
Now we want to use our own homemade css file to apply our style to the webcontent template.
But liferay's aui.css seems to override some of our css styles.
What's the best way to integrate our css file within freemarkers webcontent template ?
Is it possible to override aui.css ?
Thanks
Wrap your styles within aui class:
.aui {
//your styles goes here
}
Liferay automatically appends the themeId (along with other information such as browser) to the URL when including my portlet's css files. When this happens, I find that not all my css styles are loaded. I try to access the css file directly, using /test-portlet/css/main.css?themeId=classic, and only some of the styles are loaded. When I use /test-portlet/css/main.css without the themeId appended, all the styles are loaded fine.
I have been unsuccessful in finding out why. Can anyone help me with this? I am using Liferay 6.1.1 (6.1 GA2).
Angeline can you tell me where you are including your /test-portlet/css/main.css ?
This main.css file has your custom css specific to your portlet. So to load your css when the portlet is accessed on Page. You need to either include in jsp or the recommended way that is to include below line in your test-portlet liferay-portlet.xml
<header-portlet-css>/css/main.css</header-portlet-css>
This will load your css changes.
Hope this helps !
I had the same issue. Try to rename your css (do not use main.css) and it should work.
I am using the vaadin plugin for grails, and am trying to define some custom styles. Where within my grails appliction should I put the .css? My Vaadin application is in /vaadin/ I have tried creating a /vaadin/themes/mytheme/ folder and then putting my styles.css file in there, but still had no luck. Any help would be greatly appreciated. New to grails and new to vaadin, and am pulling my hair out over small stuff like this and can't get any of the actual legwork done until I can figure these things out..
Any way of doing inline styling would be fine with me too, at this point. I really just need some way to write explicit style..
Thanks
You need to put it into /web-app/VAADIN/themes/mytheme
You can have a look at the completed addressbook tutorial (with added Gorm and Spring Security Core support)
With the latest version of the plugin:
The name of the file must be styles.css (or styles.scss, which will then be compiled to styles.css by the command grails prod war)
The file must be located in /web-app/VAADIN/themes/mytheme , where the last part is the name of your style
In your UI file, use the #Theme annotation, for example
#Theme("mytheme")
#VaadinUI(path = '/')
class MyUI extends UI {
// ...
In VaadinConfig.groovy, specify the styles used by the application:
themes = ['mytheme']
I am new to Liferay and I have the following problem. I need to create portal theme - this is ok, no problem. This will style my portal and default portlets. But in some of my own portlets I use ZKOSS pages, which reqires completely different styling. My question is, how to do it that Liferay theme classes will not influence my ZKOSS pages? There are some general styles in Liferay theme like for input etc but I dont want those rules to be applied inside my ZKOSS portlets. Hope I explained myself clearly. Any suggestions?
You can set the <css-class-wrapper>My_Portlet</css-class-wrapper> in liferay-portlet.xml
for details see: http://www.liferay.com/community/wiki/-/wiki/Main/Liferay+UI+Guidelines
I don't know ZKOSS portlets, but the generic way to introduce portlet specific theme css is through the DOM: Inspect your page, see how your ZKOSS portlets are generated: Liferay generates a wrapper around each portlet that contains the portlet-name, you can use that for styling.
As I don't have ZKOSS available, here's an example to have some specifically ugly styling applied to every Navigation portlet:
.portlet-navigation .portlet {
background: purple;
}
Use Firebug or similar tools to find out the relevant DOM structure and just add the required styling for these elements to your theme
You can also use Liferay color schemes to define separate UI for same portlet.
Liferay 7/DXP:
https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/specifying-color-schemes
Liferay 6.2:
https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-2/specifying-color-schemes