Modifica colori per i titoli degli argomenti


Astuzia Modifica colori per i titoli degli argomenti

Messaggio Da Niko il Lun 16 Mar 2015 - 16:20

Modifica colori per i titoli degli argomenti


Modifica colori per i titoli degli argomenti

Di default ci sono solamente 14 colori diversi da scegliere per i titoli dei tuoi argomenti. Con questo piccolo trucchetto saremo capaci di personalizzare la lista di colori disponibili. Inoltre, saremo capaci di nascondere i colori che non ci interessano Wink


Exclamation Attenzione: dovresti avere attivata l'opzione Autorizza i colori nei titoli dei soggetti per poter usare questa astuzia. Puoi trovare questa opzione andando verso Pannello di amministrazione ► Generale ► Messaggi & email ► Configurazione

Scegli Si per attivare l'opzione :new:

Aggiunta di nuovi colori
Per aggiungere colori aggiuntivi alla lista drop-down, vai verso Pannello di amministrazione ► Moduli ► HTML & javascript ► Gestione del codice javascript e crea un nuovo codice :new:

  • Titolo: a tua scelta
  • Dove: In tutte le pagine
  • Codice:
    Codice:
    $(function() {
      if (!document.post || !document.post.topic_color) return;
      var colors = {
        'Crimson' : '#DC143C',
        'Tomato' : '#FF6347',
        'Orange Red' : '#FF4500',
        'Pink' : '#FFC0CB',
        'Magenta' : '#FF00FF',
        'Violet' : '#EE82EE',
        'Sky' : '#87CEEB',
        'Light Sky' : '#87CEFA',
        'Slate Blue' : '#6A5ACD',
        'Steel Blue' : '#4682B4',
        'Teal' : '#008080',
        'Lime' : '#00FF00',
        'Dark Green' : '#006600',
        'Light Green' : '#90EE90',
        'Yellow Green' : '#9ACD32'
      },
      a, b = document.post.topic_color, c = b.childNodes, i = 0, j = c.length, k;
      for (k in colors) {
        a = document.createElement('OPTION');
        a.innerHTML = k;
        a.style.color = colors[k];
        a.value = colors[k];
        b.insertBefore(a, b.firstChild);
      };
      for (; i<j; i++) if (c[i].style.color == document.post.subject.style.color) c[i].selected = 1;
    });



Modifiche da apportare

All'inizio del codice vedrete una serie di colore. All'interno di questo elemento sarete in grado di modificare i vari colori. E' importante includere il nome del colore e il relativo codice colore Wink
Ad esempio:
Codice:
var colors = {
  'Red' : '#FF0000',
  'Green' : '#009900',
  'Blue' : '#0000FF'
},

Possiamo aggiungere tutti i colori che preferiamo. Come potete vedere nell'esempio i codici vanno inseriti come 'nome colore' : 'codice colore' e andrebbero separati da una virgola. L'ultimo colore non necessita di una virgola perchè questo mostrerebbe un errore per i vecchi browser.

Per scegliere i colori più facilmente vi proponiamo questi due strumenti:



Rimozione di colori
Magari vorresti anche rimuovere alcuni colori dalla lista predefinita. Ad esempio potresti voler rimuovere il colore bianco e grigio perchè non si visualizzano facilmente sugli sfondi chiari. Per fare questo vai verso Pannello di amministrazione ► Moduli ► HTML & javascript ► Gestione del codice javascript e crea un nuovo codice :new:

  • Titolo: a tua scelta
  • Dove: In tutte le pagine
  • Codice:
    Codice:
    $(function() {
      if (!document.post || !document.post.topic_color) return;
     
      var badeggs = [
        '#FFFFFF',
        '#999999',
        '#FFFF00'
      ],
      o = document.post.topic_color.childNodes, i = 0, j = o.length, k, v, l = badeggs.length;
     
      for (; i<j; i++) {
        for (k = 0; k<l; k++) {
          v = badeggs[k].toLowerCase();
          if (o[i].innerHTML.toLowerCase() == v || o[i].value.toLowerCase() == v) {
            o[i].style.display = 'none';
            o[i].selected && ( o[i].nextSibling ? o[i].nextSibling.selected = 1 : o[i].previousSibling.selected = 1 );
          }
        }
      }
      document.post.subject.style.color = document.post.topic_color.value;
    });


Modifiche da apportare

All'inizio del codice puoi trovare un array di codici colore. In questa array sarai capace di scrivere i nomi o i valori dei colore che desideri rimuovere dalla lista predefinita
Codice:
var badeggs = [
  '#FFFFFF',
  '#999999',
  '#FFFF00'
],

Possiamo aggiungere alcuni, o anche tutti i colori: non c'è limite. Ogni colore che vuoi rimuovre andrebbe separato da una virgola. Puoi usare sia il nome del colore che il suo valore :bene:

Idea è preferibile rimuovere il colore con il suo valore perchè se inserite il colore red questo sarà ancora visibile come rosso in lingua italiana. Quindi varia a seconda della lingua del forum Wink

Per facilitarvi il lavoro, ecco un elenco dei vari colori predefiniti:

NameValue
Dark red#660000
Red#FF0000
Orange#FF9933
Brown#663300
Yellow#FFFF00
Green#006600
Olive#666633
Cyan#00FFFF
Blue#0000FF
Dark Blue#000099
Indigo#6600FF
Grey#999999
White#FFFFFF
Black#000000

Se volete rimuovere tutti i colori predefiniti e partire da capo inserendo i nostri colori personalizzati, questa è l'array da utilizzare:
Codice:
var badeggs = [
  '#660000',
  '#FF0000',
  '#FF9933',
  '#663300',
  '#FFFF00',
  '#006600',
  '#666633',
  '#00FFFF',
  '#0000FF',
  '#000099',
  '#6600FF',
  '#999999',
  '#FFFFFF',
  '#000000'
],




© Forum dei forum


Staff FDF - Forum di supporto per Forumattivo IT
Copyrigth © FORUMATTIVO.COM

Tutorial creato da Ange Tuteur del forum di supporto inglese e tradotto da Niko

avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto


 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum