[Resolvido] Criar nova classe de estilo (CSS) no menubutton - Primefaces

9 de abril de 2013 4 respostas

aprendiz.devel 9 de abril de 2013

E ae galera,

Estou tendo alguns problemas para criar um estilo diferente para um dos botões de meu sistema.
Acontece que preciso que ele seja transparente, tentei usar a propriedade styleClass do componente, mas mesmo assim ele assume o estilo padrão do primefaces. Alguém já passou por isso ou tem ideia de como faço para funcionar?

CSS

/* primefaces override*/
.ui-menubutton-transparent{
  background-color:#FFFFFF!important;
  background:#FFFFFF!important; 
}

Componente

<h:form id="form">
                  <p:menuButton value="Usuário" styleClass="ui-menubutton-transparent">  
                    <p:menuitem value="Meu perfil" icon="ui-icon-disk"/>  
                    <p:menuitem value="Configurações" icon="ui-icon-arrowrefresh-1-w"/>  
                    <p:menuitem value="Log off" icon="ui-icon-arrowrefresh-1-w"/> 
                    <p:separator />  
                    <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon-extlink"/>  
                  </p:menuButton>
</h:form>

4 Respostas

diogoprosoft 9 de abr. de 2013

Faz o seguinte, inspeciona com o firebug e vê qual classe que aplica o css em seu botão, depois pega o nome dela e reescreve na sua aplicação, com novas cores, etc., mais usa o mesmo nome da classe.

aprendiz.devel 9 de abr. de 2013

Olha só, é essa classe aqui:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #777777;
background: #111111 url("/javax.faces.resource/images/ui-bg_glass_40_111111_1x400.png.xhtml?ln=primefaces-black-tie") 50% 50% repeat-x;
font-weight: normal;
color: #e3e3e3;
}

Arrumei e coloquei assim no meu CSS:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
   background-color: #009900!important;  
   background: #009900!important;
   border: 1px solid #777777;
   color: #E3E3E3;
   font-weight: normal;
}

Ele deu certo. Só que assim eu aplico esse estilo em todos os botões? Não tem como especificar onde quero?

diogoprosoft 9 de abr. de 2013

sim pq ele sobreescreve o que for igual, no caso no original tem o background que no seu novo não tem, somente o background-color não resolve, resumindo vc pode ter coisas a mais, porém não pode ter menos que que o original.

aprendiz.devel 9 de abr. de 2013

Sim, eu tinha visto depois que respondi, editei a mensagem mas não deu tempo. Parece que funcionou aqui, adicionei mais um botão para testar ele específico, depois de alguns F5 parece que deu certo.

Solução ficou assim:

CSS

.styleGreen .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
   background-color: #009900!important;  
   background: #009900!important;
   border: 1px solid #777777;
   color: #E3E3E3;
   font-weight: normal;
}

Código primefaces:

// botão com o estilo
                  <p:menuButton id="botoesSessao" value="Usuário" styleClass="styleGreen">  
                    <p:menuitem value="Meu perfil" icon="ui-icon-disk"/>  
                    <p:menuitem value="Configurações" icon="ui-icon-arrowrefresh-1-w"/>  
                    <p:menuitem value="Log off" icon="ui-icon-arrowrefresh-1-w"/> 
                    <p:separator />  
                    <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon-extlink"/>  
                  </p:menuButton>
                  // botão sem o estilo
                  <p:menuButton id="botoes" value="Usuário"> 
                  </p:menuButton>

Obrigado amigo!

Criado 9 de abril de 2013

Ultima resposta 9 de abr. de 2013

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados