Полезное        13 октября 2013        256         32

Как скруглить аватарки на блоге?

Всем доброго времени суток!

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

аватар пользователя

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

На моем блоге круглые автарки смотрятся достаточно хорошо, но пока я все же оставил их квадратными. Быть может, немного позже я их изменю. Возможно, кто-то из вас вообще не знает, что такое аватар? Тогда советую почитать вам этот пост. В нем я подробно рассказываю, как установить аватар на блог. Теперь, когда все в курсе, что это за чудо такое, приступаем к его модернизации.

Как сделать круглый аватар

Для этого нам понадобится немного изменить всего один файлик блога, а именно style.css. Все знают, где он находится? Давайте поясню для новичков. Чтобы добраться до файла style.css рекомендую воспользоваться ftp — клиентом файлзилла. Соединившись с сервером, перейдите по следующему пути: httpdocs или public_html (в зависимости от хостинга)/wp-content/themes/ваша тема/style.css.

Скопируйте данный файл себе на компьютер и откройте при помощи текстового редактора. Для удобства рекомендую пользоваться редактором notepad++. А дальше, вам необходимо отыскать участок кода, который отвечает за вывод аватара. Как это сделать? Все очень просто!

Откройте любую страницу своего блога, в которой присутствуют комментарии, наведите курсор мышки на аватар любого пользователя и нажмите правую кнопку мыши. В появившемся списке выберите пункт «Исследовать элемент» (в браузере Mozilla Firefox) или «Просмотр кода элемента» (в Google Chrome):

аватар wordpress

Внизу экрана появится код, в котором нас будет интересовать правая сторона, а именно стили. Как видно на скриншоте ниже, перед нами появился участок кода, отвечающий за вывод аватарок «img.avatar» и номер строки файла style.css, в которой он расположен, в моем случае, это 569:

аватар пользователя-4

Теперь открываем файл style.css, ищем 569-ю строку и добавляем перед закрывающейся скобой «}» следующий участок кода:

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

Вот как это будет выглядеть:

как сделать круглый аватар-5

Сохраните файл и переместите его на сервер с заменой старого. Теперь, перейдя на свой блог и обновив страницу, вы увидите круглые аватары:

аватар wordpress-6

Как вам такой вид? На многих шаблонах такие аватарки будут выглядеть очень даже неплохо. Помимо аватарок в комментариях, поменяются и картинки в виджете «ТОП комментаторов», если он у вас есть:

лучшие комментаторы

Также, можно еще немного приукрасить изображения, добавив им еще одну окружность (рамку):

аватар-9

Так интереснее? По-моему выглядит симпатично! Сделать это можно, добавив еще один участок кода к существующему:

padding: 5px;
border: 1px solid #999;
box-shadow: 0px 1px 1px 1px #bbb;

Вот, как это будет выглядеть:

аватар

Причем, вы можете поменять отступ между окружностями, изменив значение «5px» в первой строчке кода и цвета фона и самой рамки окружности в следующих двух строках. Вот и все что я хотел вам сегодня рассказать. Теперь вы знаете, как сделать круглый аватар пользователя, а моя статья будет вам в помощь. Не сложно? Я думаю нет.

Победители кроссворда на blogiseo.ru №14

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

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

Победители кроссворда на blogiseo.ru №14:
1 место — Анна (gan…..mail.com) — 150 рублей
2 место — Татьяна Саксон (sakson.lit-dety.ru) — 100 рублей

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

—>Подписаться на обновления блога<—

Как вам такие аватарки на блоге? Жду ваших комментариев!

С уважением, Николай Коротков

Обсуждение: 32 комментария
  1. А мне почему-то квадратные больше нравятся…Стильнее как-то…Но смотря по вашим комментариям, они тоже квадратные…Круглые не особо по душе?

    [Ответить]

    Николай Коротков

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

    [Ответить]

    Александр

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

    Но, Николай, к твоему деловому стилю твоего блога, вряд ли они подойдут, как минимум по-детски будет =) Но это мое мнение, вдруг я не прав!

    [Ответить]

    Николай Коротков

    Александр
    Возможно ты и прав… Теперь, прежде чем ставить круглые аватарки, я сто раз подумаю 🙂

    [Ответить]

    Александр

    Ну если ты раздел «Самое популярное» тоже круглым сделаешь, то может быть что-то в этом будет =)

    Но по мне так квадратные круче!

    [Ответить]

    Александр Иванович

    Николай!
    Я поддерживаю Александра.
    Вашему блогу больше подходят квадратные аватарки.
    Но если вдруг мне придумается у себя на сайте их «скруглить»,то буду знать, где искать.

    [Ответить]

    Ответить
  2. Прочитала, интересный подход к оформлению аватарок, но я исхожу из принципа: не трогай лихо… У меня просто патологическая способность из простого делать сложное! 🙂 Если что-то начинаю менять на сайте, то обязательно испорчу — не дружу я с техническим прогрессом и все тут, так что стоят у меня квадратные аватары и ладно! А за урок спасибо, может когда-нибудь и возникнет желание эксперимента!

    [Ответить]

    Ответить
  3. Alex:

    Интересная фишка! Но квадратные, правда, привычнее. И еще, Николай, что-то никак у меня не получается сделать ТОП плиткой. Все в один ряд идут, как плагин поставил, и то пришлось до 4-х урезать, так как больше «заезжают» друг на друга…

    [Ответить]

    Николай Коротков

    Alex
    Нужно разбираться с кодами. Экспериментируй,если долго мучиться, что-нибудь получится!

    [Ответить]

    Ответить
  4. Да, интересно. Буду иметь в виду, а пока не до этого. 😮

    [Ответить]

    Ответить
  5. Анна:

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

    [Ответить]

    Николай Коротков

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

    [Ответить]

    Анна

    Спасибо большое за поздравление, приз получила! 🙂

    [Ответить]

    Ответить
  6. Объявления Дагестана:

    Хорошая статья, это как говорится на любителя

    [Ответить]

    Ответить
  7. Елена:

    Большое спасибо за идею, которую я сразу же реализовала у себя! 🙂

    [Ответить]

    Ответить
  8. Если вдруг захочется у себя аватарки скруглить, буду знать, где смотреть. Ну а пока мне тоже привычнее с квадратными.

    [Ответить]

    Ответить
  9. Что касается кроссворда, то я очень рада оказаться в победителях и не понимаю, почему оказалось так мало участников. Такая классная идея к кроссвордами! Мне так интереснее, чем просто кроссворд.
    Ладно, бегу отправлять вам номер кошелька 😉

    [Ответить]

    Ответить
  10. Здравствуйте, у меня сайт еще новенький, но интересно все таки, попробую поставить. Но не сейчас. Спасибо. Что бы мы новички без вас делали… 😈

    [Ответить]

    Ответить
  11. Creeper:

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

    [Ответить]

    Николай Коротков

    Creeper
    Возможно вы и правы, мнение читателей поможет сделать правильный выбор.

    [Ответить]

    Александр

    В комментах итак уже высказали свое мнение по поводу аватаров на данном блоге =)

    [Ответить]

    Creeper

    Ну еще можно сделать опрос, где будут видны итоги голосование) Посмотрим заодно сколько людей за круглые аватары а кто за стандартные квадратные

    [Ответить]

    Александр

    Ну ради эксперимента, то почему бы и нет =)

    [Ответить]

    Александр Иванович

    Creeper
    Я так понял, что проблема почти решена. Многие, в том числе и Вы,высказались за квадратные аватарки. Так зачем ещё делать опрос?

    [Ответить]

    Александр Иванович

    P.S.
    Можно подумать, что от этого прибавится посетителей.
    Опять выскажутся те, что уже высказывались!

    Ответить
  12. Это, конечно только моё мнение, но я думаю, что у Николая кроме опросов по круглым аватаркам, дел, более важных, по горло! 😐

    [Ответить]

    Николай Коротков

    Александр Иванович
    Вы абсолютно правы!

    [Ответить]

    Ответить
  13. Creeper:

    Ну если вопрос решен, то решен) Зато я предложил сделать опрос и сразу как читатели видите оживились) Обсуждение стало еще интересней )

    [Ответить]

    Александр Иванович

    «сразу как читатели видите оживились)»

    А читателей — Вы, да я, да мы с тобой (Пословица)
    А больше, думаю, и не будет

    [Ответить]

    Анна

    Не смогла пройти мимо, когда прочла ваш диалог! А главное, тему какую глобальную выбрали: круглые или квадратные аватарки! По большому счету, какая разница, в сети должны быть и те и другие, для разнообразия. А если столько времени уделять их форме, то далеко мы не уедем!
    «А читателей — Вы, да я, да мы с тобой» — это же вроде песня, а не пословица

    🙂

    [Ответить]

    Александр Иванович

    Анна!
    Не буду с вами спорить. Возможно Вы и правы! 🙄

    [Ответить]

    Ответить
  14. Спасибо за статью. Опробую у себя на блоге! 💡

    [Ответить]

    Ответить

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

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

Поиск по блогу
Подписка на обновления

Введите Ваш e-mail:

rss

twitter

 google

Интересная информация
Хостинг от Макхост

ВОСПОЛЬЗУЙТЕСЬ ПРИ РЕГИСТРАЦИИ КУПОНОМ "blogiseo" И ПОЛУЧИТЕ 3 МЕС. БЕСПЛАТНОГО ИСПОЛЬЗОВАНИЯ ХОСТИНГА ПО ТАРИФУ МАК-10.