Привет всем,это снова я со своими пошаговыми уроками для 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 стили на Вашем сайте.
Обратите внимание на скриншот ниже:
Обратите внимание, что на скриншоте рябом с именем css файла, есть цифра.На скриншоте у меня это цифра 589, так вот эта цифра обозначает в какой строке в CSS файле нужно вносить изменение.Нам эта цифра пригодится.Откройте файл стилей, в моем случае это файл style.css и прокрутите к той строчке, что у Вас указана справа от имени файла.В моем случае это к 589 строке.теперь нам нужно вставить код, который сделает аватарки круглыми:
border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;
Сохраните файл, и загрузите его обратно на сервер.И обновите страничку. У меня после добавления этого кода аватарки стали круглыми:
Если Вы не видите никаких изменений, то скорее всего нужно очистить кэш в браузере.
Информация для новичков:Как очистить кэш в браузере Google Chrome, Firefox, Opera, Internet Explorer?
Можно также немного усовершенствовать круглые аватарки на блоге,и добавить небольшой отступ,границу и затемнение(код необходимо добавить к тому,который мы уже вставили ранее в файл style.css):
padding: 5px; border: 1px solid #999; box-shadow: 0px 1px 1px 1px #bbb;
Итоговые круглые аватарки будут выглядеть так:
Желаю успехов,если что то будет не получаться,пишите в комментариях.