Come risolvere piccoli fastidi sul Web con Stylish [Firefox e Chrome]

I web designer hanno un lavoro quasi impossibile. Devono inventare un design che piaccia a tutti. Quando parli di un servizio come Gmail, utilizzato da innumerevoli milioni di persone in tutto il mondo, puoi davvero lasciar perdere la parte 'quasi': è semplicemente impossibile. Anche se una riprogettazione è apprezzata dalla maggior parte delle persone, ci saranno sempre utenti a cui non piacerà davvero il nuovo look.

A volte ci sono abbastanza utenti da costringere un'azienda a fare marcia indietro, come ha fatto di recente Google con i pulsanti dell'icona di Gmail. Ma cosa succede se c'è qualcosa che? veramente odio e la società non lo cambia indietro? Sei bloccato con esso per sempre? Grazie agli stili utente, puoi risolvere questi problemi da solo.

Presentazione di Elegante

Elegante è un componente aggiuntivo gratuito disponibile sia per Firefox e Cromo e ti consente di fare qualcosa di davvero magico: applicare i tuoi stili agli elementi della pagina web. Anche se non sei uno sviluppatore web e non hai mai scritto un po' di CSS in vita tua, è molto più semplice di quanto sembri. Puoi usare Stylish per trasformare completamente i siti web (come ti mostrerò nella prossima sezione), ma ancora più importante, puoi usare Stylish per risolvere piccoli fastidi in pochi minuti.

Ad esempio, ho avuto un problema con la dimensione del carattere predefinita in Gmail. L'interfaccia andava bene: non volevo ingrandire (Ctrl +) con il mio browser, perché ciò avrebbe aumentato le dimensioni di tutti gli elementi dell'interfaccia e sarebbe stato davvero brutto. Volevo solo un modo per ingrandire leggermente il carattere del messaggio.

Con Stylish è stato davvero semplice e ti mostrerò come. Ma prima di pensare alla creazione dei tuoi stili utente, parliamo di come sfruttare il lavoro di altre persone.

UserStyles.org

Se qualcosa ti dà sui nervi, è del tutto possibile che tu non sia solo. UserStyles.org è un sito Web che consente agli utenti di condividere gli stili che hanno creato. Sopra puoi vedere uno stile ( Aggiungi etichette alle icone della barra degli strumenti ) consigliato dal commentatore di MakeUseOf RandyN in risposta alla nostra storia sui pulsanti dell'icona di Gmail. Questo stile ti consente di mantenere le icone, ma di aggiungere etichette di testo, cosa che Google non ti consente di fare.

UserStyles.org è fantastico, ma non è perfetto. Alcuni dei design cercano di fare troppo (cambiano completamente l'aspetto di un sito Web) e alcuni sono per vecchie versioni di siti Web e ora sono rotti. Se stai cercando di riparare qualcosa di piccolo e non riesci a trovarlo su UserStyles.org, forse la tua migliore linea d'azione è farlo da solo.

Creare il tuo stile utente semplice

Per creare il tuo stile utente, devi prima sapere quale elemento della pagina stai cercando di modificare e quindi quale modifica vuoi apportare. Quindi, per iniziare, fai clic con il pulsante destro del mouse su qualsiasi cosa tu voglia modificare e scegli Ispeziona elemento . Dovresti vedere qualcosa del genere:

Firefox scurisce il resto della pagina e disegna una cornice molto chiara attorno all'elemento selezionato. Sopra quell'elemento, il testo che dice div#2d6.ii.gt.adP.adO , è un gruppo di classi CSS, insieme a un ID (la parte che inizia con #). Questo è il selettore che influenza lo stile di questo elemento. Nella parte inferiore dello schermo è presente una barra di navigazione che ti consente di ' attraversare l'albero DOM ', o in parole più semplici, vai su e giù nella gerarchia di elementi che portano all'elemento che hai scelto.

Il nome del gioco qui è scegliere l'elemento che desideri modellare e rendere la selezione non così ristretta da non influire su tutto ciò che vuoi influenzare, né così ampia da rovinare altre cose.

Ho fatto clic su un elemento più in alto, div.gs , solo perché mi piace il suo nome (sembra qualcosa che non cambierà troppo presto, ma è una supposizione da parte mia). Interessa l'intera area del messaggio. Una volta selezionata l'area che desideri applicare allo stile, fai clic su Stile pulsante nell'angolo in basso a destra, per aprire il Regole pane:

Lo so, all'inizio è spaventoso. Ma qui è dove vedi le diverse regole CSS che influenzano l'elemento che hai selezionato, ed è qui che puoi apportare le tue modifiche temporanee e vedere il loro impatto sulla pagina in tempo reale, senza ricaricarla. Ma cosa dovresti cambiare? Clicca il Proprietà pulsante e deselezionare Solo stili utente :

Qui puoi vedere un elenco completo di Tutti Regole CSS. Puoi scorrere l'elenco fino a trovare una regola che abbia senso per ciò di cui hai bisogno (dimensione del carattere nel nostro caso) e persino fare clic sul punto interrogativo accanto per aprire una pagina di spiegazione. Quindi, ora sappiamo di voler modificare la proprietà font-size per tutti gli elementi div che hanno una classe di ' gs ' (scritto in stenografia come div.gs ).

L'unica domanda che rimane è quale vogliamo che sia il suo valore. Per questo, torniamo al riquadro Regole e iniziamo a giocare:

40 pixel possono essere un po' folli, ma rende l'idea generale. Gioca con questo e sentiti libero di aggiungere qualsiasi altra proprietà, finché non ottieni l'aspetto che stavi cercando. Assicurati di non chiudere la pagina, perché le tue modifiche lo sono non salvato ovunque.

Salvare il tuo nuovo stile

Una volta che questa parte del sito avrà l'aspetto che desideri, è il momento di salvarla. Clicca il Elegante icona nella barra dei componenti aggiuntivi e seleziona Scrivi nuovo stile . Stylish vorrebbe quindi sapere su quali pagine dovrebbe applicare il nuovo stile - nel nostro caso, scegli la seconda opzione, mail.google.com . Successivamente, vedrai questa finestra di dialogo:

L'ho già riempito. Ovviamente, ho scelto un nome e alcuni tag per lo stile. Ma le cose vere accadono all'interno del codice: la linea 3 era già lì – Stylish l'ha posizionata in modo che sappia su quali pagine si applica lo stile. Ma le righe 5-7 sono mie. Analizziamoli:

Riga 5: div.gs { – questa parte dovresti riconoscere. Questo è l'elemento che abbiamo deciso di modellare. La parentesi graffa di apertura significa che ora scriveremo alcune regole CSS. Riga 6: dimensione del carattere: 20px !importante; – questa è la regola che vogliamo cambiare (font-size), seguita dalla sua nuova definizione (20 pixel), e poi da una dichiarazione !important, il che significa che Firefox obbedirebbe a questa regola anche se un elemento più vicino al testo tenta di impostare la dimensione del carattere a qualcosa di diverso. Riga 7: } – chiusura della definizione dello stile.

Quindi, fai clic su Anteprima e ammira il tuo lavoro:

E infine, quando vedi che funziona, fai clic su Salva.

Questa non è una guida completa

So bene che per mantenere questo breve tutorial nei limiti di un singolo post, ho dovuto fare una serie di salti e salti. Se sei rimasto confuso lungo la strada, per favore accetta le mie scuse. Il CSS è complicato all'inizio, ma non è così complicato una volta che ci hai preso la mano e la personalizzazione dei siti web localmente rimane uno dei modi migliori per imparare.

Se sei stato confuso da qualcosa, per favore chiedimi di seguito e farò del mio meglio per aiutarti.

aggiorna la ram in mac book pro

Condividere Condividere Tweet E-mail 5 suggerimenti per potenziare le tue macchine Linux VirtualBox

Stanchi delle scarse prestazioni offerte dalle macchine virtuali? Ecco cosa dovresti fare per aumentare le prestazioni di VirtualBox.

Leggi Avanti Argomenti correlati

Browser
Sviluppo web
Strumenti per i Webmaster
Mozilla Firefox
Google Chrome
Web design

Circa l'autore Erez Zukerman(288 articoli pubblicati) Altro da Erez Zukerman

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti