Share
Ce veți creaÎn acest set de două tutoriale, creăm un cursor pentru a afișa postările dintr-un tip de post particularizat, astfel încât să creeze un efect de conversație între două difuzoare dintr-o imagine.
În partea anterioară, am înregistrat tipul postului, am creat glisoarele și le-am adăugat în antetul site-ului nostru. Acum trebuie să poziționăm textul și să adăugăm stilul.
Pentru a urmări, veți avea nevoie de:
Exemplul la care lucrez este un site din lumea reală pe care îl dezvolt pentru un client, care rulează o temă copilătoare a temei Responsive. Am creat un copil al temei Responsive și am adăugat un stil personalizat pentru acest lucru, precum și funcții în tema functions.php fişier. Puteți să adăugați acest lucru la propria temă sau să creați o temă copilătoare a unui Responsiv ca mine.
Iată ce arată acum site-ul:
Glisoarele sunt acolo, dar sunt în locul greșit și au nevoie de stil.
Deci, în acest tutorial, vom face următoarele:
Rețineți că pentru fiecare citat, tocmai am adăugat un titlu de post ca text care urmează să fie afișat. Dacă adăugați, de asemenea, conținut post, atunci acesta va fi afișat prea, așa că asigurați-vă că citatele dvs. au doar un titlu și nici un conținut.
Să adăugăm poziționarea pe glisoare pentru a le suprapune peste imagine.
Deschide tema copilului tău style.css fișier și adăugați aceasta:
.tutsplus-sliders poziție: relativă; max-lățime: 1000px; margine: 0 pixeli auto; .smooth_slider poziție: absolută;
Aceasta oferă div am creat pentru a ne menține poziția relativă a cursorilor, iar poziționarea absolută a poziționării absolute în cadrul acelui div. De asemenea, stabilește lățimea corectă pentru noi div așa că este centrat pe imagine.
Acum, glisierele sunt deasupra imaginii:
Problema este că ele sunt suprapuse peste ele și trebuie să fie alături de persoana relevantă. Să rezolvăm asta.
Pluginul Smooth Slider oferă fiecărui cursor un ID unic în marcaj. Deci, glisorul "Heide" are o identitate # smooth_slider_3 iar cursorul "Iain" are un ID # smooth_slider_4. Le putem direcționa pe acestea pentru a poziționa corect fiecare glisor.
Adăugați acest lucru în foaia dvs. de stil:
# smooth_slider_3 top: 70px; dreapta: 90px; text-aliniere: drept; lățime: 250px; # smooth_slider_4 top: 10px; stânga: 90px; lățime: 250px;
Va trebui să verificați ID-ul pe care pluginul l-a dat fiecăruia dintre glisoare, verificând marcajul de ieșire: acestea ar putea fi diferite de ale mele.
Acum, glisierele mele sunt în locul potrivit:
Arată mai bine. Acum, pentru a adăuga ceva stil.
Vreau să schimb fontul și să adaug ghilimele în jurul textului.
Mai întâi, să înregistrăm un font folosind Google Fonts. Du-te înapoi la tema ta functions.php fișier și adăugați aceasta:
Accentsconagua
funcția tutsplus_add_google_fonts () wp_register_style ('googleFonts', 'http://fonts.googleapis.com/css?family=Droid+Serif'); wp_enqueue_style ('googleFonts'); add_action ('wp_enqueue_scripts', 'tutsplus_add_google_fonts');Notă: în codul sursă există două fonturi enumerate pentru că am folosit un alt font Google altundeva în site, dar nu pentru glisoare.
Salvați fișierul de funcții și reveniți la foaia de stil. Adaugă asta:
.smooth_slider h2 font-size: 19px! important; font-family: 'Droid Serif', serif! important; culoare: # 666633 important! line-height: 26px! important;
A trebuit să adaug !important la fiecare linie, deoarece altfel nu suprascrie stilul adăugat de plugin. Dacă doriți, puteți să editați fonturile utilizând ecranul de setări: nu am făcut-o pentru că nu mă lasă să folosesc fontul Google.
Fontul nostru arată acum mult mai bine:
În cele din urmă, vreau să adaug câteva ghilimele în jurul fiecărui fragment de text, pentru a sublinia faptul că oamenii din imagine ar trebui să vorbească. Pentru a face asta, folosesc inainte de și după pseudo elemente.
În foaia dvs. de stil, adăugați aceasta:
.smooth_slider h2 :: înainte de conținut: quot; open-quote; .smooth_slider h2 :: după content: close-quote;
Aceasta ne va închide pe noi h2 elemente în ghilimele duble.
Notă: unele browsere mai vechi nu acceptă acest lucru, deoarece nu acceptă pseudo-elemente. Cu toate acestea, nu mă preocupă acest lucru, deoarece glisoarele nu sunt esențiale pentru conținut, iar numărul de utilizatori care utilizează aceste browsere este foarte mic acum.
Acum salvați foaia de stil și verificați site-ul:
Fantastic! Acum am textul meu în locul potrivit cu ghilimele din jurul lui. Clientul meu poate adăuga acum cât mai multe citate pe care le doresc, le atribuie glisoarelor corespunzătoare și conversația va continua.
Pentru că am folosit poziția absolută, poziția textului meu se va rupe pe ecrane mai mici; dimensiunile fontului ar trebui să fie atât de mici încât să facă textul necitit. Deci, voi adăuga o interogare media pentru a ascunde glisierele pe ecrane mai mici.
În primul rând, voi verifica punctul în care se rupe aspectul: are o lățime de aproximativ 900 de pixeli. Așadar, trebuie să adaug o interogare media pentru a viza ecrane mai mici de 900 px lățime.
În partea de jos a foii de stil, adăugați interogarea media:
Ecranul @media și (max-width: 900px) .tutsplus-sliders display: none;
Acum glisoarele dispar pe ecrane mai mici:
Dacă doriți, puteți adăuga stilul alternativ în interogarea dvs. media pentru ecrane de dimensiuni medii, făcând dimensiunea fontului un pic mai mică și poziționând textul pentru a se potrivi.
Folosirea cursorilor pentru text vă poate ajuta să adăugați efecte interesante în site-ul dvs.: aici am adăugat un efect de conversație care este suprapus peste o imagine a două persoane.
În acest set de două tutoriale, ați învățat cum să creați acest efect prin:
Ați putea folosi această tehnică pentru a crea text pop-up oriunde în paginile dvs. - creați-vă!
