CSS + Primefaces [RESOLVIDO]

Front-end
#1

Olá tenho dois dataGrid (Primefaces) porém gostaria de trocar a cor apenas do dataGrid destaque.

Já sei alterar a cor, mas quando uso o código abaixo os dois grids mudam de cor:

.ui-widget-header {
background: none repeat scroll 0 0 #8BBF1C;
}

<p:dataGrid var="imovel"	value="#{imovelBean.destaque}" columns="1" id="destaque" rows="4" paginator="false" >
<p:dataGrid var="imovel" value="#{imovelBean.imoveis}" columns="3" id="grid" rows="12"	paginator="true">

Como altero a cor de apenas um grid?

#2

Precisa estudar um pouco de CSS, não?
Existem algumas formas de você forçar algo a acontecer no CSS.
Quando você se refere a um elemento HTML

body{
    font-family: verdana;
}

Quando se refere a uma classe

.classe{
    background-color: #EEF;
}

E quando se refere a um id

#idDoElemento{
    font-size: 12px;
}

Agora, veja o que você está alterando e reflita como pode mudar isso.

#3

[quote=drsmachado]Precisa estudar um pouco de CSS, não?
Existem algumas formas de você forçar algo a acontecer no CSS.
Quando você se refere a um elemento HTML

body{
    font-family: verdana;
}

Quando se refere a uma classe

.classe{
    background-color: #EEF;
}

E quando se refere a um id

#idDoElemento{
    font-size: 12px;
}

Agora, veja o que você está alterando e reflita como pode mudar isso.[/quote]

Boa noite amigo, tentei isso mais não funciona.

#grid{ background: none repeat scroll 0 0 #FFFFFF !important; }

#4

O que o drsmachado disse está correto.

O que faltou para você agora é conhecimento sobre JSF :slight_smile:

Nem sempre o id que você colocou no componente é o id que ficará no componente HTML quando a página for gerada. Ele pode ser alterado por um naming container, ou simplesmente o output é composto por diversas tags, e o que você quer não está sendo atingido.

Verifique o output com um depurador, e veja qual o id real do componente. No seu caso, eu creio que ele esteja em um naming container, provavelmente um h:form

#5

[quote=Rodrigo Sasaki]O que o drsmachado disse está correto.

O que faltou para você agora é conhecimento sobre JSF :slight_smile:

Nem sempre o id que você colocou no componente é o id que ficará no componente HTML quando a página for gerada. Ele pode ser alterado por um naming container, ou simplesmente o output é composto por diversas tags, e o que você quer não está sendo atingido.

Verifique o output com um depurador, e veja qual o id real do componente. No seu caso, eu creio que ele esteja em um naming container, provavelmente um h:form[/quote]

Já tinha conseguido resolver, realmente foi isso que você falou.

Sobre o “faltou conhecimento”: se eu soube-se não estaria perguntando aqui… E o problema não era sobre a diferença entre id, class e elemento como citado.

Obrigado pela ajuda.

#6

[quote=ThalesSilva][quote=Rodrigo Sasaki]O que o drsmachado disse está correto.

O que faltou para você agora é conhecimento sobre JSF :slight_smile:

Nem sempre o id que você colocou no componente é o id que ficará no componente HTML quando a página for gerada. Ele pode ser alterado por um naming container, ou simplesmente o output é composto por diversas tags, e o que você quer não está sendo atingido.

Verifique o output com um depurador, e veja qual o id real do componente. No seu caso, eu creio que ele esteja em um naming container, provavelmente um h:form[/quote]

Já tinha conseguido resolver, realmente foi isso que você falou.

Sobre o “faltou conhecimento”: se eu soube-se não estaria perguntando aqui… E o problema não era sobre a diferença entre id, class e elemento como citado.

Obrigado pela ajuda.[/quote]
Sempre que vejo um comentário desses não sei o que dizer.

Você tinha um problema, e o postou incompletamente. Por que? Provavelmente porque você não sabia que o form faria diferença. Até aí tudo bem. O machado te disse o que achava coerente, e o que era coerente na verdade. Porém ele não tinha toda a verdade, portanto não teria como saber que você tinha problemas com ID

Então eu te dei outra explicação. Exemplificando uma possível solução. E realmente faltava conhecimento seu. Se não faltasse (veja que não é “falta-se”, como também não é “soube-se”), você saberia que postar mais do seu código seria importante.

O problema não é você não saber. Ninguém aqui sabe de tudo, e nós viemos aqui justamente pra te ajudar. O problema é você não ter a humildade de simplesmente perceber que não sabia, sem querer tirar sarro de uma outra pessoa por isso. Isso sim é lamentável.

Mas é isso aí. Desabafo desnecessário. Me desculpem se ofendi alguém.

Abraços!

#7

Segue a solução:

#idForm .ui-widget-header { background: none repeat scroll 0 0 #FFFFFF !important; }

Assim a modificação acontece apenas nos elementos dentro do form indicado.

Obrigado pela ajuda.

#8