Problemas com menu - Primefaces

Front-end
#1

Pessoal,

Estou tentando estilizar alguns componentes o primefaces, para melhorar a cara do meu sistema. Entrei no site do jqueryui e alterei as propriedades como eu queria. Até ai tudo bem, criei alguns commandButton e ficou do jeito que queria, o problema é quando eu tento criar um menu (seja menu, menubar ou menuButton), nenhum botão fica do jeito que eu quero, ele não fica como o commandButton fica. Já pesquisei várias vezes como alterar isso e não consigo, abri o código-fonte e descobri que nesse arquivo wijmo.css.jsf ele coloca esse código:

.wijmo-wijmenu .wijmo-wijmenu-list .wijmo-wijmenu-item { background: none; border: none; }

Esse background não era pra estar como none, consigo tirá-lo, através do Chrome, mas apenas no tempo de execução, inspecionando o objeto, mas não consigo tira-lo de vez do código, não acho esse .css, não sei onde posso mudar isso.
Se alguém puder me ajudar, agradeço muito.
Só pra resumir: quando uso commandButton fica legal, do jeito que estilizei, quando vou criar algum menu (<p:menu>, por exemplo), não fica como eu quero, na verdade nem aparece na tela, só quando passo o mouse em cima que dá pra ver bem claro, não sei cmo mudar isso

Obrigado

#2

Tente assim:

.wijmo-wijmenu .wijmo-wijmenu-list .wijmo-wijmenu-item { background: none !important; border: none !important; }

pois o Primefaces pode estar chamando o css padrão.

#3

Não funcionou.

Eu editei o skin padrão no site que falei acima - jqueryui, peguei o css e as imagens e os chamo no meu template.xhtml, fica tudo como eu editei, só o menu que não. Ele nem aparece, só quando passo o mouse que aparece.

Muito estranho.
Coloquei o código que você falou no arquivo css que baixei no site e nao funcionou

#4

Isso é problema com os imports das imagens então,
ele não está transparênte, mas sim branco.

#5

Consegui achar o arquivo css dentro do jar do primefaces, só que não consigo editar. Li no arquivo readme, dentro do pacote, que eu tenho que editar essa classe no CSS: ui-widget-content, mas ela já está com as minha imagens e cores, tudo certo, só que ele (p:menu) não carrega essas configurações.
Como não está carregando a imagem, se quando eu declaro um commandButton ou um menuButton, a imagem aparece.

.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(../images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
#6

Não use o jar como Skin.
Crie você mesmo o Skin.
Só reaproveitando as imagens e o CSS que o Skin gera pra você.
Acho que fica mais fácil.
E Existem mais de 10 Imagens para o Skin.
Provavelmente a Imagem do menu não é a mesma que a dos botões.

#7

Então eu não uso o jar para skin, tenho meu proprio skin. Só que quando eu vejo o código fonte do menu, aparece esse tal de wijmo.css, que está dentro de primefaces.jar. Não sei como mudar isso, já que meu skin está feito e sendo referenciado, tanto que todos os componentes carregar meu css, só o menu que não

#8

Amigo, você conseguiu resolver este problema?
Estou passando pela mesma situação

Olha como está meu menu
http://i1047.photobucket.com/albums/b47 … /30RC1.png

#9

Eu consegui resolver via CSS.
Mais ou menos assim:

.wijmo-wijmenu .wijmo-wijmenu-list .wijmo-wijmenu-item {
    background: #ffffff url(../images/ui-bg_highlight-soft_75_5762a8_1x100.png) 50% 50% repeat-x !important; 
    color: #222222 !important;
    border: 1px solid #aaaaaa !important;        
} 

/*Texto dos menus em negrito*/
.wijmo-wijmenu-text {
    font-weight: bold;    
}

/*Padronizando o efeito de hover nos itens do menu*/
.wijmo-wijmenu .wijmo-wijmenu-list .wijmo-wijmenu-item 
    .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header 
    .ui-state-hover, .ui-state-focus, 
    .ui-widget-content .ui-state-focus, 
    .ui-widget-header .ui-state-focus { 
        border: 1px solid #999999; 
        background: #dadada url(../images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; 
        font-weight: normal; 
        color: #5762a8;        
}

.wijmo-wijmenu .wijmo-wijmenu-list .wijmo-wijmenu-item 
    .ui-state-hover a, .ui-state-hover a:hover { 
        color: #5762a8; 
        text-decoration: none; 
}

/*Efeito para quando o menu estiver selecionado*/
.wijmo-wijmenu .wijmo-wijmenu-list .wijmo-wijmenu-item 
    .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
        background-image: url(../images/ui-icons_5762a8_256x240.png); 
}

.wijmo-wijmenu .wijmo-wijmenu-list .wijmo-wijmenu-item 
    .ui-state-active, .ui-widget-content .ui-state-active, 
    .ui-widget-header .ui-state-active { 
        border: 1px solid #aaaaaa; 
        background: #dadada url(../images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; 
        font-weight: normal; 
        color: #5762a8;
}

.wijmo-wijmenu .wijmo-wijmenu-list .wijmo-wijmenu-item 
    .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { 
        color: #5762a8; 
        text-decoration: none; 
 }
 
.wijmo-wijmenu .wijmo-wijmenu-list .wijmo-wijmenu-item .ui-state-active .ui-icon {
    background-image: url(../images/ui-icons_5762a8_256x240.png); 
}

/*Aumentnado o tamanho do submenu*/
.wijmo-wijmenu-child{
    width: 200px !important;
}
#10