Page 1 of 1

Decrese Rio components size

Posted: 08 Sep 2015, 12:04
by m.achille@reply.it
Hi all,
I purchased Rio Layout and started working with it. It looks great at higher resolutions (>1600 px) while on lower resolution everything looks "too big" for me: buttons, fonts, expecially switch component.
Is there a good way/best practice to resize everything (when on lower resolution). To make an example, I'll like to make the final page looks like browser zoom is set to 85% or so..
I tried to manually re-define fi├Čont size with @media, but this means I should redefine every component (and final result is quite ugly for some of them, like select box, and i don't know how to reskin on-off switch..).

Thanks!

Re: Decrese Rio components size

Posted: 15 Sep 2015, 10:50
by mert.sincan
You can try with CSS 'zoom', but I think this solution won't help you. Therefore you can use Less feature to change font-size of components.

We added LESS support for Modena and Rio. (http://blog.primefaces.org/?p=3575 , Less Detail: http://lesscss.org/ ) You can easily change font-size, color, background-color, .. of components.

For button
Exp;
- add @button-font-size-small: 10px; in theme-variables.less
- add in theme-less;

Code: Select all

.ui-button {
   ...
   font-size: @button-font-size; 
   @media (max-width: 640px) {
       font-size: @button-font-size-small;
   }
   ...
}