Hi all,
I am trying the Valo theme on Liferay 6.2. I attached two snapshots, the first one
shows a normal form and comes from an app deployed under Tomcat, the second
one is the same form embedded in a vaadin portlet. In the latter case the TextField’s heights
shrink under the size of the character… anyone already noticed and solved this problem?
Thank you
And How do you got to work minimaly the valo theme?
I got a problem with vaadin 7.3 LR 6.2 since I upgrade and use “valo” the styles Are not aply at all even you get only test were it supouse to be a component - under tomcat works fine
Updates - one of the reasons we migrated our Liferay/vaadin projects to “self-contained” mode (exists as maven archetype).
Also, problems above can come from overlapping alloyui/vaadin css rules.
Start at the Valo demo
https://demo.vaadin.com/valo-theme/#!forms
and use it as a reference to understand:
[url=https://github.com/vaadin/valo-demo]
https://github.com/vaadin/valo-demo.
About the overriding problems between Liferay’s ccs and the Vaadin ones, use
the various browser extensions to inspect what’s overriden in Vaddin css a find
a way to revert them.
[/url]
Jeez, I really thought Liferay would’ve learned to scope their CSS by now…
The only way to fix those is to override any styles Liferay adds to the elements (or modify the default Lifefay theme, but I guess that is not a real option).
Example,
Classic theme, dark. Labels are themed with a color #555 that overrides the color and other attributes of the checkbox’s labels in Valo, dark variant. The label vanishes. This is a problem of specificity, I guess, because the color of checkbox’s labels in Valo is not bind directly to the “label” element. Hence, write down something as:
.tests-valo-dark {
.v-checkbox-small{
label{
font-size: 12px;
font-weight: 500;
line-height: 17 px;
color: #CED1D2;
}
}
}
in your styles.scss, compile it and deploy the resulting CSS under Liferay.
I am not an expert of CSS, so I cannot guarantee that this is the best solution in quality.
Hi Paola Greco
I’m also facing the same problem. I read this article but didn’t understand what to do. Can you please explain clearly how to overcome this problem.
Thank you,
Mahmood.
I use the developer tools of Firefox…
So, just point to the element that you want change, the tool wil give you all the
details, in particular it displays the css hierarchy and, in this hierarchy, the style
sheet and the entry in that stylesheet that decides the element apparence.
Do not change directly that file. Instead use your style.scss in the VALO folder.
If you want to override an element your declaration should be more specific than
the one that is inside the original stylesheet. In some cases, expecially if the
stylesheet is one of the Lyferay styles you have to use !important to override the
Liferay declaration. Anyway this should be avoided for several reasons, so use it
only if you do not find other solutions
Hi,
any news ?
Into liferay portlet, textfield is very strech because it take css liferay’s style but not valo theme.
How can fix this ?
Another problem is the rendering of column header of vaadin table. Size of header is extra large. This is source html:
After many hours I find that is the override of css liferay theme.
How can i force to get my vaaadin theme ?