Jsf&primefaces CSS problem

Asked

Viewed 246 times

0

Project -- JSF CDI Mysql //I am not using Maven

Good afternoon, my question is this: I would rather use style="...." ; in xhtml code, to make the code more elegant, make use of css.

for example, I want instead of :

<p:fieldset style="background-color: #9ECADE;">

make use of a class in css to then assign the style. I then created a directory in Webcontent - Resources - css - style.css within css so I made a small edit:

.barra-navegacao{
    background-color: #9ECADE;
}

and inside my template, I look like this:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
    <link href="https://fonts.googleapis.com/css?family=Righteous"
        rel="stylesheet" />
    <h:outputStylesheet library="css" name="style2.css" />
</h:head>
<h:body>
    <div id="cabecalho" align="center">
        <p:graphicImage library="img" name="logo01.png" />
        <h1 align="center">
            <p:fieldset>
                <ui:insert name="titulo" />
            </p:fieldset>
        </h1>

    </div>

    <div>

        <ui:insert name="conteudo" />

    </div>
</h:body>
</html>

however, the problem is that the editing does not work, and when it works, it’s like you’re saved somewhere in css, and when I edit it, it doesn’t update the editing in css. Someone could help me pfvr ??

By the way, I would like to know how to change a component of Primefaces, for example: color, size and etc by css classes. I’m with the doc down, and I’m researching her, but it’s hard kk''

  • To change Primefaces components, I often overwrite the css of the component. If you use a community theme, you can use Themeroller to change the whole theme: https://jqueryui.com/themeroller/. It generates for you a css file with the styles you have overwritten, but maybe you still need some adjustments.

1 answer

1

Come on, you can use css classes instead of using style, use the styleClass. Ex:

styleClass="barra-navegacao"

To change a component’s css, see the documentation for the shutdown and overwrite it.

https://www.primefaces.org/documentation/

  • So, I’m using styleClass , but when editing for the first time, ok, it works cool. But if I change for example, the color. It does not carry the color and remains with the previous...

Browser other questions tagged

You are not signed in. Login or sign up in order to post.