Pentru ca nu toate browserele stiu sa interpreteze proprietatea CSS text-shadow, trebuie sa facem un cod CSS separat pentru IE si celelalte browsere.

Incepem cu CSS-ul pentru Internet Explorer unde folosim filtrul Shadow, deoarece IE nu stie sa interpreteze text-shadow.

.umbra_ie {
 color:#000000;
 font-family:Verdana;
 font-weight:bold;
 font-size: 1em;
 height: 1em;
 filter: Shadow(Color=#ffaaaa,
 Direction=135,
 Strength=3);
}

Rezultatul codului de mai sus este:

Ne ocupam acum de Mozilla si celelalte browsere:

.umbra_mozilla {
 color:#000000;
 font-family:Verdana;
 font-weight:bold;
 font-size: 1em;
 height: 1em;
 text-shadow: 0.1em 0.1em 0.1em #ffaaaa;
}

Acum sa ne jucam putin cu umbrele pentru a obtine ceva mai frumos:

Codul CSS:

div {
 color:#CCCCCC;
 background:#D1D1D1;
 font-family:Verdana;
 font-weight:bold;
 font-size: 1em;
 padding:20px;
}
 
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}

DIV-ul care contine Heading 3:

<div>
<h3 class="a">Lorem ipsum dolor sit amet</h3>
<h3 class="b">In blandit dui vel augue mattis</h3>
</div>

Rezultatul este acesta:

sau

h3.c {
color:#000000;
text-shadow: -1px 0 #f8f8f8, 0 1px #f8f8f8,
             1px 0 #f8f8f8, 0 -1px #f8f8f8
}
 
h3.d {
text-shadow: -1px 0 black, 0 1px black,
             1px 0 black, 0 -1px black
}

<h3 class="c">Lorem ipsum dolor</h3>
<h3 class="d">Blandit dui vel augue</h3>

…care arata asa:

Fisierul html cu toate exemplele CSS.

Pluginul poate fi customizat prin intermediul paginii de administrare, unde ii putem schimba interfata .css, dar si viteza de fading sau la ce height minim sa apara.

Instalare

Descarcam arhiva pluginului de aici si plasam fisierele in directorul /wp-contents/plugins/.

In lista de pluginuri vom gasi item-ul “Smooth GoToTop”, care trebuie activat.

Administrare

Pentru adaptarea temei pluginului la blogul tau vom folosi pagina de administrare. Pluginul se va gasi in Settings > Smooth GoToTop.

Selectarea unei teme de culori pentru text si background se poate face prin apasarea label-urilor din dreptul campurilor Text sau Background. Pentru stabilirea pozitiei pe ecran si a distantei fata de margini se folosesc campurile Position si Padding.

Configurarea in modul avansat

Pentru a configura distanta minima dupa care sa apara butonul de GoToTop, deschidem fisierul /jquery.top.js si mergem la linia 32.

................
$(document).ready(function() {
 
                   $('#top-link').topLink({
 
                       min: 400, // inaltimea minima dupa care sa apara butonul de GoToTop
                       fadeSpeed: 500 // viteza de fading
 
                   });
....

Daca dorim sa schimbam dimensiunea fontului sau chiar fontul o putem face modificand cateva linii in fisierul /gototop.php, incepand cu linia 45.

#top-link   {
 
                   display:none;
                   position:fixed;
                   right:5px;
                   bottom:5px;
                   height:18px;
                   color:#000000;
                   font-family: arial;
                   font-size:11px;
                   font-weight:bold;
                   text-decoration:none;
                   background:#90FF00; padding:5px;
 
}

Descarca plugin

Pluginul poate fi vazut aici.

Astept comentarii si bug-uri….

Dupa cateva cautari si testari am ramas la Twitter Wordpress Sidebar Widget creat de Sarah Isaacson.

Pluginul este unul foarte simplist, care ofera exact facilitatile de care ai nevoie pentru a-ti afisa mesajele twitter pe blog.

Cam asa arata widget-ul in menu-ul de WP Admin:

Un lucru foarte bun cu acest widget este ca nu trebuiesc furnizate datele de login in contul de twitter. El se foloseste de search-ul furnizat de twitter pentru a cauta mesajele tale.

Din pacate widgetul are si cateva minusuri, cum ar fi:

- nu stie sa afiseze cod html introdus in campul “Text to display between tweet and timestamp”.

- daca mesajul din twitter este prea lung si depaseste in latime dimensiunea widgetului nu stie sa faca slice textului.

UPDATE:  Un alt widget care afiseaza mesajele de pe twitter direct pe blog poate fi gasit aici.

Prin respectiva pagina HTML era un alt tag care avea definit un z-index: 1 si position:relative.  Problema aparea in momentul in care setam un z-index:100 div-ului meu, dar nu ii setam si position. Pe Internet Explorer se afisa sub tag-ul care avea setata pozitia.

Deci…pentru a pacali bug-ul din IE, trebuie setat si position pentru tag-urile care au z-index.

UPDATE Daca aveti probleme cu afisarea unui menu drop-down peste un obiect flash trebuie sa setati wmode (opaque sau transparent) pentru obiectul flash. Desigur flash-ul il veti incarca prin intermediul javascript.