Recent, ți-am arătat cum să stilizezi aspectul comentariilor tale și cum să stilizezi formularul de comentarii. Unul dintre utilizatorii noștri ne-a trimis un email și ne-a întrebat „cum ai făcut imaginile gravatar rotunde? Stochezi imaginile gravatar local pentru a le face rotunde?” În acest articol, îți vom arăta cum să afișezi imagini gravatar rotunde în WordPress. Vom folosi proprietatea border-radius a CSS3 pentru a crea imagini gravatar circulare.
Primul lucru pe care trebuie să-l faci este să editezi fișierul style.css al temei tale. Poți face acest lucru folosind un program FTP sau accesând Aspect » Editor în administratorul tău WordPress. Apoi, vrei să adaugi următorul cod în fișierul CSS:
.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
Acest lucru ar trebui să funcționeze pe majoritatea temelor WordPress. Cu toate acestea, dacă acest lucru nu funcționează pe tema dvs., atunci probabil că un plugin sau funcția temei dvs. interferează cu clasele implicite utilizate pentru gravatar în WordPress. Pentru a afla ce clasă CSS folosesc imaginile gravatar în tema dvs., trebuie să deschideți o postare de blog care are comentarii. Derulați în jos la secțiunea de comentarii și faceți clic dreapta pe imaginea gravatar pentru a selecta Inspect Element. Acesta vă va arăta codul sursă pentru gravatarul dvs., astfel:
Dacă imaginea gravatar are altceva decât avatar, folosiți acel text în loc de .avatar în codul CSS de mai sus.
Sperăm că acest articol v-a ajutat să afișați imagini gravatar rotunde pe blogul dvs. WordPress. Anunțați-ne dacă aveți întrebări sau feedback lăsând un comentariu mai jos.
Rex
Foarte la timp. Vă mulțumesc mult.
Suport WPBeginner
You’re welcome
Admin
pujara
Cum să adaugi automat o imagine la comentariu ca în sistemul dvs. de comentarii?
Nataly
salut, A funcționat, mulțumesc, dar, descrierea pare prea sus. peste poză, știi cum să o faci să apară lângă poză?
Therese
I can’t make it work.
I can’t figure out where exactly to put it, nothing seams to change. I’ve looked at the source code and it’s got avatar just like the example source code.
Suport WPBeginner
Ai adăugat CSS-ul în foaia de stil a temei tale?
Admin
ERFmama
Da, am făcut-o. Am tema Twenty Twelve.
Există un loc anume unde trebuie să meargă? În style.css
Edit: Never mind it suddenly worked now!
Pot să întreb cum să schimb dimensiunea avatarurilor, vă rog? Sau ați scris deja asta undeva?
Mulțumesc mult pentru asta!
Daniel
A funcționat, mulțumesc
Chrissy
Fantastic! Exact ce căutam! Vă mulțumim, sunteți grozavi!
Jacky
MULȚUMESC mult pentru asta, am petrecut ore încercând să realizez. Ați oferit cea mai directă soluție!
Abdul Samad
Frate, mulțumesc pentru acest cod. Sunt nou în WP și mă bucur cu adevărat de blogul tău, omule. Mulțumesc pentru asta și pentru toate tutorialele....
Richie
Aveam de gând să transmit acest sfat și, desigur, l-am încercat mai întâi pe unul dintre site-urile mele.
A funcționat ca un campion. Pur și simplu am schimbat CSS-ul meu de la px la % pentru marginea moz și webkit.
Aici a devenit interesant.
Am mers pe un alt site, am făcut aceeași modificare și nu a funcționat. După puțină nedumerire, mi-am amintit că aveam pluginul WP User Avatar instalat pe site-ul pe care a funcționat și nu îl aveam instalat pe site-ul pe care nu a funcționat.
Am instalat pluginul și voilà, funcționează ca un campion.
Pentru ambele site-uri folosesc o temă personalizată construită pe framework-ul Presswork.
Concluzia este că am reușit să fac să funcționeze, dar numai cu plugin-ul.
Aveți idei?
Personal editorial
Este posibil ca tema ta să nu fi folosit clasa CSS .avatar, iar plugin-ul a adăugat-o.
Admin
Richie
I’ll check it out. Thanks
Roselle Celina
Salut, mulțumesc pentru acest tutorial! Funcționează excelent pe Chrome și Firefox, dar pentru Safari, am aceeași problemă: http://jsfiddle.net/2UT8v/2/
Thanks in advance for your help
Personal editorial
Se pare că lățimea marginii este problema în Safari.
Admin
RW
Sunt de acord și folosesc IE doar aproximativ 4% din timp, dar câțiva dintre clienții mei sunt încă pe versiunea 8.
Mulțumesc,
Bob
Martin
If somebody uses IE8 does not deserve for round image
RW
Sfaturi grozave. Vă rugăm să rețineți că IE8 nu redă nativ colțuri rotunjite (border-radius). Ați avea nevoie de javascript, pie, etc... pentru asta, dar nu merită efortul. Din fericire, IE9 recunoaște standardele actuale...
Mulțumesc.
Jim Burnett
Îmi amintesc zilele în care încercam să menținem suportul pentru IE6 în buclă. Acum este IE 8 pentru colțuri rotunjite. Din fericire, IE9 prinde din urmă.
Pe de altă parte, FF 3.0 nu suportă niciun HTML 5. *față tristă*
Truc CSS grozav totuși!