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

**Elwe31** · 20/03/2018, 16h37

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.

**VirgApps** · 20/03/2018, 21h07

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.

**OButterlin** · 21/03/2018, 08h15

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.ui-state-disabled{
    color:#909090 !important;
    opacity:1.0 !important;
    filter:alpha(opacity=100) !important;
}

**Elwe31** · 21/03/2018, 09h50

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

**OButterlin** · 21/03/2018, 14h25

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

**Elwe31** · 21/03/2018, 15h19

Merci,

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

merci

**OButterlin** · 21/03/2018, 17h22

Envoyé par Elwe31

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

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Il faut mettre ceci dans ta page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

avec la structure de répertoire suivante : /WEB-INF/resources/css/mystyle.css

**Elwe31** · 22/03/2018, 09h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**OButterlin** · 22/03/2018, 10h02

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...

**VirgApps** · 22/03/2018, 10h34

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.

**Elwe31** · 22/03/2018, 10h35

ok.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

donne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**Elwe31** · 22/03/2018, 10h38

l'emplacement du fichier css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**OButterlin** · 22/03/2018, 12h03

Envoyé par Elwe31

ok.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

donne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<link type="text/css" rel="stylesheet" href="/tonAppli/javax.faces.resource/mystyle.css.xhtml?ln=css" />

**Elwe31** · 22/03/2018, 14h57

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

JSF Java

Discussions similaires

Partager

Partager