Continuo il mio soliloquio
Una possibile soluzione al problema dell'effetto ombra con IE (senza usare filtri ovviamente) è quella di visualizzare due immagini sovrapposte di colore diverso.
E ci voleva tanto!!!
Partiamo da questo esempio:
Codice html:
<h1 class="ombreggiatura_css">
<span>OMBREGGIATURA CSS</span>
OMBREGGIATURA CSS
</h1>
e queste sono le classi del foglio di stile che creano l'effetto ombreggiatura:
.ombreggiatura_css{
/*la misura dei caratteri*/
font-size:30px;
/*il colore del ombreggiatura del testo*/
color:#CCCCCC;
/*necessario per poi posizionare l’elemento span in modo assoluto*/
position:relative;
}
.ombreggiatura_css span{
/*il colore del testo*/
color:#3399CC;
/*trasformazione da elemento di riga a elemento di blocco*/
display:block;
/*posizione assoluta in rapporto a l’elemento genitore*/
position:absolute;
/*spostamento di 2 px verso l’alto*/
top:-2px;
/*spostamento di 2 px verso la sinistra*/
left:-2px;
}
lo spostamento dell’elemento span di un paio di pixel serve per lasciare intravedere il testo di colore grigio (l’ombra) al di sotto.
I valori di spostamento top e left possono essere cambiati per cambiare l’effetto d’ombra.
Questo esempio però non è applicabile in un template per joomla perchè il codice generato dal componente com_content non è quello che ci server.
Quindi? Quindi dobbiamo necessariamente applicare l'override al componente com_content per generare il codice html come lo vogliamo noi:
Proviamo ad applicare questo esempio ai titoli degli articoli.
Override per i template di joomla 1.5(caming soon)
Override per i template di Joomla 1.61) creare le cartelle html/com_content/article all'interno della cartella del template
2) copiare il file default.php dalla cartella /components/com_content/viewes/article/tmpl e incollarlo nella cartella creata in precedenza
3) modificare il file default.php come segue
alla riga 26 troviamo il seguente blocco di codice:
<h2>
<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
<a href="<?php echo $this->item->readmore_link; ?>">
<?php echo $this->escape($this->item->title); ?></a>
<?php else : ?>
<?php echo $this->escape($this->item->title); ?>
<?php endif; ?>
</h2>
Questo serve a visualizzare il titolo di un articolo.
Modifichiamolo come segue:
<h2>
<span>
<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
<a href="<?php echo $this->item->readmore_link; ?>">
<?php echo $this->escape($this->item->title); ?></a>
<?php else : ?>
<?php echo $this->escape($this->item->title); ?>
<?php endif; ?>
</span>
<!--[if gte IE 6]>
<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
<a href="<?php echo $this->item->readmore_link; ?>">
<?php echo $this->escape($this->item->title); ?></a>
<?php else : ?>
<?php echo $this->escape($this->item->title); ?>
<?php endif; ?>
<![endif]-->
</h2>
Come vedete ho inserito il tag span e duplicato il codice di visualizzazione del titolo dell'articolo condizionandolo al browser IE 6 o successivi.
Adesso adattiamo l'esempio al foglio di stile per i template di Joomla 1.6
.item-page h2 {
font-family: 'nome_del_font';
font-size: 1.250em;
/* colore dell'ombra */
color:#999999;
position:relative;
}
.item-page h2 span{
/*il colore del testo*/
color:#87431e;
/*trasformazione da elemento di riga a elemento di blocco*/
display:block;
/*posizione assoluta in rapporto a l’elemento genitore*/
position:absolute;
/*spostamento di 2 px verso l’alto*/
top:-1px;
/*spostamento di 2 px verso la sinistra*/
left:-1px;
}
Il sistema funziona bene se i titoli degli articoli non sono dei link, ma credo che, in questo caso, la soluzione non sia difficile da trovare
N.B.
Non ho sotto mano una versione di Joomla 1.5 quindi questa sera, da casa, inserirò il codice per l'override per i template della 1.5
