Home / Блог / Как сделать круглый аватар в комментариях
Как сделать круглый аватар в комментариях

Как сделать круглый аватар в комментариях

Здравствуйте, дорогие читатели моего блога.

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

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

Скорее всего, вы часто наблюдали такую картину, когда граватары комментаторов имеют различную форму. Как правило, они квадратные и на многих блогах отличаются по размеру.  Но бывают и интересные исключения. Вот, например, на блоге Виктора Рогова комментаторы имеют круглый граватар, что смотрится очень ярко и необычно.

Мы же в свою очередь сможем сделать такие же симпатичные аватары у себя на блоге,  не устанавливая плагин и не нагружая движок.

Итак, для начала нам надо зайти в админку вашего блога, перейти в меню «Внешний вид» и выбрать «Редактор». Далее выбрать Таблица стилей (style.css) и добавить в нее такой кусок кода

 

.avatar {

float: right;

border-radius: 35px;

-webkit-border-radius: 35px;

-moz-border-radius: 35px;

-o-border-radius: 35px;

-ms-border-radius: 35px;

-khtml-border-radius: 35px;

-webkit-box-shadow: 0px 0px 5px 0px ;

box-shadow: 0px 0px 5px 0px ;

width:35px;

height:35px;

 

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

Вот пример использования круглого аватара справа.

Как сделать круглый аватар в комментариях

А вот он же, но слева.

Как сделать круглый аватар в комментариях

А в последних двух строчках  устанавливаем соответственно, ширину и высоту аватара.

У этого способа есть одна особенность – картинки более 35х35 пикселей становятся размытыми. Например, мы установили значения width:50px и height:50px. И видим, что на первой картинке это стало очень заметно.

Кстати, при таком подходе на блоге отображаются все картинки комментаторов, которые имеются у пользователей на сервисе аватаров, человек-загадка,  Wavatar,  MonsterID и прочие, предусмотренные в настройках WordPress. Как сделать граватар более подробно я писал в этой статье.

Лично я поигрался с круглыми аватарами, настройкой размера и контура и оставил свои родные квадратные, потому что моя тема «поползла». Вот так это выглядело.

Как сделать круглый аватар в комментариях

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

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

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

Проверьте ещё

Wordpress не отправляет письма - что делать?

WordPress не отправляет письма – что делать?

Здравствуйте, друзья. Сегодня решил поделиться с вами решением одно распространенной проблемы с WordPress – дело …

38 комментариев

  1. Александр

    Думаю нужно попробовать и себе,такую штучку. У меня кстати встречный вопрос, а почему у меня на WP в админке не высвечивается граватар, а только устанавливается по умолчанию. Или чтобы он там появился нужно чтобы адреса электронной почты блога и граватара совпадали?

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

      • Светлана, да нужен emeil. Но когда я пробовал регистрировать на яндексе и mail.ru, это не сработало. На glemail.com, сразу все получилось.

    • Вячеслав Балашов

      Посмотрите в админке Параметры -> Обсуждения Там установите необходимые настройки.
      Ну, и конечно же, для отображения вашего граватара, у вас он должен быть в наличии http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/ab.gif
      Более подробно о нем я писал здесь

  2. Здравствуйте Вячеслав. Ваш блог мне понравился. Тема про круглый граватар заманчивая, видимо только не во всех темах поддерживается. При заходе на ваш блог, выскакивает форма подписки, но в какой она кодировке? Вместо слов одни квадратики. А статьи интересные.
    С уважением Игорь Павловский.http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

  3. Спасибо за ценный совет, поставил на сайте круглые аватарки. Очень мило. 🙂

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

  5. Здравствуй, Вячеслав. Округлить, это не так важно, интересно надо писать.
    Скажу из своего опыта, что интересно пользователем? О том и пиши, но по делу, а не тяп-ляп. Где искать темы, я думаю сам знаешь.

    • Вячеслав Балашов

      Приветствую, Ильдар.
      Встречают по одежке, а провожают по уму – это именно то, что было важным во все времена.
      А судя по отзывам пользователей, лично я пишу просто замечательно и несу пользу для большинства моих посетителей http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/buba.gif

      • Cлава, я по поводу комментария Ильдара…
        Сколько в мире миллионеров ? десятки…А сколько пытающихся ими стать ? Миллионы !
        Сколько в Интернете Гуру ? Сотни… А пытающихся ими стать( в смысле -чайников) миллиарды …
        Напишете вы то, о чем говорит Ильдар-сколько человек вас прочтет да еще и охает -неизвестно, а вот такие пошаговые доступным языком написанные тяп-ляпы (на взгляд Ильдара) нужны и читаются многотысячной аудиторией

        • Вячеслав Балашов

          У каждого свое видение ситуации, поэтому нет смысла подстраиваться под всех.
          Я пишу о том, что считаю нужным и получаю отзывы, которые меня стимулируют к созданию новых статей и видео.
          А у других блогеров свои взгляды на вещи и это нормально для них и для меня, хотя я не сею негатив на их страницах (несмотря на то, что они пишут откровенный бред, который абсолютно невозможно применить на практике) 🙂

  6. Вячеслав здравствуйте! Прекрасная статья, а самое главное – прикладная. Бери и делай. СУПЕР! Мой респект. Всегда рад у Вас учиться.

    • Вячеслав Балашов

      Я рад, что эта статья оказалась полезной. А вам,Владимир, отдельное спасибо за положительный настрой http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/bt.gif

  7. Никита Рябин

    Уважаемый блоггер, приглашаю Вас принять участие в марафоне по набору базы подписчиков! rel=”nofollow”

  8. Для меня как то мудрено. http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif Мне проще в фотошопе. Два кhttp://balashoff.ru/wp-content/plugins/wp-monalisa/icons/dn.gifлика и все готово.

  9. Ух ты! Спасибо за подарок. 🙂 А ваш блог еще и Дофолов?! Так, это просто потрясающе! 🙂

  10. Растения Скорпиона

    Да все подробно описано, но мне вот больше по душе квадратная картинка

  11. Я собралась уже ознакомиться с очередным интересным плагином, а оказывается все довольно просто и банально. 🙂 У вас замечательно смотрятся квадратные аватары, так что не сильно расстраивайтесь. У А вы пробовали слегка закруглить углы под дизайн социалок? Было бы круче, чем круглые.

    • Вячеслав Балашов

      Я уже привык к квадратным аватарам 🙂
      А кнопки социалок сделаю меньше – как раз добавлю кнопку от Ютуба и будет очень аккуратно и стильно.

  12. Колосова Светлана

    Классно! Надо попробовать. Глядишь, и получится. Главное, плагин не нужно ставить. Только вот вопросик: а в какое именно место надо вставлять в таблице стилей? в начале, в середине, в конце – где?
    Спасибо и удачи!http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    • Вячеслав Балашов

      Светлана, в данном случае не важно расположение.
      Лично я вставлял в конце, чтобы потом было проще искать этот кусок кода.
      Вообще, все изменения в коде стараюсь делать в конце файлов и с комментариями для себя, а то не ровен час, забудешь что это за фрагмент кода и будешь потом голову ломать http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/eyes.gif

  13. Колосова Светлана

    Вячеслав, по ходу дела возник еще вопросик: а старые аватары как убрать? Или их не нужно убирать – все уберется автоматически?
    Я в css ничего не понимаю. Но так хочется такую красоту поставить. Да еще и с левой стороны (как?).
    http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gifhttp://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif

    • Вячеслав Балашов

      Светлана, старые аватары станут новыми круглыми http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/ab.gif
      Для того чтобы их расположить слева в том коде во второй строке меняете float: right; на float: left; и вставляете его в файл таблицы стилей темы.

  14. Мудрёно, мудрёно ). По мне, так проще сохранить через какой-нибудь редактор изображение в png или gif с прозрачной подложкой в три клика.

  15. О! У вас CommentLuv наконец-то появился! Поздравляю!

    Поставила себе круглые аватарки – у меня даже 50*50 нормально смотрится, ничего не плывет. Спасибки!

    • Вячеслав Балашов

      У меня все никак руки не доходили до него http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/ab.gif
      Кстати, у вас очень симпатично смотрятся круглые аватарки http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/dn.gif

  16. Николай Гижицкий

    С удовольствием твитнул и гуглплюснул Ваш пост, Вячеслав!
    Возможно кому-то понадобится такая информация.
    Для себя же, решил оставить квадратные граватары.
    Как-то привычнее!

    • Вячеслав Балашов

      С моей темой круглые граватары смотрелись страшно, а вот у моей знакомой Юлии Queen они прекрасно вписались в дизайн http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

  17. Очень интересная фишка. Жаль, что не всегда срабатывает из-за конфликта с темой. Но поробовать стоит. Тем более у меня стоит плагин выпадающие вкладки в сайт-баре. Может сработает нормально. Будем эспериментировать.

    • Вячеслав Балашов

      Да, у некоторых смотрится вполне симпатично, в моем же случае был тот самый конфликт с темой – пришлось оставить стандартные.

  18. Здравствуйте Вячеслав! Интересное решение попробую, а там как получится. Заходите в гости.С уважением Андрей.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/by.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/dn.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/bo.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/buba.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/eyes.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/drink.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/de.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/jokingly.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/bt.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/dt.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/cl.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/ca.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/bz.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/di.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/ab.gif 
 
ИНФОПРОДУКТЫ БЕСПЛАТНО

СКАЧАЙТЕ
FREE!

СКАЧАТЬ СЕЙЧАС!
close-link