Stai creando dei codici personalizzati per la tua community o per il tuo account? In questa pagina trovi i dettagli che possono aiutarti in entrambi i casi.
Prima di iniziare, però, potresti trovare utile consultare quali pagine possono essere usate per la personalizzazione. Se stai pensando di scrivere del codice JavaScript per la tua community, devi chiedere che venga abilitato contattando il supporto di Fandom e familiarizzarti con il processo di revisione Javascript. Per informazioni più generali, vedi Aiuto:Personalizzare CSS e JS.
Personalizzazione di pagine specifiche
CSS
L'elemento HTML <body> degli articoli include un identificatore univoco basato sul nome della pagina. Per esempio, su questa pagina di aiuto, la classe è .page-Aiuto:CSS_e_JS_avanzati.
Il formato generale è .page-[titolo articolo], dove gli spazi, i due punti, e gli altri caratteri speciali sono sostituiti da trattini bassi (_).
JavaScript
In Mediawiki:Common.js, utilizza il comando "switch" per applicare il JavaScript solo ad alcune pagine:
switch (mw.config.get('wgPageName')) {
case 'nome pagina':
// questo JS sarà applicato a "nome pagina"
break;
case 'altra pagina':
// questo JS sarà applicato a "altra pagina"
break;
}
Applicare CSS e JS a community specifiche
Nel tuo CSS personale, puoi aggiungere una classe prima di ogni altro selettore CSS che ti permette di modificare gli stili che il tuo account vede su wiki specifiche.
Questa classe è basata sul nome di database della community, non il suo URL — questi sono tipicamente, ma non sempre, gli stessi. Il formato è:
.wiki-[nome di database]
o, per una wiki internazionale:
.wiki-[codice lingua][nome di database]
Per esempio, se volessi rendere parte dello sfondo di Wookieepedia rosso per te, dovresti aggiungere questo nel tuo file global.css:
.wiki-starwars .page__main { background-color:red; }
Per JavaScript, wgDBname può essere usato per selezionare una community specifica.
Ordine di caricamento
L'ordine di carimento generale sia per il CSS che per JS è:
- Codice base di Fandom
- codice della community locale
- codici personali
All'interno di ogni livello, l'ordine di caricamento è prima Common, poi Fandomdesktop. Questo significa che se avete settato .class { color: red; } in Common.css, ma .class { color: green; } in Fandomdesktop.css, la .class sarà verde. E poiché il CSS personale è l'ultimo ad essere caricato, qualsiasi cosa metterai lì sovrascriverà sempre le scelte locali della wiki.
Ciò implica anche che se stai importando CSS o font personalizzati — e la tua wiki ha sia Common.css e Fandomdesktop.css — questi import devono essere in cima a Common.css.
Per JS, l'ordine di caricamento è particolarmente importante quando si considera come usare al meglio MediaWiki:ImportJS. Poiché ImportJS è caricato per ultimo, puoi inserire la tua personalizzazione degli script dalla Dev Wiki in Common.js o Fandomdesktop.js, ma avere l'import vero e proprio dello script in ImportJS. Il l'ordine di caricamento completo di JS è:
- Common.js
- Fandomdesktop.js
- Script importati attraverso Common.js
- Script importati attraverso Fandomdesktop.js
- ImportJS
Infine, ricorda un'ovvietà: la pagine sono caricate dall'alto in basso. Ciò significa che le dichiarazioni in cima alla pagna possono essere sovrascritte da quelle in basso.
!important nel CSS
A causa dell'ordine di caricamento dei CSS, a volte potrebbe esserti necessario far uso della proprietà !important " per assicurarti che una regola del CSS venga applicata. Ma !important dovrebbe essere evitato quando possibile con l'uso di selettori CSS specifici (anche fin troppo specifici).
Problemi di cache
Ogni file scaricato da internet viene memorizzato nella cache. Di solito questa è una buona cosa perché riduce il traffico sia per il tuo dispositivo sia per i server di FANDOM, ma può diventare un problema quando si stanno provando dei cambiamenti di design. Può essere necessario un po' di tempo prima che i cambiamenti abbiano effetto, a meno che non bypassi la tua cache.
Se bypassare la cache non funziona, puoi provare a debuggare il tuo codice aggiungendo ?debug=1 alla fine dell'URL di ogni pagina. Debuggare il tuo codice significa che il codice è quasi garantito al 100% che caricherà gli script e/o i figlio di stile aggiunti di recente.
Frammenti popolari di JavaScript
Per avere un'idea di alcuni script creati da altri che potresti trovare utili o voler provare, dai un'occhiata alla lista di miglioramenti JavaScript nella Fandom Developers Wiki.
JavaScript duplicati
Alcuni script possono creare problemi se vengono eseguiti più volte nella stessa pagina. Assicurati di scrivere il codice in modo che ogni suo pezzo sia eseguito solo una volta. Evita di incollare lo stesso codice in più file perché è probabile che provochi conflitti e causi confusione sia a te sia agli altri visitatori.
Disabilitare temporaneamente il CSS/JS
I CSS e JS personalizzati possono essere temporaneamente disabilitati usando i seguenti comandi.
I comandi dovrebbero essere aggiunti alla fine dell'URL (Esempio: https://community.fandom.com/it/wiki/Speciale:Random?usesitecss=0. [Questo esempio disabilita il CSS del sito]).
Se è necessario più di un comando, invece del punto interrogativo (?), inserisci una "e" commerciale (&) per il secondo, terzo e quarto comando (nel caso ci siano) (Esempio: https://community.fandom.com/it/wiki/Speciale:Random?usesitecss=0&useuserjs=0. [Questo esempio disabilita il CCS del sito e il JS personale]).
Ecco una tabella di tutti i comandi CSS/JS.
| Comando | Azione |
|---|---|
?useusercss=0
|
Disabilita tutto il CSS che è stato aggiunto nella tue pagine CSS personali. |
?useuserjs=0
|
Disabilita tutto il JS che è stato aggiunto nella tue pagine JS personali. |
?usesitecss=0
|
Disabilita tutto il CSS che è stato aggiunto nel CSS locale della wiki. |
?usesitejs=0
|
Disabilita tutto il JS che è stato aggiunto nel JS locale della wiki |
?safemode=1
|
Disabilita tutto il CSS e JS personalizzato, del sito e personale. |
Controllo degli errori negli editor di CSS e JS
Gli editor di CSS e JS hanno attivo il controllo degli errori ("linting") e la syntax highlighting:
- Mentre digiti il codice, la pagina ti fa sapere se si verificano errori nella sintassi.
- Ricorda che non tutti i problemi (errori) devono essere risolti: la tecnologia CSS (e anche JS) è in continua evoluzione e i browser non si comportano tutti allo stesso modo, perciò alcuni messaggi di errore potrebbero non richiedere alcuna azione.
Problemi comuni
| Problema | Spiegazione |
|---|---|
@import prevent parallel downloads, use <link> instead
|
I tag Link sono usati di solito per importare CSS. Tuttavia, MediaWiki non supporta l'aggiunta di tag link personali senza l'uso del JS, perciò normalmente questo errore può essere ignorato. Usare @import è il metodo consigliato.
|
Expected X but found Y
|
Vuol dire che hai digitato un valore non valido per una proprietà. Per esempio, in color: foo; il valore foo, inserito per la proprietà "color" (colore), non è valido perché non è un colore.
|
Use of !important
|
!important in generale dovrebbe essere evitato nel CSS perché rende più difficile mantenerlo, e rende anche più difficile per gli utenti sovrascrivere le impostazioni nel loro CSS personale. Quasi sempre, se si utilizza il selettore corretto si riesce a evitare di usare !important.
|
Unknown property 'codename'
|
Sebbene non tutti i codici CSS siano riconosciuti dallo strumento (dato che lo stesso CSS viene aggiornato frequentemente), alcuni codici CSS possono ancora essere letti quando vengono eseguiti per un dato oggetto nella pagina di Fandom (per esempio, mix-blend-mode: color-dodge;).
|
Vedi anche
- Aiuto:Includere CSS e JS aggiuntivi - per importare file CSS e JS.
- Aiuto:Importare i font di Google - per utilizzare font personali.
- Aiuto:Personalizzare CSS e JS - la pagina principale per i dettagli su CSS e JS.
- Aiuto:Pagine CSS e JS - una panoramica della pagine CSS e JS che possono essere personalizzate su Fandom
Aiuto aggiuntivo e feedback
- Naviga e cerca altre pagine di aiuto su Contenuti.
- Esplora la Wiki della Community per ulteriori fonti di aiuto o supporto.
- Leggi come contattare Fandom per problemi o segnalare errori.