Re:aplicar css em um form com JSF

Front-end
#1

Olá Ederson,
seria interesante se voce desse mais detalhes do que esta pretendendo fazer. Mas já da pra adiantar que caso voce esteja usando classes no seu css, em vez de setar o atributo “class” nas tags jsf, voce deve fazer isso na tag “styleClass”.
Faça o teste e depois nos informe o resultado, e qualquer coisa nos de mais detalhes.
até mais.

#2

vai com calma… esse lance de ficar cobrando resposta é chato.

pelo jeito não está achando o arquivo css. tente colocar o arquivo na mesma pasta da página q chama. Então mude essa linha:

para:

Se funcionar desta forma, o problema está mesmo no caminho errado do css.

t+

#3

Cara vc simplesmente tem que usar isso aqui => #{resource[‘libraryName/fileName’]} dentro CSS caso tenha algum problema com isso.

Bom também é usar a pasta “resources” dentro do WebContent e usar as tags

Ex:

<h:graphicImage library=“images” name=“logo.gif” style=“border:0px” />

<h:outputStylesheet library=“css” name=“style.css” />

Library é a pasta que está dentro do “resources”.

Falou…

#4

Não estou conseguindo aplicar css em um form com JSF!
Tem algum detalhe?

#5

css é esse

.form { font: normal 0.7em Trebuchet MS, Arial, sans-serif; }
.form fieldset { border: 2px solid #f4f4f4; padding: 10px; margin: 5px 0; color: #006700 }
.form legend { border: 1px solid #CFE4F5; padding-left: 10px; padding-right: 10px; font: bolder 1.4em Trebuchet MS, Arial, sans-serif }
.form label { float: left; font: normal 1.4em Trebuchet MS, Arial, sans-serif; height: 18px; margin: 2px; width: 105px }

.form input,
.form select,
.form textarea { border: 1px solid #006700; padding: 2px; padding-left: 4px; padding-right: 4px; margin: 4px 2px; color: #003300 }
.form select { border: 1px solid #006700; margin: 2px; color: #003300 }
.form input:focus,
.form select:focus,
.form textarea:focus { background: #f4f4f4; border: 1px solid #333; }
.form input.image { background: none; border: 0; padding: 0 }

.button, .button:focus {
background:url(…/images/btn-bg.gif) no-repeat !important; width:74px; height:23px;
cursor:pointer; color: #006700; font-weight: bolder; border: 0 !important;
}
.big-button, .big-button:focus {
background:url(…/images/btn-bg-big.gif) no-repeat !important; width:130px; height:23px;
cursor:pointer; color: #006700; border:0px !important; font-weight: bolder;
}
.small-button {
background:url(…/images/btn-bg-small.gif) no-repeat; width:32px; height:23px;
cursor:pointer; border: 0px; color: #006700; font-weight: bolder; border: 0 !important;
}
input.cb {
border: 0 !important;
height: 10px;
}
label.cb {
float: none !important;
}
.form fieldset .required {
color: red;
}
.form #select_signature_city_id select {
width: 310px;
}
.form p {
margin-bottom: 0px !important;
font: normal 1.4em Trebuchet MS, Arial, sans-serif !important;
line-height: 2em !important;
color: black;
}
.button-box {
border-top: 2px solid #E9E9E9;
font: normal 1.4em Trebuchet MS, Arial, sans-serif !important;
padding: 10px;
margin-top: 10px;
text-align: right;
}
.button-box span {
float: left;
}

o form é esse

<%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f” %>
<%@ taglib uri=“http://java.sun.com/jsf/html” prefix=“h” %>

Cadastro de produtos 
  <link rel="stylesheet" href="./css/style.css" type="text/css">
 
     
  </head>
  <body>
     <h:form id="form" styleClass="form">
     <fieldset>
     <legend>Cadastro de produtos</legend>
        <h:outputLabel for="codigo">código</h:outputLabel> 
        <h:inputText   value="#{produto.id}"/>
        <br />
        <h:outputLabel for="nome">nome</h:outputLabel> 
        <h:inputText value="#{produto.nome}"/>
        <br />
        <h:outputLabel for="preco">preço</h:outputLabel> 
        <h:inputText   value="#{produto.preco}"/>
        <br />
        <h:commandButton action="#{produto.gravar}" value="Enviar" />
     </fieldset>
     </h:form>
       
  </body>

</f:view>

Não aplica o style de maneira alguma.

obrigado por enquanto

#6

Alguem saberia me dizer porque não aplica o css?

#7

coloquei dessa forma e funcionu.

Obrigado

#8