0

Возможно ли изменить стиль стандартных блоков PrimeFaces, например p:accordionPanel? Поменять цвет и шрифт

1 ответ 1

2

Да, конечно. Во-первых, можно менять тему целиком, варианты бесплатных тем есть здесь.

Если требуется изменить какой-то конкретный компонент, то вам поможет отладчик браузера и знание CSS. В отладчике выбираем нужный компонент и смотрим его HTML и стили. Для p:accordionPanel корневым тегом является div, которому присвоен стиль с именем ui-accordion. Добавляем на страницу свои стили, которые изменяют стили Primefaces, вот пример изменения шрифта:

    <h:form id="mainForm">
        <p:accordionPanel>
            <p:tab title="Godfather Part I">
                <h:panelGrid columns="2" cellpadding="10">
                    <h:outputText value="The story begins as Don Vito Corleone..."/>
                </h:panelGrid>
            </p:tab>
            <p:tab title="Godfather Part II">
                <h:panelGrid columns="2" cellpadding="10">
                    <h:outputText value="Francis Ford Coppola's legendary..."/>
                </h:panelGrid>
            </p:tab>
        </p:accordionPanel>
    </h:form>

    <style type="text/css">
        #mainForm .ui-accordion {
            font-family: "Courier New", Courier, monospace;
        }
    </style>

#mainForm .ui-accordion - это путь, сообщающий браузеру о том, что все элементы, имеющие стиль .ui-accordion и находящиеся внутри элемента с идентификатором mainForm, теперь получают указанный стиль. Такой путь нужен для того, чтобы не затронуть остальные p:accordionPanel-ы на странице. Если хотите, чтобы изменение стиля затронуло все p:accordionPanel-ы в приложении, то #mainForm следует убрать, вынести стиль в отдельный CSS-файл и импортировать его на вашу страницу (лучше всего это сделать в шаблоне, который должны использовать все страницы сайта).

Применяя подобный подход, можно менять любые компоненты PrimeFaces. Если что-то не будет получаться, скорее всего разбираться надо будет в CSS, а не в PrimeFaces.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.