Evaluare: 5/5
Așa că am decis să vă spun astăzi cum să creați cele mai multe link-uri către rețelele sociale de Joomla 3 site-ul, folosind doar câteva cunoștințe destul de superficială de HTML și CSS, lăsând codul de resurse din cele mai pure, și în îngrijirea paralel de reducere a sarcinii pe partea de server și atât de multe module și plug-in-uri .
Vom analiza modul de fixare a legăturilor către rețelele sociale din orice colț al paginii, făcându-le fixe și translucide. Și când treceți peste fiecare dintre legături, va deveni complet opac.
Pregătiți imagini pentru crearea propriilor legături către rețelele sociale
Creați o nouă poziție în șablonul site-ului Joomla 3
Apoi, am creat o nouă poziție în șablonul Joomla 3 utilizat. Pentru cei care nu știu cum să facă acest lucru, vă voi explica ceva mai mult. În interiorul directorului de șabloane utilizat în mod implicit pe site-ul dvs., trebuie mai întâi să deschideți fișierul INDEX.php și să adăugați următoarea linie:
De obicei, selectez un loc pentru acest lucru imediat după ultima poziție a modulului din șablon (de obicei este un "debug", care nu este în etichetele DIV.) În spatele meu mi-am pus poziția sub numele soc-seti.
După aceea, pentru a poziționa numele afișat atunci când vom crea un nou modul în Joomla, este necesar să se adauge o nouă poziție în templateDetails.xml fișierul nostru șablon:
De asemenea, îl adaug după toate elementele cu etichete POSITION.
Creați modulul Joomla pentru afișarea propriilor legături către rețelele sociale
Apoi, trebuie să ne aducem poziția pe site-ul în sine. Pentru a face acest lucru, vom crea un nou modul HTML în zona administratorului site-ului (sau chiar mai bine Flexy Custom Code, dacă această extensie este instalată).
În poziția pe care o alegem soc-seti, iar în codul HTML scriem ceva de genul:
Mai întâi, este creat un container comun DIV, în interiorul căruia toate legăturile de imagine vor fi în recipiente separate. La acest principiu DIV specificăm proprietățile CSS:
poziție: fixă; - poziționați modul fixat, fixat atunci când defilați.
top: 5px; - setați distanța din partea de sus a paginii (puteți, de asemenea, din partea de jos: partea de jos: 5px;);
dreapta: 10px; - setați distanța de la marginea dreaptă a paginii (puteți, de asemenea, din stânga: stânga: 5px;);
Deci, în timp ce containerul nostru virtual și invizibil este localizat în locul său - nemișcat în colțul din dreapta sus (bine, sau ceea ce alegeți)
Dacă în acest moment vom publica modulul și vom vedea cum arată, vom vedea că este deja destul de decent. Cu toate acestea, nu există nicio distanță între imaginile noastre - ele sunt ca și cum ar fi lipite împreună. Nu există, de asemenea, efect translucid, dispariția legăturii.
Pentru realizarea acestui lucru am încheiat fiecare imagine din containerul DIV, care a fost desemnat clasa soc-seti.
Adăugați stiluri la fișierul șablon CSS
Acum mergeți la fișierul SCC al șablonului nostru și adăugați următoarele rânduri:
Voi explica un pic. Parametrul este clar: ambele; - Permite fotografiilor să rămână unul peste celălalt. Dacă doriți să le aliniați orizontal, puteți înlocui acest parametru cu float: left;
Apare următoarea margine: 5px; - din partea de sus a fiecărei imagini există o indentare de 5 pixeli.
Opacitatea parametrilor: 0,7; Specifică transparența imaginii. Puteți utiliza un număr de la 0 la 1, în cazul în care unul este o imagine complet opacă.
În următoarea linie, setăm comportamentul elementelor noastre atunci când plasăm mouse-ul peste mouse. Pentru a face acest lucru, adăugați o pseudo-clasă la clasa soc-sety: hover, care este responsabil pentru decorarea elementului atunci când mouse-ul mouse-ului. aici indicăm doar că în acest caz imaginea ar trebui să devină complet opacă.
Prevăz că există mulți specialiști care vor începe să demonstreze că totul trebuie făcut într-un mod complet diferit și poate fi mult mai simplu. Deci, imediat răspund: aceasta este doar una dintre opțiunile posibile.
În special, nu am putut descrie clasele CSS în fișierul șablonului nostru, ci le plasăm direct în codul modulului nostru. În acest caz, codul trebuie adăugat la conținutul modulului:
Am facut-o in felul urmator:
soc-seticlear: ambele;
margin-top: 5px;
margin-dreapta: 5px;
opacitate: 0,5;
tranziție: toate 2 s;
-moz-tranziție: toate 2 s;
-o-tranziție: toate 2 s;
-webkit-transition: toate 2s;
>
.soc-seti: hoveropacitate: 1;
transformă: traduce (-15px, 0);
-webkit-transform: traduce (-15px, 0);
-moz-transform: traduce (-15px, 0);
-o-transform: traduce (-15px, 0);>
În acest cod, parametrii sunt stabiliți nu numai pentru clasa soc-seti, ci și pentru aceasta atunci când se deplasează mouse-ul (soc-seti: hover). În acest caz, selectorul de tranziție: tot 2s indică browserului că toate elementele de tranziție trebuie să aplice un efect de tranziție între două stări de 2 secunde.
Ceea ce se obține din toate acestea poate fi văzut pe site-ul meu.