Круглые граватары в комментариях на WordPress

Если вы на своем блоге на WordPress используете плагин easygravatars, который выводит в комментах граватары пользователей, то можете легко сделать их круглыми. Выглядит необычно и стильно:

Круглые граватары в комментариях WordPress

Сделать это нам поможет все тот же CSS3.

Плагин выводит граватары с классом eg-image. Поэтому достаточно в файле стилей вашего шаблона добавить следующий набор правил:

.eg-image img {
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}

Радиус в 30 пикселей взят из рассчета, что граватары имеют размер 32х32. Если вы используете более крупные картинки, то радиус должен быть соответствующим.

Enjoy! :)

10.09.2012

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

4 комментария

  1. Николай
    http://pisotsky.ru
    04.12.2016

    А если фото с граватара, каким-то образом стало на поверх статьи, да еще и большим, на весь экран, что посоветуете сделать ? Спасибо !

  2. Игорь Квентор
    http://www.websovet.com/
    04.12.2016

    Николай, проблема в плагине wpDiscuz. Замените его обычными комментариями, или поставьте настоящий Disqus.

  3. Катерина В.

    12.12.2016

    Очень симпатично получается. А этот код можно и к другим картинкам применять?

  4. Игорь Квентор
    http://www.websovet.com/
    13.12.2016

    Катерина, конечно! Только нужно будет размеры border-radius подгонять по величине картинки. Чем она крупнее, тем большее значение следует выставлять, чтобы получалось круглое, а не скругленный квадрат.

Оставить комментарий: