How to restyle a single view in Primefaces 5.3

Question

I have an application that should have a particular view with big fonts. In order to get there I decided to create a new CSS class and decorate a panel component with it, like shown below:

<p:panel styleClass="painel-grande">
    <div style="margin-bottom:20px">
        <p:outputLabel for="tipoRefeicao" value="#{messages['label.caixaSessao.tipoRefeicao']}" />
        <div>
        <p:selectOneMenu id="tipoRefeicao" value="#{caixaSessaoAbrirMB.bean.tipoRefeicao}">
            <f:selectItems value="#{caixaSessaoAbrirMB.tiposRefeicao}" var="t" itemLabel="#{t.descricao}" itemValue="#{t}" />
        </p:selectOneMenu>
        </div>
    </div>
    ...

The painel-grande (big panel) class and some related styles are declared in an external CCS file as follows:

.painel-grande {
    font-size: 2em !important;
}

.painel-grande .ui-icon {
    height: 32px !important;
    width: 32px !important;
    margin-top: -10px !important;
}

I found a post that says to not use !important, but without it nothing really works, so I kept it. Some things indeed work, some others not. It can be seen in the image below:

As you can see, the button, labels and inputs are ok, but the combo (red circled) is somewhat strange.

What other styles should I redefine to make it look correctly?

Thanks in advance

score 0 · Answer 1 · answered Mar 04 '16 at 15:38

0

try using

zoom: 1.2

on the .ui-icon class.

answered Mar 04 '16 at 15:38

Ritzelprimpf

176
1
11

Thanks for the suggestion, but it didn't fix the problem. Zooming the icons just got them blurred, without fixing the position problem. – AlexSC Mar 07 '16 at 14:41
yes, that is true. The problem is, that the icon comes from a sprite. Probably the best way is to substitute ui-icons background by a larger image. However, here is something about increasing sprites size: http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite – Ritzelprimpf Mar 07 '16 at 15:03

score 0 · Accepted Answer · answered Apr 15 '16 at 11:11

After some digging I found what worked as a solution for me:

.painel-grande .ui-widget, .painel-grande .ui-widget .ui-widget, .painel-grande input, .painel-grande .ui-widget button {
    font-size: 2em !important;
}

.painel-grande button.ui-widget .ui-icon {
    height: 36px !important;
    width: 36px !important;
    margin-top: -10px !important;
}

How to restyle a single view in Primefaces 5.3

2 Answers2