Css + primefaces

Front-end
#21

Alterei sim como vc falou:

<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/login/login.xhtml</welcome-file>
    </welcome-file-list>
    <context-param>  
        <param-name>primefaces.THEME</param-name>  
        <param-value>aristo</param-value>  
    </context-param>     
</web-app>
#22

E qual tema voce baixou.

O

<param-value>aristo</param-value>

muda a cada tema, na página do primefaces tem os nomes

#23

Inicialmente tinha baixado esse mesmo, por exemplo, agora baixei outro tema e vou trocar:

1º Baixei o tema glass-x.

2º importei para minha biblioteca.

3º inseri o seguinte comando no meu template para que sirva para todas as páginas.

<h:outputStylesheet library="glass-x" name="theme.css"/>

Foi esses os passos.

Ta correto?

#24

Ah, esqueci de mecionar que alterei o web.xml

[code]

<?xml version="1.0" encoding="UTF-8"?> 
<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
    <session-timeout>
        30
    </session-timeout>
</session-config>
<welcome-file-list>
    <welcome-file>faces/login/login.xhtml</welcome-file>
</welcome-file-list>
<context-param>  
    <param-name>primefaces.THEME</param-name>  
    <param-value>glass-x</param-value>  
</context-param>
#25

Quando eu usei eu não precisei usar

<h:outputStylesheet library="glass-x" name="theme.css"/>

só adicionei o jar no biuld path e alterei o web.xml e só

#26

Não sei se este tópico ainda está valendo, mas vai aí uma dica pra quem tb “apanhou” dos temas do PrimeFaces.

acesse o link
www.jqueryui.com/themeroller

Baixe um tema pronto ou personalize o seu.

Copie a pasta css para o sua pasta web (WebContent no caso do Eclipse).

E faça algo mais ou menos assim:

<h:body>
         <link type="text/css" rel="stylesheet" 	href="#{request.contextPath}/css/custom-theme/jquery-ui-1.8.17.custom.css" />
....

Note que no meu caso está “custom-theme”, pq este foi personalizado, caso vc baixe um pronto, altere o nome para
o nome do tema.

Falew!

#27

Vlw ae… me ajudou muito mesmo. :smiley:
Meu erra em que eu estava indo no build path e clicando em add external jar, onde as vezes o eclipse se perde, então eu simplesmente copiei o .jar para a pasta lib e pronto funcionou perfeitamente.

OBS: tive que editar o xml.

#28

** Vou deixar a contribuição pra outros que pesquisarem mas foi mal, só agora vi que o post é muito velho **
Cara eu te aconselho a criar uma div que englobe as duas colocando um display: inline-block nela
Outra coisa que observei no seu CSS foi que vc criou uma largura de 50% para cada uma das div´s. Isso também poder estar prejudicando o posicionamento delas uma ao lado da outra. Coloque 49% em cada uma delas pra dar mais chances pra elas funcionarem. Se elas ficarem na posição desejada coloca um padding-right na primeira com 1 ou 2% pra afastar uma da outra. Acho que assim o CSS melhora.

Agora quanto ao Primefaces, acho que vc pode subscrever ele com o inspetor de elementos como algumas pessoas lhe informaram ai. Te aconselho a criar um Theme.css e subscrever estas mesmas classes. Segue a dica

/*** subscrevendo o estilo original primefaces ***/

.ui-message-info,.ui-message-error,.ui-message-warn,.ui-message-fatal {
border: 0!important;
margin: 0!important;
padding: 0!important;
}

.ui-messages-error,.ui-message-error {
color: #D8000C;
background-color: #fff!important;
}

Não use div class-"??" com o Primefaces, insira dentro da tag desejada o styleClass="" e depois crie o seu estilo em cima dele no css.
Se quiser criar seu próprio css, declare ele dentro do body do JSF, veja abaixo:

<h:head>

</h:head>

<h:body>
<f:facet name=“last”>
<h:outputStylesheet library=“default” name=“css/your-custom.css” />
</f:facet>
…

#29