Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

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:
  • Color picker
  • Nomi colore e codici colore



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




Regolamento • FAQ • Tutorial e risorse • Perdita della password • Pannello degli attrezzi

    

Niko
Amminattivo
Amminattivo


Sesso : Maschile
Età : 20
Messaggi : 7351
Località : Provincia di Varese


Vedere 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

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum