[PrimeFaces] Modifier les couleurs/polices d'un theme.

Version imprimable

20/03/2018, 16h37
Elwe31

[PrimeFaces] Modifier les couleurs/polices d'un theme.

Bonjour,

Comment faire pour modifier les couleurs de certains éléments d'un thème ?
Exemple : le fond d'un tabview ? Les couleurs des onglets ? La couleur du background du boody ?

Modifier la taille de la police générale ?

Est-ce que ceci est référencé quelque part ?

Merci.
20/03/2018, 21h07
VirgApps

Bonjour,
tu peux le faire simplement en rajoutant une feuille de style et en surchargeant les éléments souhaités. Il faut juste t'assurer que l'appel à cette feuille de style se fasse bien après celles de Primefaces.
21/03/2018, 08h15
OButterlin
L'ordre de chargement des css n'étant pas maîtrisable simplement, d'une manière générale, si tu veux remplacer des éléments css de Primefaces, il faut juste rajouter l'attribut !important à la fin de la définition.
Exemple :
Code:

1 2 3 4 5 6 .ui-state-disabled{ color:#909090 !important; opacity:1.0 !important; filter:alpha(opacity=100) !important; }
21/03/2018, 09h50
Elwe31

Ok, merci pour vos reponses.

2 questions :
1/Comment connaitre les éléments CSS de primefaces ?
2/Ne peut-on pas modifier le/les CSS primesfaces directement ?

merci
21/03/2018, 14h25
OButterlin

Alors, je répond dans l'ordre inverse :
2- Oui, on peut
1- Ça dépend du thème utilisé, et, généralement, ils sont "packés" donc difficiles à lire
21/03/2018, 15h19
Elwe31
Merci,

ICi : https://stackoverflow.com/questions/...-custom-styles
il dit de ne jamais utiliser "!important;" :weird:

Sinon, pour la suite des questions:
2/ comment ? y a t il des exemples ? j'ai essayé de regarder dans un .jar (dans le thème "afterdark") le fichier theme.css n'a pas l'air complet ??!!!!

autre petite chose quand je mets dans ma page

Code:

<h:outputStylesheet name="css/mystyle.css" />

j'ai :
Code:

1 2 mars 21, 2018 3:12:07 PM com.sun.faces.application.resource.ResourceHandlerImpl logMissingResource AVERTISSEMENT: JSF1064 : Impossible de localiser ou de servir une ressource, css/mystyle.css.
Et dans le code HTML generer j'ai :

Code:

><link type="text/css" rel="stylesheet" href="/javax.faces.resource/css/mystyle.css.jsf" />

merci
21/03/2018, 17h22
OButterlin
Citation:

Envoyé par Elwe31

ICi : https://stackoverflow.com/questions/...-custom-styles
il dit de ne jamais utiliser "!important;" :weird:

Ne jamais dire jamais... dans tous les cas, tu n'as pas le choix puisque tu ne maîtrises pas l'ordre de chargement

Citation:

Envoyé par Elwe31

Sinon, pour la suite des questions:
2/ comment ? y a t il des exemples ? j'ai essayé de regarder dans un .jar (dans le thème "afterdark") le fichier theme.css n'a pas l'air complet ??!!!!

autre petite chose quand je mets dans ma page

Code:

<h:outputStylesheet name="css/mystyle.css" />

Il faut mettre ceci dans ta page
Code:

1 2 <h:outputStylesheet library="css" name="mystyle.css" />
avec la structure de répertoire suivante : /WEB-INF/resources/css/mystyle.css
22/03/2018, 09h09
Elwe31
Citation:

Envoyé par OButterlin

<h:outputStylesheet library="css" name="mystyle.css" />
avec la structure de répertoire suivante : /WEB-INF/resources/css/mystyle.css

me donne toujours
Code:

1 2 mars 22, 2018 9:06:03 AM com.sun.faces.application.resource.ResourceHandlerImpl logMissingResource AVERTISSEMENT: JSF1064 : Impossible de localiser ou de servir une ressource, mystyle.css.
Quand tu parles d'ordre de chargement, c'est dans le fichier source HTML généré ? parce que si tu mets h:outputStylesheet dans le <body>, il est a la fin des link type="text/css" rel="stylesheet"
merci
22/03/2018, 10h02
OButterlin

Quand tu as plusieurs noms de classes identiques dans des fichiers css externes, la première définition d'un attribut l'emporte sur les suivantes.
Comme le fichier css de Primefaces est placé devant, il prime toujours... d'où le besoin de !important

Et tu peux toujours mettre ta référence au css à la fin de ton body, ça n'y change rien...
22/03/2018, 10h34
VirgApps

L'attribut !important est déconseillé car il "casse" le principe de la surcharge css en cascade.
Mais si c'est le seul moyen d'appliquer ton style, tu ne pourras pas faire autrement.

Autrement un tuto pour ordonner tes ressources : https://www.mkyong.com/jsf2/primefac...in-primefaces/
N'utlisant plus Primefaces, je n'ai aucun retour sur ces factets, mais si tu arrives bien à faire charger ta feuille de style en dernier, tu n'auras aucun mal à customiser ton style primefaces.
22/03/2018, 10h35
Elwe31

ok.

mais pour le "Impossible de localiser ou de servir une ressource, mystyle.css."

Code:

<h:outputStylesheet library="css" name="mystyle.css" />

donne

Code:

<link type="text/css" rel="stylesheet" href="/javax.faces.resource/mystyle.css.jsf" />

je ne comprends pas le code généré

l'emplacement du fichier css :
Code:

1 2 3 4 WebContent |-- resources | `-- css | `-- mystyles.css

22/03/2018, 12h03
OButterlin
Citation:

Envoyé par Elwe31

ok.

mais pour le "Impossible de localiser ou de servir une ressource, mystyle.css."

Code:

<h:outputStylesheet library="css" name="mystyle.css" />

donne

Code:

<link type="text/css" rel="stylesheet" href="/javax.faces.resource/mystyle.css.jsf" />

je ne comprends pas le code généré

Ça ne colle pas.
D'après ce que tu me montres, tu devrais avoir cette ligne de générée dans ta page
Code:

1 2 <link type="text/css" rel="stylesheet" href="/tonAppli/javax.faces.resource/mystyle.css.xhtml?ln=css" />
22/03/2018, 14h57
Elwe31

Ben j'ai bien cela de générer et ça fonctionne :

Code:

<link type="text/css" rel="stylesheet" href="/javax.faces.resource/mystyle.css.jsf?ln=css" />