Здравствуйте, дорогие читатели моего блога.
Сегодня я решил поделиться полезной информацией для владельцев блогов на 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 и узнаете об этом первыми.
Также буду признателен, если вы понажимаете кнопочки социальных сетей.
Подписывайтесь на мой канал в Телеграм - там все про распаковку экспертости!
Хотите получать свежие статьи себе на почту?
Введите ваш рабочий электронный адрес:
Думаю нужно попробовать и себе,такую штучку. У меня кстати встречный вопрос, а почему у меня на WP в админке не высвечивается граватар, а только устанавливается по умолчанию. Или чтобы он там появился нужно чтобы адреса электронной почты блога и граватара совпадали?
Насколько я знаю для того, чтобы появился граватар, нужно указывать электронную почту, на которую он был зарегистрирован.
Светлана, да нужен emeil. Но когда я пробовал регистрировать на яндексе и mail.ru, это не сработало. На glemail.com, сразу все получилось.
Посмотрите в админке Параметры -> Обсуждения Там установите необходимые настройки.
Ну, и конечно же, для отображения вашего граватара, у вас он должен быть в наличии
Более подробно о нем я писал здесь
Здравствуйте Вячеслав. Ваш блог мне понравился. Тема про круглый граватар заманчивая, видимо только не во всех темах поддерживается. При заходе на ваш блог, выскакивает форма подписки, но в какой она кодировке? Вместо слов одни квадратики. А статьи интересные.
С уважением Игорь Павловский.
Спасибо за ценный совет, поставил на сайте круглые аватарки. Очень мило. :)
У вас они очень душевно смотрятся.
Прямо-таки вписались в дизайн блога
Очень симпатично смотрятся круглые граватары, нужно так же себе настроить Спасибо Вячеслав за подсказку.
Рад, что для вас эта статья оказалась полезной.
Здравствуй, Вячеслав. Округлить, это не так важно, интересно надо писать.
Скажу из своего опыта, что интересно пользователем? О том и пиши, но по делу, а не тяп-ляп. Где искать темы, я думаю сам знаешь.
Приветствую, Ильдар.
Встречают по одежке, а провожают по уму — это именно то, что было важным во все времена.
А судя по отзывам пользователей, лично я пишу просто замечательно и несу пользу для большинства моих посетителей
Cлава, я по поводу комментария Ильдара…
Сколько в мире миллионеров ? десятки…А сколько пытающихся ими стать ? Миллионы !
Сколько в Интернете Гуру ? Сотни… А пытающихся ими стать( в смысле -чайников) миллиарды …
Напишете вы то, о чем говорит Ильдар-сколько человек вас прочтет да еще и охает -неизвестно, а вот такие пошаговые доступным языком написанные тяп-ляпы (на взгляд Ильдара) нужны и читаются многотысячной аудиторией
У каждого свое видение ситуации, поэтому нет смысла подстраиваться под всех.
Я пишу о том, что считаю нужным и получаю отзывы, которые меня стимулируют к созданию новых статей и видео.
А у других блогеров свои взгляды на вещи и это нормально для них и для меня, хотя я не сею негатив на их страницах (несмотря на то, что они пишут откровенный бред, который абсолютно невозможно применить на практике) :)
Вячеслав здравствуйте! Прекрасная статья, а самое главное — прикладная. Бери и делай. СУПЕР! Мой респект. Всегда рад у Вас учиться.
Я рад, что эта статья оказалась полезной. А вам,Владимир, отдельное спасибо за положительный настрой
Уважаемый блоггер, приглашаю Вас принять участие в марафоне по набору базы подписчиков! rel=»nofollow»
Спасибо за рекламу на моем блоге
Ответ написал в комментариях.
Для меня как то мудрено.
Мне проще в фотошопе. Два к
лика и все готово.
Ух ты! Спасибо за подарок. :) А ваш блог еще и Дофолов?! Так, это просто потрясающе! :)
Ага, после пятого комментария ваша ссылка становится открытой
Да все подробно описано, но мне вот больше по душе квадратная картинка
Я собралась уже ознакомиться с очередным интересным плагином, а оказывается все довольно просто и банально. :-) У вас замечательно смотрятся квадратные аватары, так что не сильно расстраивайтесь. У А вы пробовали слегка закруглить углы под дизайн социалок? Было бы круче, чем круглые.
Я уже привык к квадратным аватарам :)
А кнопки социалок сделаю меньше — как раз добавлю кнопку от Ютуба и будет очень аккуратно и стильно.
Классно! Надо попробовать. Глядишь, и получится. Главное, плагин не нужно ставить. Только вот вопросик: а в какое именно место надо вставлять в таблице стилей? в начале, в середине, в конце — где?
Спасибо и удачи!
Светлана, в данном случае не важно расположение.
Лично я вставлял в конце, чтобы потом было проще искать этот кусок кода.
Вообще, все изменения в коде стараюсь делать в конце файлов и с комментариями для себя, а то не ровен час, забудешь что это за фрагмент кода и будешь потом голову ломать
Вячеслав, по ходу дела возник еще вопросик: а старые аватары как убрать? Или их не нужно убирать — все уберется автоматически?
Я в css ничего не понимаю. Но так хочется такую красоту поставить. Да еще и с левой стороны (как?).
Светлана, старые аватары станут новыми круглыми
Для того чтобы их расположить слева в том коде во второй строке меняете float: right; на float: left; и вставляете его в файл таблицы стилей темы.
Мудрёно, мудрёно ). По мне, так проще сохранить через какой-нибудь редактор изображение в png или gif с прозрачной подложкой в три клика.
Есть немного сложностей, но зато какой результат
О! У вас CommentLuv наконец-то появился! Поздравляю!
Поставила себе круглые аватарки — у меня даже 50*50 нормально смотрится, ничего не плывет. Спасибки!
У меня все никак руки не доходили до него
Кстати, у вас очень симпатично смотрятся круглые аватарки
С удовольствием твитнул и гуглплюснул Ваш пост, Вячеслав!
Возможно кому-то понадобится такая информация.
Для себя же, решил оставить квадратные граватары.
Как-то привычнее!
С моей темой круглые граватары смотрелись страшно, а вот у моей знакомой Юлии Queen они прекрасно вписались в дизайн
Да-да, до сих пор на них любуюсь и Вас, Вячеслав, добрыми словами «обзываю»
Очень интересная фишка. Жаль, что не всегда срабатывает из-за конфликта с темой. Но поробовать стоит. Тем более у меня стоит плагин выпадающие вкладки в сайт-баре. Может сработает нормально. Будем эспериментировать.
Да, у некоторых смотрится вполне симпатично, в моем же случае был тот самый конфликт с темой — пришлось оставить стандартные.
Здравствуйте Вячеслав! Интересное решение попробую, а там как получится. Заходите в гости.С уважением Андрей.
Телец тельца видит издалека :)
Конечно буду захаживать на ваш блог!