Рассмотрим Урок 73. Как сделать пользовательские аватарки круглыми

Урок 73. Как сделать пользовательские аватарки круглыми

Современные тренды нередко приходится подхватывать всем владельцам веб-сайтов, ведь прогрессивный веб-портал должен соответствовать современным нормам, демонстрируя серьезный подход. Что ж, одним из таких трендов стали круглые аватарки и изображения. А вам нужны идеи для малого бизнеса

Как бы там ни было, давайте посмотрим, что нужно сделать для того, чтобы аватарки стали круглыми. Для начала переходим в 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%;

}

После этого аватары комментирующих должны отображаться круглыми.

Что если изображения вообще не отображаются?

Может случиться так, что изображения аватаров и вовсе не будут отображаться. В этом случае нужно убедиться, что аватары включены на сайте, для этого стоит посмотреть параметры – обсуждение и посмотреть стоит ли соответствующая галочка. Возможно, что вы используете плагин, котоырй уже затрагивает отображение аватаров. В любом случае, если вы не хотите экспериментировать с файлами и лишний раз вносить правки, вы можете заказать у нас сайт, оговорив подобный функционал заранее.

 

16.11.2016

Оставить отзыв