Шаг №91.Как сделать круглые аватарки на блоге wordpress?

Привет всем,это снова я со своими пошаговыми уроками для wordpress.Однажды у меня спросили, как сделать круглые аватарки на блоге на манер Google plus.Есть два вариант решения этой проблемы.Один из них очень радикальный — это установка комментариев Google на wordpress. А второй вариант — видоизменение стандартных аватарок блога на wordpress. Как раз сегодня я и хочу показать Вам как можно сделать круглые аватарки на сайте.

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

Обязательно к прочтению:Как добавить аватарки пользователей в шаблон wordpress, в котором они не предусмотрены?

Теперь давайте приступим к добавлению круглых аватарок в шаблон wordpress.

Добавление круглых аватарок в шаблон wordpress.

Прежде всего нам понадобится текстовый редактор, например Notepad и FTP клиент например FileZilla.Через FTP клиент подключитесь к сайту по ftp.

Информация для новичков: Как подключиться к сайту по FTP.

Перейдите в папку где лежит Ваш шаблон и найдите в нем файл стилей, в большинстве шаблонов он называется style.css. Имя файла может быть и другим, но расширение у файла должно быть css.Для того что бы узнать имя файла, который нам предстоит редактировать,можно вот таким способом:

1)Откройте страницу с комментариями в браузере Google Chrome.

2)Нажмите на картинку аватарки правой кнопкой мыши, и потом выберите пункт:»Просмотр кода элемента».

3)В браузере Google Chrome появится дополнительная панель внизу справа, в которой можно узнать имя файла,где хранятся css стили на Вашем сайте.

Обратите внимание на скриншот ниже:

Круглые аватарки в wordpress

Обратите внимание, что на скриншоте рябом с именем css файла, есть цифра.На скриншоте у меня это цифра 589, так вот эта цифра обозначает в какой строке в CSS файле нужно вносить изменение.Нам эта цифра пригодится.Откройте файл стилей, в моем случае это файл style.css и прокрутите к той строчке, что у Вас указана справа от имени файла.В моем случае это к 589 строке.теперь нам нужно вставить код, который сделает аватарки круглыми:

border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;

Сохраните файл, и загрузите его обратно на сервер.И обновите страничку. У меня после добавления этого кода аватарки стали круглыми:

Круглые аватарки в wordpress

Если Вы не видите никаких изменений, то скорее всего нужно очистить кэш в браузере.

Информация для новичков:Как очистить кэш в браузере Google Chrome, Firefox, Opera, Internet Explorer?

Можно также немного усовершенствовать круглые аватарки на блоге,и добавить небольшой отступ,границу и затемнение(код необходимо добавить к тому,который мы уже вставили ранее в файл style.css):

padding: 5px; 
border: 1px solid #999; 
box-shadow: 0px 1px 1px 1px #bbb;

Итоговые круглые аватарки будут выглядеть так:
Как сделать круглые аватарки?

Желаю успехов,если что то будет не получаться,пишите в комментариях.

  • http://ihakimov.ru Ильдар

    С одной стороны необычно, но с другой не у всех аватарки могут быть подготовлены к «округлению» и могут получиться некрасиво.

    • http://wpcreate.ru Артем Петрусенко

      Согласен, но я думаю кому нибудь эта статья обязательно пригодится!

  • http://ncuxolog.astrakraft.ru/ Светлана

    Получилось. Интересно, но мне кажется, квадратные смотрятся лучше в комментариях.
    Спасибо.

  • Андрей

    Посоветовали обратиться в bSimple.Люди советовали правильные, но все же. Кто что про них знает?