[Resolvido] Alguém poderia dar uma dica de como estilizo um panel igual do site do Primefaces?

Igual a esse painel lateral aqui http://www.primefaces.org/showcase-labs/ui/, com essa sobra pela direita.

Valeu! :smiley:

Aquele é o template root do primefaces com estilização extra no css

O efeito de sombra pode ser obtido com css, com este trecho aqui:

.ui-menu { overflow: visible; z-index: 20 !important; float: none; background: #38B44A; border-radius: 1px; -moz-box-shadow: 5px 5px 5px #888; -webkit-box-shadow: 5px 5px 5px #888; box-shadow: 5px 5px 5px #888; }

As ultimas 3 linhas sinalizam a existência de sombra

Obrigado pelas respostas mas acho que não fui muito claro, já sabia que tinha que estilizar usando css o problema é que não consigo acessar os componentes, mesmo seguindo a documentação do primefaces.

Ex:

Crio um css:

/* ui-panel modificado de propósito para ver qual se a cor de painelQuadradoSombraDireita se sobrepõe. */
.ui-panel {
    background: #ff0;
}
/* Classe aninhada que quero acessar. */
.painelQuadradoSombraDireita .ui-panel {
    background: #D20005;
}

Acesso pelo código:

<p:panel styleClass="painelQuadradoSombraDireita">
                                <h:outputText value="teste"/>
                            </p:panel>

Modificação: NADA!
Está seguindo o exemplo da documentação. Se lá o que é isso, alguém tem idéia? :shock:

Opa! Consegui aqui, a classe aninhada estava com um espaço entre as classes, assim:

.painelQuadradoSombraDireita .ui-panel {  
    background: #D20005;  
}  

E tem que ser junto:

.painelQuadradoSombraDireita.ui-panel {  
    background: #D20005;  
} 

Mais uma vez a documentação induzindo ao erro, eita primefaces, assim você me mata! :smiley: KKKKKKKKKKKKKK!

O teste que fiz deu certo, uma classe sobrepôs a outra, quando entra na página todos os panels carregam o background amarelo e quando clico no botão que vai exibir o dialog contendo o panel modificado ele carrega vermelho. Como vi que estava funcionando e queria apenas o painel modificado declarei a classe .ui-panel vazia no css. Agora só modificar colocando as sombras.

Valeu aí, obrigado a todos. :slight_smile:

Cara, o código que passei funciona aqui comigo somente colocando este trecho no meu css, ele coloca uma sombra no meu menu


Sim lucianotome seu código funcionou sim, a diferença é que quis implementar apenas em um panel específico da aplicação pois nos outros quero deixar normal. Para isso só aninhando as classes css (bem, é o que tem na documentação 3.2).

Assim:

Valeu! :slight_smile: