Verticale beelden van Gravatar in WordPress weergeven

Onlangs hebben we je laten zien hoe je je opmerkingenlay-out vormgeeft en hoe je je reactieformulier moet stylen. Een van onze gebruikers stuurde ons een e-mail en vroeg: "Hoe heb je je gravatar-afbeeldingen gemaakt? Sla je gravatar-afbeeldingen lokaal op om ze rond te krijgen? "In dit artikel laten we je zien hoe je ronde-gravatar-afbeeldingen kunt weergeven in WordPress. We gebruiken de eigenschap border-radius van CSS3 om cirkelvormige gravatar-afbeeldingen te maken.

Het eerste wat u hoeft te doen is het thema style.css van uw thema bewerken. U kunt dit doen door een FTP-programma te gebruiken of door naar te gaan Uiterlijk »Editor in je WordPress-beheerder. Vervolgens wilt u de volgende code toevoegen in uw CSS-bestand:

 .avatar grensradius: 50%; -moz-border-radius: 50%; -webkit-grensradius: 50%;  

Dit zou moeten werken op de meeste WordPress-thema's. Als dit echter niet werkt voor uw thema, is er waarschijnlijk een plug-in of uw themafunctie die knoeit met de standaardklassen die voor gravatar worden gebruikt in WordPress. Om erachter te komen welke css-klasse gravatar-afbeeldingen gebruiken in uw thema, moet u een blogbericht openen met opmerkingen. Blader omlaag naar het gedeelte Opmerkingen en klik met de rechtermuisknop op de afbeelding van het beeld om Inspect Element te selecteren. Het zal je de broncode voor je gravatar laten zien, zoals dit:

Als het gravatar-beeld iets anders heeft dan avatar gebruik dat dan in plaats van .avatar in de bovenstaande css-code.

We hopen dat dit artikel u heeft geholpen bij het weergeven van ronde, gravatarische afbeeldingen op uw WordPress-blog. Laat het ons weten als je vragen of feedback hebt door hieronder een reactie achter te laten.