Простой способ сделать граватар круглым.

Опубликовано: 01.09.2018

Привет всем на wpsovet.ru . Сегодня запускаю рубрику про дизайн, и это первая статья в ней. Я давно перестал использовать плагины, и ставлю их только в крайнем случае, сейчас их у меня 10, два из которых думаю менять на код, но сегодня не об этом. Когда я писал свой шаблон, то мне захотелось сделать граватары круглыми (это иконки авторов комментаторов), потому как, и смотрится приятнее и больше подходит по дизайну блога, и стал думать как это осуществить.

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

The Great Gildersleeve: Leroy's Paper Route / Marjorie's Girlfriend Visits / Hiccups

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

Узнаем необходимые сведения у аватаров.

Просто жмем правой кнопкой мыши и выбираем этот пункт, подробности на снимке ниже.

Наводим курсор на любой граватар, которому будем скруглять углы, и жмем на нем правой кнопкой мыши. Из выпадающего меню выбираем пункт «Просмотр кода элемента», многие ставят специальные плагины для браузеров типа Firebag, но я не вижу разницы между ними, лишь только засорите память. Тут программа показывает вам расположение картинки, в принципе уже здесь можно увидеть класс, у меня он называется avatar, но проверить для надежности все равно надо. Вот тут можете быть уверены в названии, на скриншоте видно, что за внешний вид комментатора и вправду отвечает «avatar».

Темы у всех разные, а следственно и стили у сайта так же будут другие.

На этом первый шаг мы позади, далее будем скруглять углы граватарок, придется маленько поковыряться в коде.

Скругляем углы средствами CSS.

Главное не бойтесь, все очень просто. Для начала выберите чем вы будете пользоваться, для изменения кода, я буду средствами вордпресса, просто заходите в «административную панель»->»внешний вид»-> «редактор»-> «файл style.css».

Не забываем делать резервные копии изменяемых файлов

Сейчас нам надо найти строчку с данным классом, а он у нас в названием «avatar», смотрите скриншот и к нему описание.

Путь до редактора. В правом столбце находим файл style.css, обычно он открывается стандартно первым, но все же. Нажимаем комбинацию клавиш Cntrl+F, для вывода поиска по странице. Водим название класса, который мы определили для граватаров, и нажимаем ввод. Может быть случай, что поиск найдет не один вариант, у меня есть .avatar-top img и .avatar-comment, их не трогаем, потому что это совсем другие строки, они нам не нужны. Смотрите я нашел то, что мне надо, смотрите выделенную строчку.

Теперь просто приписываем к этому стилю еще три параметра, вот они:

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

В итоге у вас должно получиться так:

Поясню, данные строчки вводят параметр border-radius, он делает углы у картинок скругленными, у него есть много величин пиксели, пункты, но нам подойдут именно проценты. Логично будет сказать, чтобы сделать идеальный круг, нам всего-то нужно прописать в параметре величину 50%. Сохраняем все изменения и радуемся красоте.

Если у вас стоит плагин кэширования , то очистите весь кэш, а то изменения не увидите.

На этом у меня все, извините за мою дотошность, но статья направлена на новичков. Сам алгоритм понятен всем, просто прописать нужные строки к определенному объекту.

P.S. Скажите, а вам статья помогла? Если да, то оставьте свой отзыв в комментариях, а если нет, то тоже пишите?