Archives For CSS

×

Pillole

Le pillole sono articoli di veloce lettura dedicati a notizie, script o qualsiasi altra cosa possa essere "divorata e messa in pratica" con poco. Uno spazio del blog riservato ai post "a bruciapelo"!

Che in pratica è già la risposta conclusiva di un articolo che vuole essere estremamente leggero per tutti coloro che –forse– si sono potuti permettere il lusso di godersi un ponte molto lungo (qualcuno era in ferie dal 23 aprile, e non sono io, maledizione!), le trasmissioni vere e proprie (quelle più pallose perché più lunghe da leggere, me ne rendo conto) ricominceranno da domani. Bando alle ciance: cos’è ATOM? L’editor di testo avanzato che può davvero colmare la grave lacuna lasciata da Notepad++ sui sistemi macOS.

L'alternativa a Notepad++ su macOS è ATOM

Completo, personalizzabile, con una vasta documentazione a supporto dell’utilizzatore. ATOM è quel progetto che mancava quando anni fa cercavo una reale alternativa al mio amato Notepad++ rifugiandomi in progetti come TextWrangler (poi BBEdit) con la stessa felicità di un bambino che deve mangiare i broccoli. No dico, i broccoli, hai capito di che sto parlando? Del non-plus-ultra dello “no, grazie“.

ATOM è la risposta che cercavo su macOS, ma è in grado di accontentare ogni palato essendo stato pensato e progettato per ogni Sistema Operativo. Nato in casa GitHub ascoltando gli sviluppatori (e non solo) nell’ormai quasi lontano 2014, è arrivato oggi a quella condizione di robustezza e affidabilità che può permettersi di avere a che fare un po’ con tutti, esperti e non. Il fatto di essere realizzato su base Chromium (insieme poi a CoffeeScript, JavaScript, CSS, C++ e TypeScript) ne permette l’estrema flessibilità e personalizzazione (anche sotto al cofano motore), i pacchetti disponibili sono ormai abbondanti (così come i temi, anche se a quelli non do peso) e possono fare quasi qualsiasi cosa.

ATOM è parte di una lista che ho usato diversi mesi fa ormai per cambiare editor di testo (mi ero ridotto a virtualizzare Notepad++ passando da VMware Fusion, giusto per rendere l’idea) e che trovi qui: webeeky.com/alternatives-of-notepad-mac-os (una lettura in più non può fare mai male). Altra lettura che ti consiglio (una delle prime portate a casa dal sottoscritto) è anche quella relativa agli shortcut da tastiera, arma per me fondamentale per evitare di usare quanto più possibile il mouse: blog.bugsnag.com/atom-editor-cheat-sheet.

La mia scelta l’ho ormai fatta, ora tocca a te dirmi se sei diventato anche tu utilizzatore ATOM oppure se vuoi dire la tua in merito e segnalare un diverso programma per chi sviluppa (a livello amatoriale e non) o comunque chi necessita di un editor più avanzato del semplice TextEdit sul Sistema Operativo di Cupertino.

Condividi l'articolo con i tuoi contatti:

Lo so, ti mancano le tue 150 estensioni, i 30 temi dai quali mai avresti voluto essere separato e chissà quanta altra roba presente sulla versione precedente di Firefox. Mozilla fa schifo, Mozilla ci ha traditi e altre frasi fatte. Ora che abbiamo lasciato ben 30 parole (circa) agli inutili sfoghi, prendiamo atto delle novità e delle relative limitazioni che in futuro certamente saranno meno limitanti (io continuo a dire che questo profondo restyling di Firefox è qualcosa di splendido rispetto agli ultimi anni passati insieme a questo browser, ma è chiaramente un parere soggettivo), parliamo di modifiche di base molto in voga tra le discussioni degli ultimi giorni sul forum.

Oggi ti propongo qualche rapido riferimento che ti permetterà di ritoccare lo sfondo di una nuova scheda in Firefox (volendo anche della home page principale), così come ulteriori modifiche che è possibile eseguire tramite userChrome.css o userContent.css, con relativo progetto GitHub (e sito web) per chi ama modificare il proprio browser.

Firefox 57: modifica dell'aspetto (di base)

Prima di cominciare, un consiglio spassionato. Sto per indicarti alcune modifiche che andrai a fare all’interno del tuo profilo, posso suggerirti di effettuare prima un backup dei dati? Trovi tutto quello che c’è da sapere qui: support.mozilla.org/it/kb/Effettuare%20il%20backup%20dei%20dati%20personali

Possiamo dare inizio alle danze.

about:newtab

Gioie e dolori di una scheda che evidentemente non è simpatica poi a molte persone. Un po’ forse troppo minimalista, difficilmente (anzi, per il momento affatto) personalizzabile tramite componenti aggiuntivi, nasce da un’idea di base Mozilla e ha scatenato un putiferio tra tutti coloro che proprio non sopportano di avere qualcosa che non può essere plasmata secondo una logica soggettiva.

Le alternative sono due: tornare a un qualcosa di più sobrio e generico (la vecchia pagina principale di Firefox con il logo e la casella di ricerca in mezzo), oppure ritoccare manualmente quanto si ha a disposizione, magari con uno sfondo che possa essere facilmente cambiato di tanto in tanto. Io ho scelto la seconda opzione (un esempio è qui di seguito, nell’immagine catturata da una mia installazione stabile di Quantum):

modifica aspetto firefox 57

Tornare al passato,

Se ciò che vuoi è proprio quella scheda con casella di ricerca in centro, è cosa assai facile. Entra in about:config e cerca le chiavi browser.newtabpage.activity-stream.aboutHome.enabled e browser.newtabpage.activity-stream.enabled, portando entrambe a false (doppio clic su ciascuna quando le trovi impostate a true).

Il risultato? Questo (se non funziona immediatamente, riavvia il browser):

Firefox 57: modifica dell'aspetto (di base) 1

o giocare con il presente?

Hai scelto la pillola rossa? Bene, sono contento e ti porto subito al dunque. Supponendo che tu stia utilizzando il tema chiaro di Firefox, uno sfondo che permetta alla nuova scheda di continuare a darti una rapida panoramica di siti web visitati e “pinnati” dovrà avere un paio di caratteristiche chiave: essere anch’esso tendente verso colori chiari (che non creino contrasti sbagliati con il testo) e che –se possibile– vada a occupare la parte sinistra (o destra, in base alle modifiche CSS) rispetto ai contenuti.

Ti mostro il mio risultato (modificando il medesimo Firefox 57 Quantum di laboratorio che ho sul Mac, il tutto resta valido anche per Windows):

Firefox 57: modifica dell'aspetto (di base) 2

Il trucco? Sta nello userContent.css, un file che dovrà trovarsi nella cartella “chrome” (creata appositamente, da zero) all’interno del tuo profilo di Firefox.

Tutto nasce da un tanto banale quanto fantastico suggerimento nato nella community Reddit:

Please add addons.mozilla.org/firefox/newtabpages section like themes from firefox

Riepilogo quello che dovrai fare:

  • scegli uno sfondo che ti piaccia. Una delle fonti che utilizzo dalla notte dei tempi è Unsplash.com. Un esempio? unsplash.com/photos/b18TRXc8UPQ. È solo uno dei migliaia di sfondi che puoi trovare, devi solo capire quello che potrebbe fare al caso tuo e del tuo Firefox. Scaricalo sul tuo PC e inseriscilo nella cartella “chrome” contenuta a sua volta nella cartella del tuo profilo in uso. Se non sai di cosa sto parlando, dai un’occhiata qui.
  • Dai un nome decisamente più corto e semplice al file appena salvato. Nel mio caso, lo sfondo della tazza di caffellatte e relativi dolci è stata rinominata in coffee.jpg, giusto per rendere l’idea.
  • Con un editor di testo (io consiglio sempre Notepad++), crea un nuovo file all’interno del quale inserirai questo codice:
  • Noterai tu stesso che all’interno del codice CSS si trova il nome dell’immagine (coffee.jpg). Dovrai modificare quello e assicurarti che corrisponda al nome del tuo file. Una volta fatto, salva il file con il nome userContent.css (assicurati che la C di Content sia in maiuscolo, e che l’estensione del file sia realmente .css e non .css.txt!). A questo punto, sposta quel file all’interno della cartella chrome, dove hai già posizionato lo sfondo che tu hai scelto.
  • Riavvia il browser e goditi il risultato.

Inutile dire che le modifiche operabili via CSS sono molte, e che potrai operare in completa autonomia sperimentando posizionamenti differenti rispetto a quello suggerito. Altra piccola nota è quella relativa alla home page (il codice sopra modifica solo l’aspetto di una nuova scheda, quella che apri con un CTRL + T su Windows, per capirci), che potrà essere modificata alla stessa maniera, semplicemente duplicando il codice sopra riportato (sempre utilizzando lo stesso file, ovviamente) e andando a modificare (nel duplicato) il @-moz-document url(about:newtab) con @-moz-document url(about:home), il resto potrà rimanere invariato (o magari puoi pensare di cambiare sfondo per la home page, differenziandolo da quello della nuova scheda).

Un esempio di file userContent.css che integri entrambe le modifiche, potrebbe essere questo:

Interfaccia principale

Altro tasto evidentemente delicato, perché ho scoperto che in tantissimi utilizzavano componenti aggiuntivi che andavano a modificare profondamente l’aspetto del browser, riportandolo ulteriormente indietro nel tempo e mostrando icone diverse da quelle scelte da Mozilla, così come posizioni di tasti differenti rispetto allo standard. È un altro grande argomento di discussione del forum, alcuni dei riferimenti che puoi consultare li trovi qui:

Ciò che voglio segnalarti è una nuova risorsa, che basa se stessa sull’utilizzo dello userChrome.css, ciò che ti permetterà di modificare parte di posizionamenti e aspetto grafico del nuovo Quantum. All’indirizzo userchrome.org/what-is-userchrome-css.html troverai infatti diverse risorse e codici già pronti, che integrati all’interno di un file userChrome.css (da salvare sempre nella cartella chrome di cui ti ho parlato prima, nda), ti permetteranno di fare l’occhiolino ad alcune delle modifiche proposte in passato da gloriosi componenti aggiuntivi di cui oggi si sente la mancanza.

Uno tra tanti, potrebbe essere quel tocco di colore da dare alle icone e alle cartelle contenute nei propri segnalibri (userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder):

Firefox 57: modifica dell'aspetto (di base) 3

Oppure lo spostamento delle schede aperte da mettere sotto alla barra dell’URL (userchrome.org/what-is-userchrome-css.html#movetabbar):

Firefox 57: modifica dell'aspetto (di base) 4

Sono solo due dei possibili esempi di personalizzazione dell’interfaccia. Troverai codici già pronti e materiale da utilizzare presso diverse fonti (qui alcuni esempi), ma sono proprio le discussioni e le richieste nel forum ad alimentare una continua ricerca e proposta di “novità nostalgiche“, è solo questione di feeling con quello che –ribadisco– è “il miglior Firefox di sempre“, un po’ a voler fare il verso alla scuola Apple.

Buon divertimento :-)

Condividi l'articolo con i tuoi contatti:
×

Pillole

Le pillole sono articoli di veloce lettura dedicati a notizie, script o qualsiasi altra cosa possa essere "divorata e messa in pratica" con poco. Uno spazio del blog riservato ai post "a bruciapelo"!

Velocissima pillola del tardo sabato mattina, dedicata a una modifica in Firefox che mi è capitato di dover mettere in produzione su richiesta di un paio di persone che l’hanno richiesta. Utilizzando il browser quotidianamente, si sono accorti che la larghezza delle tab nella riga superiore non era più sufficiente, e volevano aumentarla secondo loro preferenza.

Disabilitare il controllo malware nel gestore download di Firefox

La cosa è chiaramente fattibile, e si può utilizzare una modifica allo userChrome così da evitare di dover installare un componente aggiuntivo ad-hoc. Se sai già cos’è il file userChrome.css puoi saltare al codice che ti servirà integrare, altrimenti dai un’occhiata qui:

userChrome.css in the chrome folder is a CSS file that can be used to change the way Mozilla applications’ interfaces look. This file does not exist in a new profile. You can create it manually. If you just want to move/remove/rename menus and menu items or change/disable shortcuts use the Menu Wizard add-on instead.

da: kb.mozillazine.org/index.php?title=UserChrome.css

Per fartela più semplice, questo file dovrà esistere nella cartella del tuo profilo, riproduci questi step:

  • apri il tuo Firefox, digita nella barra dell’URL about:profiles e premi invio.
  • Nella finestra che hai ora davanti, potrai visualizzare tutti i profili creati per il tuo browser (probabilmente solo uno). Fai clic sul pulsante “Apri cartella” in corrispondenza della “Cartella radice“.
  • Controlla e crea, se non esiste già, una nuova cartella chrome, quindi fai doppio clic su questa per entrarci.
  • Apri un editor di testo qualsiasi (io consiglio ovviamente Notepad++), copia e incolla il codice qui di seguito:
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
.tabbrowser-tabs *|tab {
 min-width: 85px !important
}
  • Salva il file nominandolo userChrome.css (assicurati che sia davvero .css, e non .css.txt, l’errore è sempre dietro l’angolo! ;-))
  • Chiudi e riapri Firefox per verificare che la modifica sia andata a buon fine.

Quel dettaglio nel min-width

Nel codice, noterai che la larghezza minima di una tab di Firefox è impostata a 85 pixel. Puoi ovviamente variare quel valore secondo la tua specifica esigenza o il tuo gusto. Posso solo suggerirti di non esagerare in ambo i versi. Una tab troppo larga (o troppo poco) diventa forse controproducente per una corretta organizzazione / visione di ciò che stai visitando.

In caso di problemi con questa modifica (e solo con questa, ocio), sfrutta pure l’area commenti, diversamente ti ricordo che il forum di Mozilla Italia è a tua totale disposizione :-)

Buon fine settimana!

Condividi l'articolo con i tuoi contatti:

Come forse molti di voi sapranno già Disqus è un sistema di commenti per siti web, blog e comunità online che si integra perfettamente con i social network, permettendo infatti il login con il proprio utente Twitter, Facebook e non solo. La gestione dello spam, gli strumenti di moderazione e analisi, le notifiche mail, il pannello commenti e molto altro ancora è centralizzato per offrire a utilizzatori e possessori dei siti il massimo della praticità. Il fatto che vengano poi supportati tutti i principali browser da PC ed in parte quelli mobile per smartphone e tablet è un valore aggiunto non da poco.

Disqus è abilitato anche su Gioxx’s Wall e Fuorigio.co e visto che non ero riuscito a trovare nulla di già pronto che mi soddisfacesse, ho voluto creare un widget per WordPress che vi permetta di mostrare nella vostra sidebar (o altrove) gli ultimi commenti pubblicati sul vostro sito web.

Il codice è stato interamente pubblicato sul Wiki ed è possibile scaricare una copia del file PHP da caricare poi sul proprio spazio web: public.gfsolone.com/wiki/doku.php?id=wordpress:disqusrecents.

Attivazione ed utilizzo

Potete scaricare il file del widget direttamente facendo clic qui, dovrete poi caricarlo nella cartella wp-content/plugins del vostro spazio web. Entrate nella Dashboard del vostro WordPress e attivatelo:

Troverete ora il widget tra quelli disponibili nell’area di personalizzazione del vostro tema grafico:

Potrete così portarlo all’interno di quelli da mostrare nella vostra barra laterale (o in qualsiasi altra posizione consenta il vostro tema). Potrete personalizzare il titolo del blocco, l’ID dal quale caricare i commenti (la prima parte dell’URL del vostro sistema commenti registrato su DISQUS) e la quantità di ultimi commenti da mostrare (personalmente ho scelto di tenerne 8, non esagerate, occupano spazio!).

Leggera personalizzazione tramite CSS

Su Fuorigio.co, Lorenzo ha operato una piccola modifica tramite CSS per migliorare l’aspetto del blocco commenti:

Questo il semplice codice utilizzato:

/* DISQUS */
#disqus_thread {
margin-top: 20px;
}

ul.dsq-widget-list {
margin: 0;
}

Inutile dire che tutto ciò che viene caricato può essere facilmente intercettato e modificato in tempo reale con il vostro file CSS, basterà avere un po’ di manualità per questo tipo di cose.

Tutto qui, il lavoro è già fatto ed è pronto chiavi in mano, come al solito se riscontrate problemi o avete domande l’area commenti è a vostra totale disposizione.

Buon lavoro!

Condividi l'articolo con i tuoi contatti:

Avevo letto di Efficient Related Posts qualche tempo fa su uno dei tanti blog che seguo via Google Reader, motivo per il quale mi ero deciso ad installarlo su questo WordPress, notando però l’impossibilità di farlo digerire al file CSS del tema, o almeno non nativamente. Ho deciso quindi di effettuare una piccola modifica all’interno del file PHP principale del plugin per includerlo in un DIV controllato –appunto– dal CSS custom di Standard Theme, installato su questo blog.

Il plugin va a posizionare un elenco puntato a fine di ciascun articolo e –una volta attivo– questo screenshot dovrebbe assomigliare molto a ciò che vi si presenterà davanti:

Efficient Related Posts – Visualizzazione senza modifiche al CSS

Questo è ciò che ho voluto fare io. Inutile dire che potrete modificare questo codice a vostro piacimento, magari rispettando altre modifiche operate sullo stesso WordPress precedentemente. Il CSS “intercetta” il DIV chiamato “boxcorrelati” e lo presenta così:

/* BOX ARTICOLI CORRELATI NEI POST */
.boxcorrelati {
background:transparent url(images/correlati.png) no-repeat scroll right top;
border:1px solid;
border-color:000000;
margin:8px 0;
padding: 4px 6px 2px;
font-family: Tahoma, sans-serif;
font-size: 1em;
width:550px;
min-height: 120px;
}

Per poter completare l’opera, occorrerà però andare a ritoccare il file “efficient-related-posts.php” che si trova nella cartella del plugin.

Alla riga 317 (faccio riferimento all’attuale versione 0.3.8) dovreste trovare:

$output = "<ul class='related_post'>{$output}</ul>";

seguita poi dalla 320 che riporta:

$output = "<h3 class='related_post_title'>{$settings['title']}</h3>{$output}";

Per poter caricare il DIV dichiarato nel file CSS, basterà modificare di poco le due stringhe, ottenendo quindi:

$output = "<ul class='related_post'>{$output}</ul></div>";

per la riga 317, seguita poi dalla 320 con:

$output = "<div class='boxcorrelati'><h3 class='related_post_title'>{$settings['title']}</h3>{$output}";

Salvate ora i file e caricateli nel vostro spazio FTP sostituendo quelli già presenti. Con un F5 sulla pagina dovreste riuscire a godervi il risultato, simile (seguendo i miei stessi passaggi) a questo scatto:

Efficient Related Posts – Visualizzazione con modifiche fatte al CSS

Buon lavoro :)

Condividi l'articolo con i tuoi contatti: