kruglcomment4

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

9
29 января 2019

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментировать
9
Комментарии
  1. Олег ()
    Ответить

    А такого я не знал. Весьма интересная информация. Было полезно узнать как сделать круглый граватар.


  2. Warning: is_file(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/fd3540646b4176a053d1199ff1059626-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 164

    Warning: fopen(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/fd3540646b4176a053d1199ff1059626-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

    Warning: fopen(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/fd3540646b4176a053d1199ff1059626-s50.jpg): failed to open stream: Operation not permitted in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

    Warning: fwrite() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 208

    Warning: fclose() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 209
    Игорь ()
    Ответить

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

  3. LeLiK ()
    Ответить

    Я кстати тоже первый раз вижу! Но кривые руки не с могли с первого раза все правильно сделать, а потом понял свою ошибку и исправил! Спасибо автору за статью, реально полезная вещь!

  4. Дмитрий ()
    Ответить

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

  5. Таня ()
    Ответить

    Интересно было почитать. Вроде ничего сложного, но сразу додуматься до такого не просто.

  6. Вероника ()
    Ответить

    Если это самый простой способ, то тогда какие же сложные я даже не представляю. Я с этим способом 2 дня возилась, но все таки получилось! Просто видимо программист из меня никакой!


    • Warning: is_file(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 164

      Warning: fopen(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

      Warning: fopen(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg): failed to open stream: Operation not permitted in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

      Warning: fwrite() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 208

      Warning: fclose() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 209
      Лифанов Валентин ()
      Ответить

      Поверьте, бывают и сложнее.

  7. LeLiK ()
    Ответить

    Просто внимательно надо следить за курсором мыши при выделении и правильного написания скриптов, тогда всё получится!!!


  8. Warning: is_file(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 164

    Warning: fopen(): open_basedir restriction in effect. File(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg) is not within the allowed path(s): (/var/www/b5821/data:.) in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

    Warning: fopen(/home/v/valent5k/wpsovet.ru/public_html/wp-content/uploads/gravatar/458c441fbb7710b73e0eccd1e3400841-s50.jpg): failed to open stream: Operation not permitted in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 206

    Warning: fwrite() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 208

    Warning: fclose() expects parameter 1 to be resource, boolean given in /var/www/b5821/data/www/wpsovet.ru/wp-content/plugins/nix-gravatar-cache/nf-gravatar-cache.php on line 209
    Лифанов Валентин ()
    Ответить

    И вам привет дорогой спамер.