Глобально изменяющий стиль по умолчанию в Primefaces - PullRequest
Новая
       3

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

11 голосов
/ 05 февраля 2012

Как изменить и применить изменения к стандартному стилю простых лиц по всему миру и только один раз? 

.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>

Ответы [ 4 ]

35 голосов
/ 06 февраля 2012

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

/resources/css/default.css

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

(обратите внимание, что я удалил !important "хак", см. Также Какпереопределить 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?

17 голосов
/ 07 февраля 2012

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

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

вместо подхода BalusC, если только не понравится размер шрифта уменьшается, когда вы вкладываете компоненты JSF вместе.

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

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

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

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

Это сделает две вещи:

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

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

    <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>

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

По умолчанию обычно используются следующие стили: 

.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 с.

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

0 голосов
/ 05 июля 2017

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

.ui-g {
    font-size: 13px;
}
0 голосов
/ 17 февраля 2014

Работает нормально со следующим 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;
}
...