Come si fa: modificare l’aspetto delle note di mail con html e css

Avete presente il classico stile delle note in Mail?

note

Non è male, ma seguendo le indicazioni di Mac OS X Hints, possiamo divertirci a modificarlo. In assenza di competenze con html, css e programmi di grafica gli interventi possibili si riducono, ma vediamo come personalizzare alcuni aspetti estetici.

Avvertenza: modificheremo il contenuto di Mail.app, se ci si limita a fare gli interventi descritti non si creano problemi, ma fate comunque attenzione. Inoltre un aggiornamento di Mail riporterà la condizione precedente.

mostra contenuto pacchetto mail

Trovate Mail.app nella cartelle Applicazioni, cliccate con il tasto destro e scegliere Mostra contenuto pacchetto. Navigate in Contents/Resources fino a trovare i tre file evidenziati di seguito: note-view.html, note-windows.html e note.css.

contents

Avvertenza: prima di procedere alle modifiche fatevi un backup dei file.

La cosa più semplice che si può fare è cambiare il colore di sfondo aprendo con un editor come Fraise il file note.css. La riga interessata è la terza, dove potete sostituire al valore rgb standard un colore differente. I valori sono 3 perché sono Red, Green, Blu ed ognuno di essi può essere valorizzato da 0 (vuoto) a 254 (pieno). Impostando ad esempio background: rgb(250,250,250); si otterà un grigio molto chiaro, quasi bianco. Ad ogni salvataggio (Fraise richiederà la password) anche se Mail è aperto potrete vedere le modifiche selezionando una nota.

Dopo aver fatto questa prova però, noterete che rimarrà un alone giallo. Si tratta di una immagine che viene applicata nei due file html. Per cui sarà necessario aprirli e cancellarla o, eventualmente, sostituirla con una differente di nostra creazione.

righe-immagine

L’immagine originale è una trasparenza sfumata che viene ingrandita con width ed height al 100%, per cui “stirata” sulla nota. Se mantenete questa logica potete limitarvi a modificarla con una vostra, altrimenti dovrete poi agire anche sul css per modificarne il comportamento.

Una possibilità è anche quella di aggiungere immagini o texture. Ho realizzato a titolo esemplificativo un’immagine che ho chiamato note-bg-reloaded.png.

note-bg-reloaded

Come si può notare dalla preview di QuickLook, ha uno sfondo trasparente e può essere utilizzata con qualsiasi colore scegliate per il background, anche quello originale. Per applicarla dovrete prima copiare il file note-bg-reloaded.png all’interno di Contents/Resources e poi includerla nel file note.css aggiungendol a backgound in questo modo:

background

Il risultato sarà questo:

Sia chiaro che è giusto un esempio, potete poi personalizzare il tutto come preferite. Dalle preferenze (cmd+,) potreste anche cambiare il carattere con uno differente. Su Google web fonts ne ho trovato uno simpatico tra quelli hand-writed, ma volendo si possono utilizzare anche font più classici per una maggiore leggibilità.

google webfonts

Ed ecco come potrebbe apparire cambiando anche lo sfondo:

cambiare

Il tutto è a solo titolo d’esempio ovviamente, alla fine io preferisco lo stile classico anche nel font, con qualcosa di molto più leggibili. Ma se vi va di personalizzare lo stile delle vostre note, ora sapete come procedere. Buon divertimento.

Maurizio Natali

Titolare e caporedattore di SaggiaMente, è "in rete" da quando ancora non c'era, con un BBS nell'era dei dinosauri informatici. Nel 2009 ha creato questo sito nel tempo libero, ma ora richiede più tempo di quanto ne abbia da offrire. Profondo sostenitore delle giornate di 36 ore, influencer di sé stesso e guru nella pausa pranzo, da anni si abbronza solo con la luce del monitor. Fotografo e videografo per lavoro e passione.

Commenti controllati Oltre a richiedere rispetto ed educazione, vi ricordiamo che tutti i commenti con un link entrano in coda di moderazione e possono passare diverse ore prima che un admin li attivi. Anche i punti senza uno spazio dopo possono essere considerati link causando lo stesso problema.