Igual a esse painel lateral aqui http://www.primefaces.org/showcase-labs/ui/, com essa sobra pela direita.
Valeu!
Igual a esse painel lateral aqui http://www.primefaces.org/showcase-labs/ui/, com essa sobra pela direita.
Valeu!
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! 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.
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!