Современные тренды нередко приходится подхватывать всем владельцам веб-сайтов, ведь прогрессивный веб-портал должен соответствовать современным нормам, демонстрируя серьезный подход. Что ж, одним из таких трендов стали круглые аватарки и изображения.
Как бы там ни было, давайте посмотрим, что нужно сделать для того, чтобы аватарки стали круглыми. Для начала переходим в style.css и вносим следующие изменения:
.avatar img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
Бытует мнение, что все эти строки можно убрать и оставить только border-radius: 50%. Но лучше использовать весь код, так как в некоторых браузерах упрощение может не сработать.
Может случиться и так, что код не сработает в любом случае. Это уже зависит от темы, возможно в ней не используется класс avatar. Чтобы не искать код, можно воспользоваться Хромом и Фаерфоксом: из браузеров достаточно щелкнуть по нужному элементу, т.е. по аватару и проинспектировать элемент. В коде вы, возможно, найдете другое название класса avatar, к примеру, author-avatar. В данном случае поменяйте название в первой строке.
Блок комментариев
Теперь то же самое можно настроить для комментариев, стоит также поискать название классов аватаров блока комментариев. Убедившись, что названия совпадают, можно применить следующий код:
.commentlist .avatar {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
После этого аватары комментирующих должны отображаться круглыми.
Что если изображения вообще не отображаются?
Может случиться так, что изображения аватаров и вовсе не будут отображаться. В этом случае нужно убедиться, что аватары включены на сайте, для этого стоит посмотреть параметры – обсуждение и посмотреть стоит ли соответствующая галочка. Возможно, что вы используете плагин, который уже затрагивает отображение аватаров. В любом случае, если вы не хотите экспериментировать с файлами и лишний раз вносить правки, вы можете заказать у нас сайт, оговорив подобный функционал заранее.