Глобальное изменение стиля по умолчанию в Primefaces

Как мне изменить и применить изменения к стилю по умолчанию в глобальном масштабе и только один раз?

.ui-widget,.ui-widget .ui-widget {
    font-size: 90% !important;
}

В настоящее время я вставляю этот фрагмент CSS в начало каждой страницы XHTML.

<head>
    <style type="text/css">
        .ui-widget,.ui-widget .ui-widget {
            font-size: 90% !important;
        }
    </style>
</head>

Ответы

Ответ 1

Создайте файл таблицы стилей:

/resources/css/default.css

.ui-widget, .ui-widget .ui-widget {
    font-size: 90%;
}

(обратите внимание, что я удалил !important "hack", см. также Как переопределить CSS по умолчанию PrimeFaces с пользовательскими стилями? для подробного объяснения как переопределить стили PF)

Включите его в <h:body> вашего шаблона с помощью <h:outputStylesheet> (он будет автоматически перемещен в конец заголовка HTML, после всех собственных таблиц стилей PrimeFaces):

<h:body>
    <h:outputStylesheet name="css/default.css" />
    ...
</h:body>

Если вы не используете основной шаблон и, следовательно, должны включать это на каждую страницу, я рекомендую пересмотреть дизайн вашей страницы и использовать возможности шаблонов JSF2 Facelets. Таким образом, у вас есть только один файл главного шаблона, в котором определены все значения по умолчанию как для головы, так и для тела. См. Также этот ответ для конкретного примера: Как включить другой XHTML в XHTML с помощью JSF 2.0 Facelets?

Ответ 2

Я бы рекомендовал использовать:

.ui-widget {
    font-size: 90%;
 }
.ui-widget .ui-widget {
    font-size: 100%;
 }

вместо подхода BalusC, если вам не нравится размер шрифта, уменьшающийся при объединении компонентов JSF.

Я бы согласился с BalusC, что вы должны создать таблицу стилей и рассмотреть шаблоны, но я не согласен с предложенным CSS (хотя я все еще не решил использовать !important!).

В разделе 8.4 руководства Руководство пользователя Primfaces 3.1 предлагается использовать

.ui-widget, .ui-widget .ui-widget {
    font-size: 90% !important;
 }

который похож на предложение BalusC, но использует !important.

Это будет делать две вещи:

  • установить размер шрифта компонентов с классом ui-widget до 90% (родительского)
  • установите размер шрифта компонентов с помощью ui-widget класса и являются дочерними элементами другого компонента с ui-widget класс до 90% (от родителя)

Вы действительно хотите установить размер шрифта вложенного ui-widget на 90%? Если у вас есть 2 или 3 уровня вложенных ui-widget, размер шрифта будет продолжать уменьшаться. Попробуйте следующую разметку JSF (Primefaces), и вы увидите мою точку.

    <h:form>
        <p:button value="Normal"></p:button>
        <p:panel>
            <p:button value="A bit smaller"></p:button>
            <p:panel>
                <p:button value="Even smaller again"></p:button>
                <p:panel>
                    <p:button value="Tiny"></p:button>
                </p:panel>
            </p:panel>
        </p:panel>
    </h:form>

Я считаю, что причина .ui-widget .ui-widget требовалась в стандартном jQuery CSS, чтобы предотвратить обратную проблему: размер шрифта увеличивается в вложенных ui-widget s.

Стандартные стили обычно следующие:

.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }

Без стиля, определенного для .ui-widget .ui-widget, стиль font-size: 1.1em по умолчанию, применяемый к .ui-widget, приводит к увеличению размера шрифта в вложенных ui-widget s.

Добавив более специфический селектор .ui-widget .ui-widget с размером шрифта, установленным на 100% (или 1em), вы убедитесь, что вы получите согласованный размер шрифта, независимо от того, насколько глубоко вы вставляете свои компоненты.

Ответ 3

Он отлично работает со следующими css

body {
    font-size: 75% !important;

}

.ui-widget,.ui-widget-header,.ui-widget-content,.ui-widget-header .ui-widget-header,.ui-widget-content .ui-widget-content,.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button
    {
    font-size: 100% !important;
}

Ответ 4

Это отлично работает.

.ui-g {
    font-size: 13px;
}