Afisarea butoanelor din mesaje doar la trecerea cursorului pe deasupra

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Afisarea butoanelor din mesaje doar la trecerea cursorului pe deasupra

Mesaj Scris de Cassius Dio la data de Joi 14 Feb - 21:07

Afisarea butoanelor din mesaje doar la trecerea cursorului pe deasupra

Cu ajutorul acestui tutorial veti putea realiza un truc foarte interesant pe forumurile dumneavoastra. Mai exact, cand veti trece cu cursorul deasupra unui mesaj, vor aparea si optiunile mesajului (editeaza, citeaza, sterge etc.). In mod normal insa (cand ati luat cursorul de pe mesaje), acestea nu vor aparea. Nu va faceti griji insa, codurile pe care urmeaza sa le adaugam vor crea un efect de tranzitie, astfel incat optiunile mesajelor sa nu apara "din senin".

Coduri de instalat:
phpBB2:
Cod:
.post:hover .post-options {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: .5;
}
.post .post-options:hover {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 1!important;
}
.post .post-options {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 0;
}

phpBB3:
Cod:
.postbody:hover .profile-icons {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: .5;
}
.postbody .profile-icons:hover {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 1!important;
}
.postbody .profile-icons {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 0;
}

PunBB:
Cod:
.post:hover .post-options {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: .5;
}
.post .post-options:hover {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 1!important;
}
.post .post-options {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 0;
}

Invision:
Cod:
.post:hover .posting-icons {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: .5;
}
.post .posting-icons:hover {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 1!important;
}
.post .posting-icons {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 0;
}

Unde se instaleaza:
Pentru a aplica efectul din tutorial, trebuie sa alegeti intai de toate codul potrivit pentru versiunea de forum pe care o folositi. Dupa ce l-ati ales, il copiati si mergeti catre:
Panou de Administrare Afisare Imagini si culori Culori Foaie de stil CSS.
Adaugati codul copiat in spatiul liber si salvati. Faceti click pe butonul Valideaza.

Tutorial scris de Mr.Young, tradus de SGSS

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Multumiri : 82
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum