Potrei definire per il momento concluso il lavoro sulla barra in fondo ai post: dopo l’inserimento del link per la segnalazione dei miei post su OKNotizie, oggi è la volta del collegamento al plugin ‘Random-Post‘.
Dato che il bottone in cima alla sidebar non sembrava riscuotere un gran successo, ho provato a replicarlo nella barra in fondo ai post. Inizialmente pensavo di aggiungere un nuovo bottone, ma la procedura si è rivelata più complicata del previsto.
Dato che, però, i due bottoni nella parte sinistra puntavano (seppur con sintassi diverse ‘#comments‘ e ‘#respond‘) ai commenti, ho deciso di eliminare il secondo a favore del bottone ‘random‘.
In pratica nei fogli index.php e single.php ho modificato (come mostrato nella puntata precedente) il collegamento (sia la keyword che l’indirizzo) e poi nel foglio di stile (style.css) ho modificato l’immagine della classe .postmetadata, associandone una appositamente creata con Photoshop (modificando il colore di quella presente in precedenza e aggiungendo il punto interrogativo).
Ora lo tengo monitorato e vedo se funziona meglio replicato in quella posizione.
Da quando sono passato al nuovo template a oggi è passato un po’ di tempo e tanti piccoli interventi di miglioramento. L’ultimo in ordine di tempo è quello sul link ‘Share it‘ che si trovava nella barra in fondo ad ogni post, per l’esattezza in fondo a destra. Ora è diventato un link per segnalare direttamente le notizie in OKNOtizie, il famoso aggregatore di news ‘user generated‘ in perfetto stile web 2.0.
Per farlo ho modificato una delle sottoclassi della classe postmetadata all’interno del CSS, nei file index.txt e single.txt che sovraintendono alla generazione dell’homepage e delle pagine con i singoli post. Per l’operazione ho utilizzato come sempre SmartFTP, usando il comando edit: in questo modo editando e salvando i file vengono caricati direttamente sul server online (occhio quindi che qualsiasi cambiamento dopo il SAVE va online!!).
Qui sotto vi metto in un’immagine la modifica che ho effettuato ne codice del tema:
Nella mia cronaca dell’evoluzione del Falsomagro da un template da 800px a un tema a tre colonne largo 1024 pixel affronto oggi l’argomento sfondo. La scelta attuale è caduta su un colore uniforme, ma la mia ricerca si è soffermata anche su altri tipi di background.
Ad esempio trovo molto carini quelli che si possono creare online con Stripe Generator 2.0, che permette di generare, free e online, degli sfondi a strisce, con effetti anche carini e molti colori. Quella qui di fianco è un esempio di quello che si può creare. Questa immagine con il comando ‘repeat-x e repeat-y‘ va poi a riempire tutto lo spazio dello sfondo.
Queste immagini può inoltre essere utilizzata per svariati impieghi, dipende dalla vostra fantasia!
Prosegue la cronaca del passaggio del Falsomagro al tema a tre colonne, dopo le puntate I e II. Oggi vi parlo della barra in basso a ogni post, mentre lo sfondo del titolo di ogni post lo rimando alla prossima puntata, in quanto è ancora in fase di ottimizzazione.
Per un sacco di tempo la barra è rimasta del colore originale dell’iPhone Theme, ossia nera con effetto smusso. Mi sono poi deciso a cambiare l’immagine che la costituisce (metadata-bg.png) facendola virare al verde, per amalgamarla agli altri elementi del template. Come già descritto nei post precedenti ho utilizzato la funzione regola colore di Photoshop Elements 6 per questa operazione.
Una volta messa l’immagine nel database online sul server via FTP scopro che le immagini relative agli elementi della barra (Comments, Post Comment, Share) non sono semplici immagini in trasparenza, ma dei veri e prori tasselli con lo stesso colore di sfondo della barra.
Sempre con Photoshop, utilizzando la gomma, campionando il colore di fondo della barra e con qualche tocco finale di sfumino, ho cambiato lo sfondo alle tre piccole immagini, che ora appaiono come se fossero trasparenti sulla barra. In un altro caso ho eliminato lo sfondo nero e messo quello trasparente.
Come sempre ho prima salvato gli originali e poi caricato sul server le nuove png con il nome di quelle vecchie, in modo che il motore di pubblicazione le trovi senza sforzo. Altrimenti, se avessi optato per un altro nome, avrei dovuto sostituire quello originale nel fogli di stile (style.css).
Gli esperimenti sono sempre in corso, per personalizzare il Falsomagro a partire dal tema wordpress ‘Iphone Theme‘. Ho appena messo a posto il campo dei FEED, uno degli elementi più carini, che mi aveva portato a optare proprio per quel tema.
Primo passo: modificare l’immagine di sfondo con Photoshop Elements 6 (io ho quello..), utilizzando come nel caso dei divisori la funzione regola colore e cambiando la tonalità dal nero all’attuale verde. dare un po’ più di tridimensionalità all’immagine con lo strumento gradiente. Dare un po’ più di dinamicità schiarendone una porzione, utilizzando una selezione ellittica e lo strumento gradiente. L’immagine va poi caricata nell’apposita directory sul server (ricordate sempre di salvare l’originale da qualche parte).
Se si cambia nome all’immagine, per far caricare quella giusta al motore, è sufficiente ritoccare il foglio di stile (style.css) alla voce #feeds.
Nel caso del tema in esame invece per modificare l’indirizzo dei feed e la scritta che accompagna il bottone è necessario aprire il file sidebar.php e modificare quello, utilizzando l’editor di testi. Si va ad inserire l’indirizzo dei propri feed nella voce apposita ( <div id=”feeds”> ), assieme al testo che volete che appaia nel bottone.
Il gioco è fatto.
Nel frattempo sto lavorando sull’intestazione dei post, per inserire l’immagine che faceva da header nel vecchio falsomagro.
Come avete potuto notare alla fine il tema nuovo l’ho scelto e installato. E subito personalizzato nella grafica e nei colori, come potete vedere analizzando la versione originale. Dal grigio e nero con richiami all’iPhone è diventato un tema più verde, anche in linea con i trend ecologisti che popolano il web 2.0.
La prima operazione è stato cambiare lo sfondo di pagina e testata. Nel primo caso era un semplice colore si sfondo, nel secondo caso si è trattato invece di modificare l’immagine gif che ripetuta con il comando ‘repeat-x‘ (quindi nel solo senso orizzonatale, trattandosi di un barretta verticale) andava a formare il background. Operazione che ho condotto usando il comando ‘Regola colore’ in Photoshop Elements 6.0. Aumentando il verde, schiarendo e togliendo rosso e blu ho ottenuto la tonalità che più mi piaceva. Ho poi caricato sul server che ospita il sito, nell’apposita cartella del tema, il file usando un client ftp, per l’esattezza SmartFTP. Un consiglio, prima salvate la versione originale da qualche parte o lasciatela nella directory rinominata (magari immagine-original) per poterla avere sempre a disposizione in caso di errori o ripensamenti.
Nella prossima puntata vi parlo dell’immagine di intestazione e dei diversi divisori.
Temporaneamente chiuso, non preoccupatevi! Il mio Microsoft Windows Vista ha deciso di dare più problemi che altro (non mi riconosceva neanche più le USB…) e quindi ho dovuto optare per l’estremo gesto..
Tranquilli, il tutorial sulla costruzione di icone web 2.0 fai da te con Photoshop, a cui ho lavorato nel weekend è salvo e conto di finirlo nei prossimi giorni.
Nel frattempo mi sono sbizzarrito sul computer di casa, che monta Ubuntu, con GIMP. Il risultato è l’immagine 2.0 di apertura, che come sempre condivido con voi. Ecco qui i passi che ho seguito, non lo si può definire un tutorial, più che altro sembra una lista della spesa 
Continua a leggere »
Qualche bloggata fa ho messo online l’immagine (un microtutorial) su come costruirsi da soli le proprie icone web 2.0 a partire dal materiale offerto gratis da Axialis. Il sito propone un completo (a pagamento) set di basi per costruire le proprie icone, di cui l’archivio offerto in free download offre un assaggio.
Ma perché comprare delle basi per icone quando è possibile costruirle da soli con i programmi di grafica? Alla fine tra usare un set di basi in Photoshop e creare da zero un’icona lo sforzo in più è minimo, viva dunque il fai-da-te! Qui ho trovato un minitutorial che ho provato a testare. Qui sotto il risultato, un bottone ‘clicca qui‘ pensato in onore del mitico ‘Red Amici‘.
Come sempre il Falsomagro sperimenta e condivide, e dunque il file è scaricabile . A breve punto a mettere online il mini-tutorial su come ho agito per ottenere la mia icona web 2.0. Stay Tuned!
English: Why paying for getting web 2.0 icons? Do it yourself! Here you can find a brief tutorial about the building of your personal icon in Photoshop. The image you can find (and download) in the post it’s my first experiment following that tutorial.
Come i più attenti avranno notato il FalsoMagro ha cambiato logo, passando da una graffettina azzurra a un bubbolo più web 2.0. Ho utilizzato il set di basi per icone web 2.0 di cui vi ho parlato in uno degli scorsi post (qui il post e qui quello con il link per il download).
Come vi avevo promesso mi sono dato alla sperimentazione e ora condivido con voi i frutti del mio lavoro:
Nell’immagine qui sotto ho riassunto
Continua a leggere »
