Categoria ‘CSS’


Internet Explorer 6: eliminare il baco del doppio margine

Tra le varie simpatiche “interpretazioni” che Internet Explorer 6 riesce a fare con HTML/CSS, quella del “doppio margine” è sicuramente la più noiosa e frequente. In pratica (udite, udite…) il buon browser Microsoft riesce – misteriosamente – a raddoppiare i margini sugli elementi impostati in float! Dato ad esempio il seguente codice CSS, applicato ad un div con id box:

Continua...

Very short snippet: jQuery auto target blank link

Niente di nuovo, ma lo segno per ricordarmelo: come aggiungere un immagine a tutti i link che aprono una nuova pagina:

1
jQuery('a[@target=_blank]').addClass('external');

Continua...

Very short trick: come centrare elementi sulla pagina, anche su IE5

Non è che io me la prendo sempre con Internet Explorer, è solo che ogni dannata cosa positiva dello sviluppo Web (HTML e CSS) sembra non funzionare con il browser – ancora – più diffuso (un giorno qualcuno mi spiegherà il perchè). Un metodo assai comodo per posizionare un elemento al centro della finestra del browser è quello di sfrutture la proprietà auto dello stile margin; ad esempio ecco come posizionare un div al centro dello schermo:

Continua...

How I did it: come creare uno sticker-ribbon in 3 passi

Gli sticker (o ribbon) sono quelle immagini che vengono posizionate in alto a destra, o in alto a sinistra, ed hanno comunemente una forma angolare a fascia. Ne esistono di vari tipi, dalle semplici immagini statiche ai più spettacolari filmati Flash. A volte sono costruiti in modo tale da rimanere nella loro posizione anche quando scorriamo il contenuto della finestra del browser.

Continua...

Come sopportare IE6 e vivere felici

Trovo sempre un certo “malore” quando affronto l’argomento “compatibilità tra i browser”. Inoltre, e devo ancora capirne il vero motivo, tra tutti i browser che conosco quello più “antipatico” rimane sempre lui: Microsoft Internet Explorer 6! Purtroppo la release 6 di IE è ancora in circolazione e sono frequenti le segnalazioni di problemi nella visualizzazione delle pagine.

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: migliorare la lista dei commenti

Il template standard di WordPress (come altri) normalmente preve un layout alternato per la lista dei commenti. Nel template standard di esempio è impostata una classe css alt, secondo la logica:

1
2
3
4
5
// file comments.php
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
[...]
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';

Questo fa si che nel tag li $oddcomment sia impostato una volta a vuoto ("") e una volta a class="alt". Una modifica utile potrebbe essere quella di introdurre un ulteriore classe quando è l’autore del blog a commentare un post:

image

Io, ad esempio, ho usato il seguente codice nel file comments.php:

1
2
3
4
5
<?php
    $authcomment = ($comment->user_id==3)?' authcomment':'';
    $classcomment = ( empty( $classcomment ) ) ? ( ($authcomment=='')?' alt':'' ) : '';  
?>
<li class="<?=$classcomment?><?=$authcomment?>" id="comment-<?php comment_ID() ?>">

La riga $comment-&gt;user_id==3 può variare in base all’ID del vostro utente. Io, ad esempio, non uso l’amministratore per rispondere sul blog, ma ho un mio utente con ID=3. Normalmente l’ID dell’amministratore è 1, se usate questa utenza potete scrivere: $comment-&gt;user_id==1. In questo modo oltre ad avere l’alternanza di layout sui commenti lasciati dai visitatori, risulta immediatamente riconoscibile la risposta dell’autore del blog.

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...