Круглые граватары в комментариях на 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! :)

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

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

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

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

  1. Николай | 04.12.2016

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

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

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

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

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

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