Come sovrascrivo CSS PrimeFaces predefinito con stili personalizzati?

Ho creato il mio tema come progetto Maven separato e viene caricato correttamente.

Ora voglio cambiare la dimensione di un componente. Ad esempio, un

. Ha una class chiamata ui-orderlist-list che è definita in primefaces.css con una dimensione fissa di 200×200. Non importa quello che faccio nel mio theme.css , è sovrascritto da questo attributo e non c’è modo di rendere più ampia la parte di contenuto di

.

Per altri componenti, potrei voler sovrascrivere solo un’istanza di un componente, non tutto.

Qualcuno può dirmi come posso fare tutto questo?

Ci sono molte cose che devi tenere in considerazione di quali una o più potrebbero essere pertinenti al tuo caso specifico

Carica il tuo CSS dopo PrimeFaces uno

È necessario assicurarsi che il CSS venga caricato dopo quello PrimeFaces. Puoi ottenere ciò posizionando riferimento al tuo file CSS all’interno di invece di :

  ...    ...  

JSF trasferirà automaticamente il foglio di stile alla fine del HTML generato e questo assicurerà quindi che il foglio di stile venga caricato dopo gli stili predefiniti di PrimeFaces. In questo modo i selettori nel file CSS che sono esattamente gli stessi del file CSS PrimeFaces avranno la precedenza su quello PrimeFaces.

Probabilmente vedrai anche dei suggerimenti per metterlo in di che è compreso da HeadRenderer specifico di HeadRenderer , ma questo è inutilmente maldestro e si romperebbe quando hai il tuo HeadRenderer .

Comprendere la specificità CSS

È inoltre necessario assicurarsi che il selettore CSS sia specifico almeno quanto il selettore CSS predefinito di PrimeFaces sull’elemento specifico. Devi capire le specificità CSS e le regole di cascata ed ereditarietà . Ad esempio, se PrimeFaces dichiara uno stile di default come segue

 .ui-foo .ui-bar { color: pink; } 

e tu lo dichiari come

 .ui-bar { color: purple; } 

e l’elemento particolare con class="ui-bar" capita di avere un elemento genitore con class="ui-foo" , quindi quello di PrimeFaces avrà ancora la precedenza perché quella è la corrispondenza più specifica!

Puoi utilizzare gli strumenti di sviluppo del browser per trovare l’esatto selettore CSS. Fai clic con il tasto destro sull’elemento in questione nel browser (IE9 / Chrome / Firefox + Firebug) e seleziona Ispeziona elemento per vederlo.

Esclusione parziale

Se è necessario eseguire l’override di uno stile solo per un’istanza specifica del componente e non tutte le istanze dello stesso componente, aggiungere una styleClass personalizzata e agganciarla. È un altro caso in cui viene utilizzata / applicata la specificità. Per esempio:

  
 .ui-datatable.borderless tbody, .ui-datatable.borderless th .ui-datatable.borderless td { border-style: none; } 

Non usare mai! Importante

Nel caso in cui non si riesca a caricare correttamente il file CSS in ordine o a capire il giusto selettore CSS, probabilmente si afferra la !important Soluzione !important . Questo è semplicemente sbagliato. È una brutta soluzione e non una soluzione reale. Confonde solo le tue regole di stile e te stesso più a lungo termine. L’ !important Dovrebbe essere usato solo per sovrascrivere i valori codificati nell’attributo di style dell’elemento HTML da un foglio di stile CSS (che a sua volta è anche una ctriggers pratica, ma in alcuni rari casi purtroppo inevitabili).

Guarda anche:

  • Come fare riferimento a CSS / JS / risorsa immagine nel modello Facelets?
  • Mozilla Developer Network> CSS> Specificità (ottimo articolo, assolutamente da leggere!)
  • Comprensione della precedenza di stile nei CSS: specificità, ereditarietà e cascata

puoi creare un nuovo file css ad esempio cssOverrides.css

e posiziona tutti gli override che desideri al suo interno, in questo modo l’aggiornamento della versione di primefaces non influirà su di te,

e nella tua h: testa aggiungi qualcosa del genere

  

se non funziona prova ad aggiungerlo al corpo h:

per verificare se funziona prova questo semplice esempio all’interno del file css

 .ui-widget { font-size: 90% !important; } 

questo ridurrà la dimensione di tutti i componenti / testo di primefaces

Sto usando PrimeFaces 6.0. Ecco alcune informazioni che avrei voluto avere riguardo a questo:

Se usi , funzionerà, ma il tuo CSS non verrà caricato per ultimo anche se è l’ultimo nei (altri file CSS saranno inclusi in seguito). Un trucco che puoi fare che ho imparato da qui è inserirlo in , che deve entrare nel corpo , in questo modo:

     ... 

Quindi il tuo CSS sarà l’ultimo caricato. Nota: dovrai comunque rispettare le regole di specificità come descritto da BalusC.

Ho inserito “MyCSS.css” in WebContent / resources / css /.

Ulteriori informazioni sull’ordine di caricamento delle risorse: http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces

Gli stili usati da PrimeFaces / jQuery UI possono essere abbastanza complessi. Un elemento può ricevere il suo stile da più regole CSS. È bello sapere che puoi utilizzare il filtro nella scheda dello stile dell’ispettore DOM per cercare sulla proprietà che desideri personalizzare:

Questo screenshot è stato utilizzato con Chrome, ma il filtro è disponibile anche in Firefox e Safari.

Quando hai trovato la regola che desideri personalizzare, puoi semplicemente creare una regola più specifica aggiungendo il prefisso a html . Ad esempio, potresti sovrascrivere .ui-corner-all come:

 html .ui-corner-all { border-radius: 10px; }