Articoli con Tag ‘CSS’


Very short snippet: WordPress, separare le categorie in due colonne

Prendendo spunto da WordPress Hack #2 – Separare le categorie in colonne nella sidebar può tornare utile “spezzare” in due colonne la lista delle categorie di WordPress.

Continua...

Very short trick: versatilità delle classi CSS

I più esperti lo sapranno già, tuttavia mi viene spesso chiesto che differenza c’è tra class e id nei fogli di stile CSS. Una panoramica su alcune differenze e avvertenze è possibile trovarla in Classi e ID nei CSS, tuttavia una caratteristica utile, che distingue class da id, è la possibilità di usare classi multiple.

Continua...

jQuery: bordi rotondi sulle immagini per sovrapposizione

A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del “disastro” prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere “effetti” (effetti che esonerano dall’HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc…) con patch sui fogli di stili, particolari trucchi con l’uso di div innestati, librerie Javascript, uso delle canvas, etc…
A titolo puramente didattico vorrei illustrare un’ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:

Demo e sorgenti

Continua...

WordPress: come creare passo passo un proprio login

In questo tutorial vedremo come creare una procedura di Login personale, utilizzando anche funzionalità Ajax tramite jQuery. Ci sono vari metodi per personalizzare il login di WordPress, ad esempio tramite l’uso di hook e filtri (add_action(), add_filter()). Noi qui useremo una procedura più a basso livello, anche se ci interfacceremo comunque al Kernel di WordPress. Inoltre faremo in modo di convalidare un utente tramite la dupla email/password.

Perchè realizzare un proprio login?

  • In alcuni contesti può ritornare uitle avere il massimo controllo sulla pagina di login, per proporre un layout personalizzato ai nostri utenti registrati. Inoltre si può arricchire la pagina con informazioni utili, dal un logo al classico “Password dimenticata?”
  • Per permettere l’accesso tramite l’email (come nell’esempio qui trattato) al posto dello user_login standard di WordPress
  • Per avere la possibilità di inserire un pannello di login nella sidebar del nostro Blog
  • E infine, per avere uno scheletro – ed un’idea – per un ottimo Plugin :D

Ambiente

Nel nostro esempio/tutorial lavoreremo sulla root di WordPress all’interno di una cartella mylogin. Creiamo due file php all’interno di questa cartella: index.php e logon.php. Il primo conterrà l’interfaccia del nostro login, con tutte le funzioni Javascript/jQuery che ci servono. Il secondo file, logon.php, conterrà il codice per la validazione dell’utente. Creiamo poi una cartella css e dentro questa un file layout.css e una cartella images. All’interno della cartella images inseriremo un classico Ajax loader: createlo online su AjaxLoad.info. Alla fine dovreste avere:

  • mylogin
  • index.php
  • logon.php
  • css
  • layout.css
  • images
  • ajax-loader.gif

Continua...

WordPress: modifcare AdminBigWidth per gli sviluppatori

AdminBigWidth è un Plugin per WordPress in grado di impostare l’area di lavoro dell’amministrazione a tutto schermo. È un plugin davvero semplice e banale, infatti il suo codice non fa altro che modificare la classe CSS .wrap:

1
2
3
4
function AdminBigWidth () {
    echo '<style type="text/css">.wrap{max-width:none}</style>';
}
add_action('admin_head','AdminBigWidth');

Per chi come me usa l’editor di WordPress in modalità HTML potrebbe risultare utile impostare dei caratteri a spaziatura fissa, come il Courier, invece del font proposto di default. In questo modo, almeno per gli sviluppatori, risulta più facile allineare codici sorgenti. Per fare questo basta aggiungere, sullo stile di AdminBigWidth, una nuova impostazione CSS che si rifletta sull’editor quando è in modalità HTML. Si potrebbe scrivere un Plugin (di due righe) per fare questo, tuttavia è meglio sfruttare proprio il codice di AdminBigWidth, così da evitare un ulteriore carico dovuto all’ennesimo Plugin:

1
2
3
4
function AdminBigWidth () {
  echo '<style type="text/css">.wrap{max-width:none}#editorcontainer #content{font-family:"Courier New", Courier, monospace}</style>';
}
add_action('admin_head','AdminBigWidth');

Continua...

jQuery: animate backgroundColor

Non ho capito bene se è un bug o una cosa voluta, comunque sia rimane il fatto che il metodo animate() di jQuery non funziona con alcuni attributi CSS, tra cui background-color (che nella versione camelize è backgroundColor). Ad esempio il seguente codice non produce nessun effetto:

1
2
3
4
5
<style type="text/css">
div#box { background-color: #eee; width:100px; height:100px }
</style>
<!-- .... -->
<div id="box"></div>
1
$('div#box').animate( {backgroundColor: "#f90"} );

Per risolvere il problema è necessario installare un’estensione: jQuery Color Animations. Questa permette di eseguire “animazioni” sull’attributo backgroundColor e non solo:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

Continua...

Creare un pipe separatore tramite CSS

Capita spesso di vedere una serie di link distribuiti orizzontalmente separati dal carattere pipe “|”, il simbolo grafico dell’asticella verticale. Inoltre, se è presente una buona stesura HTML, ci si accorge che questa serie di link – apparentmente orizzontali – altro non sono che liste puntate UL o OL. Ne deriva che invece di scrivere:

1
2
3
<p>
    <a href="#1">Link 1</a> | <a href="#2">Link 2</a> | <a href="#n">Link n</a>
</p>

Sarebbe meglio usare:

1
2
3
4
5
<ul>
    <li><a href="#1">Link 1</a></li>
    <li><a href="#2">Link 2</a></li>
    <li><a href="#n">Link n</a></li>
</ul>

Continua...

Safari, eliminare il blue border sui campi input

Safari, il browser Apple disponibile anche per Windows, produce un bordo blu (blue border) quando si clicca all’interno di un campo input. Se in alcuni casi può risultare piacevole, in altri diventa davvero fastidioso! Per eliminarlo basta inserire nel nostro foglio di stile:

1
2
/* ____________________________ remove blue border */
input { outline: 0 none }

O, in alternativa, direttamente come attributo nel tag input:

1
<input style="outline: 0 none" ... />

Continua...

Tecniche di Text Replacement in HTML/CSS

Il modo corretto di inserire titoli in grafica in una pagina Web è quello per sostituizione tramite i fogli di stile (vedi Progressive Enhancement in Accessibilità e Usabilità: unobtrusive Javascript). Questa tecnica permette di rendere accessibile il contenuto del sito a prescindere dalla visualizzazione grafica imposta dai fogli di stili. Inoltre, crawler e spider, avranno una lettura corretta dell’HTML ignorando la sostituzione grafica offerta all’utente finale. Inserire direttamente un’immagine (TAG img), infatti, rende il testo del titolo inaccessibili ai normali lettori ASCII (crawler, spider, blog plugin, screen-reader, etc…).

Continua...

Inserire del testo con i CSS: IE7, un pessimo affare

Ancora una volta, quando mi trovo a scrivere riguardo le capacità dei fogli di stile, sono costretto a porre in disparte Microsoft Internet Explorer! Con i CSS2 è stata introdotta una caratteristica davvero interessante, la proprietà content, usata in congiunzione con gli pseudo-elementi before e after. Tramite questo “stile” è possibile alterare il contenuto di un sito agendo esclusivamente sul file CSS. Ad esempio se scriviamo:

1
li:before { content: ">>" }

Un elenco puntato (UL, LI) avrà ogni elemento preceduto dai caratteri “>>”! Qualsiasi elemento, ovviamente, può essere trattato in questo modo:

1
<p>Posso inserire caratteri con i <span>fogli di stile</span></p>
1
p span:before { content: "-->" }

La versatilità di questo elemento non finisce qui! È infatti possibile utilizzare altri parametri oltre al semplice (ma utilissimo) testo. L’elemento content, infatti, permette anche valori speciali o url:

1
2
3
p:before { content: url(images/quote.gif) }
p:after { content: close-quote }
p:before { content: url(waves/sound.wav) }

Per i dettagli sull’implementazione fare riferimento direttamente a W3C – peccato non lo faccia anche Microsoft!

Continua...



Stop SOPA