Hur man visar runda Gravatar-bilder pÄ WordPress

Finding css class used by gravatar icon

Nyligen visade vi dig hur du utformar din kommentarlayout och hur du utformar din kommentarformulĂ€r. En av vĂ„ra anvĂ€ndare mailade oss och frĂ„gade ”hur gjorde du dina gravatarbilder runda? Lagrar du gravatarbilder lokalt för att fĂ„ dem att vara runda? ” I den hĂ€r artikeln visar vi dig hur du visar runda gravatarbilder pĂ„ WordPress. Vi kommer att anvĂ€nda egenskapen border-radius för CSS3 för att skapa cirkulĂ€ra gravatarbilder.

Det första du behöver göra Àr att redigera temat style.css-fil. Du kan göra detta genom att anvÀnda ett FTP-program eller genom att gÄ till Utseende »Redaktör i din WordPress-administratör. DÀrefter vill du lÀgga till följande kod i din CSS-fil:


.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

Detta borde fungera pÄ de flesta WordPress-teman. Men om detta inte fungerar pÄ ditt tema, finns det antagligen nÄgot plugin eller att din temafunktion trasslar med standardklasserna som anvÀnds för gravatar i WordPress. För att ta reda pÄ vilka css-klass gravatarbilder som anvÀnds i ditt tema mÄste du öppna ett blogginlÀgg som har kommentarer. BlÀddra ner till kommentarsektionen och högerklicka pÄ gravatarbilden för att vÀlja Inspektera element. Det visar kÀllkoden för din gravatar, sÄ hÀr:

Om gravatarbilden har nÄgot annat Àn att anvÀnda det istÀllet för .avatar i ovanstÄende css-kod.

Vi hoppas att den hÀr artikeln hjÀlpte dig att visa runda gravatarbilder pÄ din WordPress-blogg. LÄt oss veta om du har nÄgra frÄgor eller feedback genom att lÀmna en kommentar nedan.