Nyligen visade vi dig hur du stylar din kommentarlayout och hur du stylar ditt kommentarformulär. En av våra användare mejlade oss och frågade "hur gjorde ni era gravatar-bilder runda? Lagrar ni gravatar-bilder lokalt för att få dem att bli runda?" I den här artikeln visar vi dig hur du visar runda gravatar-bilder i WordPress. Vi kommer att använda CSS3:s border-radius-egenskap för att skapa cirkulära gravatar-bilder.
Först måste du redigera din themes style.css-fil. Du kan göra detta med ett FTP-program eller genom att gå till Utseende » Redigerare i din WordPress-admin. Lägg sedan till följande kod i din CSS-fil:
.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
Detta bör fungera på de flesta WordPress-teman. Men om detta inte fungerar på ditt tema, så är det förmodligen någon plugin eller din temafunktion som stör standardklasserna som används för gravatar i WordPress. För att ta reda på vilken CSS-klass gravatar-bilder använder i ditt tema, måste du öppna ett blogginlägg som har kommentarer. Skrolla ner till kommentarsavsnittet och högerklicka på gravatar-bilden för att välja Inspektera element. Det kommer att visa dig källkoden för din gravatar, så här:
Om gravatar-bilden har något annat än avatar, använd det istället för .avatar i CSS-koden ovan.
Vi hoppas att den här artikeln hjälpte dig att visa runda gravatar-bilder på din WordPress-blogg. Låt oss veta om du har några frågor eller feedback genom att lämna en kommentar nedan.
Rex
Mycket lägligt. Tack så mycket.
WPBeginner Support
You’re welcome
Admin
pujara
Hur lägger man automatiskt till en kommentarbild som i ditt kommentarsystem?
Nataly
hej, Det fungerade, tack, men beskrivningen verkar vara för hög. över bilden, vet du hur man får den att visas vid sidan av bilden?
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.
WPBeginner Support
Har du lagt till CSS i ditt temas stilmall?
Admin
ERFmama
Ja, det gjorde jag. Jag har Twenty Twelve-temat.
Finns det en specifik plats dit det måste gå? I style.css
Edit: Never mind it suddenly worked now!
Kan jag fråga hur man ändrar storleken på avatarerna, tack? Eller har du redan skrivit ner det någonstans?
Tack så mycket för detta!
Daniel
Det fungerade, tack
Chrissy
Fantastiskt! Precis vad jag letade efter! Tack, ni är bäst!
Jacky
TACK SÅ mycket för detta, spenderade timmar på att försöka uppnå. Du gav den mest raka lösningen!
Abdul Samad
Bro Tack för den här koden Jag är ny i WP och jag njuter verkligen av din blogg Man Tack för detta och alla handledningar....
Richie
Jag skulle skicka vidare det här tipset och provade det förstås först på en av mina webbplatser.
Fungerade som en charm Jag ändrade bara min CSS från px till % för gränsen moz och webkit.
Här blev det intressant.
Jag gick till en annan webbplats, gjorde samma justering och det fungerade inte. Efter lite huvudskakning kom jag ihåg att jag hade pluginet WP User Avatar installerat på webbplatsen där det fungerade och inte hade det installerat på webbplatsen där det inte fungerade.
Jag installerade pluginet och vips, det fungerar som en charm.
För båda webbplatserna använder jag ett anpassat tema byggt på Presswork-ramverket.
Slutsatsen är att jag fick det att fungera men bara med pluginet.
Några idéer?
Redaktionell personal
Det är möjligt att ditt tema inte använde CSS-klassen .avatar, och pluginet lade till den.
Admin
Richie
I’ll check it out. Thanks
Roselle Celina
Hej, tack för den här handledningen! Det fungerar utmärkt i Chrome och Firefox, men för Safari får jag samma problem: http://jsfiddle.net/2UT8v/2/
Thanks in advance for your help
Redaktionell personal
Det verkar som att kantbredden är där problemet verkar ligga i Safari.
Admin
RW
Jag håller med och jag använder bara IE cirka 4 % av tiden, men flera av mina kunder använder fortfarande 8.
Tack,
Bob
Martin
If somebody uses IE8 does not deserve for round image
RW
Bra tips. Observera att IE8 inte har inbyggt stöd för rundade hörn (border-radius). Du skulle behöva använda javascript, pie, etc... för detta men det är inte värt besväret. Lyckligtvis känner IE9 igen nuvarande standarder...
Tack.
Jim Burnett
Jag minns dagarna då vi försökte hålla IE6-stöd med i svängen. Nu är det IE 8 för rundade hörn. Lyckligtvis tar IE9 fart.
Återigen, FF 3.0 stöder ingen HTML 5. *ledsen min*
Coolt CSS-knep dock!