Всем доброго времени суток!

Недавно нашел в интернете интересную фишку, а вернее небольшой участок кода, который позволяет сделать круглый аватар пользователя. Причем, делается все это буквально за 2-3 минуты.

аватар пользователя

И сегодня я решил поделиться с вами информацией, которая многим покажется довольно забавной и быть может вы захотите поменять уже приевшиеся квадратные картинки своего ресурса на круглые.

На моем блоге круглые автарки смотрятся достаточно хорошо, но пока я все же оставил их квадратными. Быть может, немного позже я их изменю. Возможно, кто-то из вас вообще не знает, что такое аватар? Тогда советую почитать вам этот пост. В нем я подробно рассказываю, как установить аватар на блог. Теперь, когда все в курсе, что это за чудо такое, приступаем к его модернизации.

Как сделать круглый аватар

Для этого нам понадобится немного изменить всего один файлик блога, а именно style.css. Все знают, где он находится? Давайте поясню для новичков. Чтобы добраться до файла style.css рекомендую воспользоваться ftp — клиентом файлзилла. Соединившись с сервером, перейдите по следующему пути: httpsdocs или public_html (в зависимости от хостинга)/wp-content/themes/ваша тема/style.css.

Скопируйте данный файл себе на компьютер и откройте при помощи текстового редактора. Для удобства рекомендую пользоваться редактором notepad++. А дальше, вам необходимо отыскать участок кода, который отвечает за вывод аватара. Как это сделать? Все очень просто!

Откройте любую страницу своего блога, в которой присутствуют комментарии, наведите курсор мышки на аватар любого пользователя и нажмите правую кнопку мыши. В появившемся списке выберите пункт «Исследовать элемент» (в браузере Mozilla Firefox) или «Просмотр кода элемента» (в Google Chrome):

аватар wordpress

Внизу экрана появится код, в котором нас будет интересовать правая сторона, а именно стили. Как видно на скриншоте ниже, перед нами появился участок кода, отвечающий за вывод аватарок «img.avatar» и номер строки файла style.css, в которой он расположен, в моем случае, это 569:

аватар пользователя-4

Теперь открываем файл style.css, ищем 569-ю строку и добавляем перед закрывающейся скобой «}» следующий участок кода:

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

Вот как это будет выглядеть:

как сделать круглый аватар-5

Сохраните файл и переместите его на сервер с заменой старого. Теперь, перейдя на свой блог и обновив страницу, вы увидите круглые аватары:

аватар wordpress-6

Как вам такой вид? На многих шаблонах такие аватарки будут выглядеть очень даже неплохо. Помимо аватарок в комментариях, поменяются и картинки в виджете «ТОП комментаторов», если он у вас есть:

лучшие комментаторы

Также, можно еще немного приукрасить изображения, добавив им еще одну окружность (рамку):

аватар-9

Так интереснее? По-моему выглядит симпатично! Сделать это можно, добавив еще один участок кода к существующему:

1
2
3

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

Вот, как это будет выглядеть:

аватар

Причем, вы можете поменять отступ между окружностями, изменив значение «5px» в первой строчке кода и цвета фона и самой рамки окружности в следующих двух строках. Вот и все что я хотел вам сегодня рассказать. Теперь вы знаете, как сделать круглый аватар пользователя, а моя статья будет вам в помощь. Не сложно? Я думаю нет.

Победители кроссворда на blogiseo.ru №14

И как и обещал в прошлом посте, подвожу итоги очередного кроссворда с денежными призами №14. Для меня это было удивлением, но всего два человека прислали мне свои ответы. Не знаю, почему остальные не захотели его разгадывать? Я имею в виду тех ребят, которые постоянно принимают участие в решении головоломок на моем блоге.

Видимо, кроссворд показался им довольно сложным или данный вид развлечения немного поднадоел? Ну, как говориться, не хотите, как хотите. Наградим тех, кто это заслужил. Итак, победителями кроссворда №14 становятся:

Победители кроссворда на blogiseo.ru №14:
1 место — Анна (gan...mail.com) — 150 рублей
2 место — Татьяна Саксон (sakson.lit-dety.ru) — 100 рублей

Поздравляю! Присылайте номера своих кошельков для получения заслуженных вознаграждений. На этом пост подошел к концу. Желаю всем отличного настроения, пока и до скорых встреч!

-->Подписаться на обновления блога<--

Как вам такие аватарки на блоге? Жду ваших комментариев!

С уважением, Николай Коротков