[RESOLVIDO] - PrimeFaces - É feio mesmo?

12 respostas
P

Pessoal,

Estou estudando o PrimeFaces para aplicar na minha camada view de um projeto acadêmico mas me deparei com uma coisa: achei a aparência dele muito feia! Os icnoes aparecem muito grandes quando rodo a aplicação. Quando eu vejo o showcase no site do primefaces, os componentes aparecem um pouco menores. Já apliquei skin e ainda assim não muda o tamanho dos componentes. Eles são maiores do que os padrões do HTML. Tem alguma forma de melhorar a aparencia do prime faces? Busquei na net e não encontrei nada.

Abraços!

12 Respostas

A

Bom dia

Se o seu problema for igual ao meu, vc pode dar uma alteradinha no código do arquivo skin.css. Procura pelas linhas que fazem referencia ao tamanho das fontes e onde tem 1.1em por exemplo, vc substitui por 11px e testa. Fica bem menor.

P

Consegui melhorar com sua dica!

Brigado!

A

Se isso te basta, altera seu post pra RESOLVIDO

P

Feito!

S

asandro1501:
Bom dia

Se o seu problema for igual ao meu, vc pode dar uma alteradinha no código do arquivo skin.css. Procura pelas linhas que fazem referencia ao tamanho das fontes e onde tem 1.1em por exemplo, vc substitui por 11px e testa. Fica bem menor.

Boas, eu tambem estava com um problema identico queria diminuir as fontes das letras e dos componentes, e nada melhor do que editar o css onde se difini isso tudo.
valeu!!! :idea: :idea: :idea: :slight_smile: :slight_smile: :slight_smile: :slight_smile:

P

Aos amigos que se interessaram, segue a dica para melhorar e modificar o tema do PrimeFaces:

http://jqueryui.com/themeroller/

Muito bom!!

Se fizerem um tema legal mandem o link dele para avaliação!

Abraços

P

Fiz esse aqui para um sisteminha que eu estou fazendo:

http://jqueryui.com/themeroller/#ffDefault=Arial%2Csans-serif&fwDefault=normal&fsDefault=1.0em&cornerRadius=4px&bgColorHeader=cc0000&bgTextureHeader=07_diagonals_small.png&bgImgOpacityHeader=50&borderColorHeader=a1a1a1&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=eeeeee&fcContent=000000&iconColorContent=cc0000&bgColorDefault=eeeeee&bgTextureDefault=04_highlight_hard.png&bgImgOpacityDefault=100&borderColorDefault=d8dcdf&fcDefault=004276&iconColorDefault=cc0000&bgColorHover=f6f6f6&bgTextureHover=04_highlight_hard.png&bgImgOpacityHover=100&borderColorHover=cdd5da&fcHover=111111&iconColorHover=cc0000&bgColorActive=ffffff&bgTextureActive=01_flat.png&bgImgOpacityActive=65&borderColorActive=eeeeee&fcActive=cc0000&iconColorActive=cc0000&bgColorHighlight=f6ca37&bgTextureHighlight=08_diagonals_thick.png&bgImgOpacityHighlight=20&borderColorHighlight=fcd3a1&fcHighlight=444444&iconColorHighlight=004276&bgColorError=f3d8d8&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=75&borderColorError=cc0000&fcError=2e2e2e&iconColorError=cc0000&bgColorOverlay=a6a6a6&bgTextureOverlay=09_dots_small.png&bgImgOpacityOverlay=65&opacityOverlay=40&bgColorShadow=333333&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=10&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px

G

sulito:
asandro1501:
Bom dia

Se o seu problema for igual ao meu, vc pode dar uma alteradinha no código do arquivo skin.css. Procura pelas linhas que fazem referencia ao tamanho das fontes e onde tem 1.1em por exemplo, vc substitui por 11px e testa. Fica bem menor.

Boas, eu tambem estava com um problema identico queria diminuir as fontes das letras e dos componentes, e nada melhor do que editar o css onde se difini isso tudo.
valeu!!! :idea: :idea: :idea: :slight_smile: :slight_smile: :slight_smile: :slight_smile:

Mas que trabalheira editar o css do skin :D, basta definir o tamanho para todos os componentes com:

.ui-widget {
   font-size: 11px !important;
}
B

Fala Pessoal,

Eu também sou novato em primefaces, este post me ajudou muito! Mais gostaria de saber como faço para aumentar
o tamanho do input sem afetar a altura dele? No site do primefaces eles disponibilizam varios componentes mais na hora
que aplico eles não ficam da mesma forma o que devo fazer?

Agradeço desde ja pela atenção.

P

Não precisa alterar o SKIN.CSS do PRIMEFACES, basta inserir na página .xhtml dentro da tag :

<h:head>
Alterando o Tamanho da Fonte para qualquer Tema do PRIMEFACES

<style>
        .ui-widget,     
        .ui-widget .ui-widget {     
        font-size: 11px !important;     
       }
    </style>

</h:head>

L

pvrsouza:
Fiz esse aqui para um sisteminha que eu estou fazendo:

http://jqueryui.com/themeroller/#ffDefault=Arial%2Csans-serif&fwDefault=normal&fsDefault=1.0em&cornerRadius=4px&bgColorHeader=cc0000&bgTextureHeader=07_diagonals_small.png&bgImgOpacityHeader=50&borderColorHeader=a1a1a1&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=eeeeee&fcContent=000000&iconColorContent=cc0000&bgColorDefault=eeeeee&bgTextureDefault=04_highlight_hard.png&bgImgOpacityDefault=100&borderColorDefault=d8dcdf&fcDefault=004276&iconColorDefault=cc0000&bgColorHover=f6f6f6&bgTextureHover=04_highlight_hard.png&bgImgOpacityHover=100&borderColorHover=cdd5da&fcHover=111111&iconColorHover=cc0000&bgColorActive=ffffff&bgTextureActive=01_flat.png&bgImgOpacityActive=65&borderColorActive=eeeeee&fcActive=cc0000&iconColorActive=cc0000&bgColorHighlight=f6ca37&bgTextureHighlight=08_diagonals_thick.png&bgImgOpacityHighlight=20&borderColorHighlight=fcd3a1&fcHighlight=444444&iconColorHighlight=004276&bgColorError=f3d8d8&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=75&borderColorError=cc0000&fcError=2e2e2e&iconColorError=cc0000&bgColorOverlay=a6a6a6&bgTextureOverlay=09_dots_small.png&bgImgOpacityOverlay=65&opacityOverlay=40&bgColorShadow=333333&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=10&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px


Depois q eu fazer esse thema… como faço para jogar na minha aplicação???

A

Veja se isso te ajuda http://javasemcafe.blogspot.com.br/2011/05/jsf-20-utilizando-o-primefaces-221.html

Nesse post, eu ensino a colocar tanto o tema .jar como o .css
dá uma olhadinha no final, na parte de “Faça seu próprio tema!”

Criado 4 de novembro de 2010
Ultima resposta 19 de abr. de 2012
Respostas 12
Participantes 8