Reduce the commandButton size

[malvessi]

Hi!

I recently bought the sentinel theme and i'm trying to reduce the commandButton size. I have been using aristo theme and its components were very smaller.

I've already reduced the datatable and selectOneMenu sizes using the following code:

Code: Select all

.ui-datatable .ui-paginator .ui-paginator-first,
.ui-datatable .ui-paginator .ui-paginator-prev,
.ui-datatable .ui-paginator .ui-paginator-pages .ui-paginator-page,
.ui-datatable .ui-paginator .ui-paginator-next,
.ui-datatable .ui-paginator .ui-paginator-last,
.ui-datatable .ui-paginator .ui-paginator-rpp-options {
    font-size: 10px !important;
}

.ui-datatable .ui-paginator .ui-paginator-current {
    font-size: 10px !important;
}

.ui-selectonemenu .ui-selectonemenu-label,
.ui-selectonemenu-list .ui-selectonemenu-list-item {
    font-size: 12px;
}

Unfortunately, when i try to do the same with ui-button element nothing happens.

Code: Select all

.ui-button ui-widget {
    font-size: 12px !important;
}

The button doesn't change anything.

How can i fix this ?

Thanks

[mert.sincan]

Please try with;

Code: Select all

.ui-button-text {
     font-size: 12px;
}

[malvessi]

Please try with;

Code: Select all

.ui-button-text {
     font-size: 12px;
}

It worked! Thank you aragorn!

[mert.sincan]

Glad to hear, thanks for the update

[lbroker]

What is way to set different commandButton size just for some buttons on the page?
The Idea is to just commandButtons in the datatable make smaller.

I did try but without success syntax bellow:
<p:commandButton style="font-size:10px !important;" ...

Thank you in advance.

[mert.sincan]

I think you can use styleClass attribute;

Code: Select all

.Fs10 .ui-button-text {
     font-size: 10px !important;
}

<p:commandButton styleClass="Fs10" />

[lbroker]

Thanks aragorn it works

[mert.sincan]

You're welcome