Вселенная полезных советов 
Привет всем на wpsovet.ru. Сегодня запускаю рубрику про дизайн, и это первая статья в ней. Я давно перестал использовать плагины, и ставлю их только в крайнем случае, сейчас их у меня 10, два из которых думаю менять на код, но сегодня не об этом. Когда я писал свой шаблон, то мне захотелось сделать граватары круглыми (это иконки авторов комментаторов), потому как, и смотрится приятнее и больше подходит по дизайну блога, и стал думать как это осуществить.
И вот я затупил, причем сам от себя этого не ожидал, а ответ был на поверхности. Не буду лить воду, квадратные и улучшенные мной, выглядят так, смотрится намного лучше.
Но чтобы так сделать придется немного повозиться, совсем чуть-чуть. Для начала нам надо определить какой стиль у вас отвечает за вывод граватара комментатора, для этого используем инструмент любого браузера “Просмотр кода элемента”.
Узнаем необходимые сведения у аватаров.
Просто жмем правой кнопкой мыши и выбираем этот пункт, подробности на снимке ниже.
- Наводим курсор на любой граватар, которому будем скруглять углы, и жмем на нем правой кнопкой мыши.
- Из выпадающего меню выбираем пункт “Просмотр кода элемента”, многие ставят специальные плагины для браузеров типа 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. Скажите, а вам статья помогла? Если да, то оставьте свой отзыв в комментариях, а если нет, то тоже пишите?
Читать еще
