Как изменить аватары по умолчанию в комментариях Blogger(Blogspot)

Львенок в джунгляхИтак, высоко почитаемые работники сферы блоггинга, представляю вам очередное решение для уникального оформления ваших блогов.
  Я уже писал о том, как изменить дизайн комментариев, а также выделить автора блога. Эта статья расскажет и покажет, как с помощью CSS, сменить иконки для анонимов, блоггеров без аватаров и пользователей OpenID, установить свой размер для блока с аватаркой в комментариях блога на Blogger.
  В статье добавлен готовый CSS шаблон, для быстрого внесения изменений, вам останется лишь подобрать подходящие картинки на замену стандартным.
  Вот они, три аватара по умолчанию для комментаторов Blogger-блога, об изменении которых и пойдет речь:
Стандартные аватары
  Нет, конечно авки классные, интуитивно понятные и все такое. Но минус в том, что во всех блогах они одинаковые, и выбрать что-нибудь другое невозможно..., было :). Но решение есть.
  HTML блока с виртуальным лицом посетителя в шаблоне блога выглядит так:
<div class='avatar-image-container'>
 <img src='тра-та-та.jpg'></img>
</div>
  Где "тра-та-та.jpg", это и есть аватар комментатора, который подгружается с профиля Blogger или Google+, еще может быть взят с Gravatar. Но если там пусто, то будут отображены те самые, иконки по умолчанию. И как ни странно, но именно они и помогут нам себя поменять.
В шаблоне, по умолчанию, уже есть кое-какой стиль для блока с селектором .avatar-image-container, но он нам не нужен. Поэтому его предварительно, надо удалить или закомментировать (/*...*/) чтоб не мешал.
 В CSS возможно более конкретно выбрать элемент из набора по значению атрибута, (в глубь материи W3C). И именно это поможет нам осуществить задуманное. У нас есть: иконка, которая загружается в тег <img> через атрибут src, значение которого - ссылка на соответствующую картинку. А ссылки, как вы уже догадались, у стандартных аватаров, тоже стандартные и выглядят так:
- http://img1.blogblog.com/img/anon36.png - Анонимный, Имя/URL;
- http://img2.blogblog.com/img/b36-rounded.png - ленивый блоггер;
- http://img1.blogblog.com/img/openid36-rounded.png - OpenID, Wordpress, LiveJornal и др.
 И вот мы подошли к самому интересному - макету CSS кода. Он готов к использованию, его просто нужно добавляем в шаблон и указать свои ссылки на выбранные картинки.
/*стили для всего блока аватарок*/
.comments .avatar-image-container {
 position: relative;
 border-radius: 3px;
 margin: -8px 0 0 -3px; /*внешние отступы - на усмотрение*/
 overflow: hidden; /*скроем все что выйдет за пределы элемента*/
 max-height: 48px; /*высота*/
 width: 48px; /*ширина*/
}
/*стили для изображений во всех блоках*/
.comments .avatar-image-container img {
 border: 0; /*убираем рамку*/
 max-width: 48px; /*максимальная ширина - соответствует ширине всего блока*/
}
/*стили для стандартных иконок в блоках*/
.comments .avatar-image-container img[src$="anon36.png"],
.comments .avatar-image-container img[src$="b36-rounded.png"],
.comments .avatar-image-container img[src$="openid36-rounded.png"] {
 border: 48px solid transparent; /*! указываем рамку, толщина максимальному значению размеров всего блока*/
 height: 0; /*! убираем высоту чтобы рамка не съезжала в сторону*/
 width: 48px; /*ширина равна общей*/
}
/*устанавливаем новые аватарки! :)*/
.comments .avatar-image-container img[src$="anon36.png"] {
 background: url(.../your-image.png) 0 0 repeat;
 }
.comments .avatar-image-container img[src$="b36-rounded.png"] {
 background: url(.../your-image.png) 0 0 repeat;
 }
.comments .avatar-image-container img[src$="openid36-rounded.png"] {
 background: url(.../your-image.png) 0 0 repeat;
 } /*конец*/
Гаттова!
 В примере используется свойство border со значением толщины равной максимальному из значений размеров родительского блока (в данном случаи они одинаковы), таким образом изображение сместится, выйдет за пределы элемента и будет скрыто. Значение стиля и цвета свойства border установлены как сплошной и прозрачный соответственно, это позволяет видеть подложенную как фон картинку - новый аватар, позиция которого установлена как левый верхний угол ( 0 0 ), а размеры соответствуют размерам контейнера.
 Также можно указать дополнительную иконку, так сказать, по умолчанию, старым дедовским способом: добавив в CSS фон для всего контейнера
.avatar-image-container {
....
 background: url(.../your-image.gif) 0 0 no-repeat;
}
 Он будет виден в тех случаях когда аватакрка удалена или недоступна, при этом для замены стандартных иконок не следует использовать изображения с прозрачностью.
В примере кода размеры иконок, в писелях, 48х48, стандартные - 36х36, вы можете задать любые подходящие вам размеры, изменив в коде стиля 48 на любое нужное вам число.

Вот такой трюк, мнения, пожелания, адекватную критику вносим в форму ниже.
©http://magentawave.com

26 комментариев:

  1. Александр, добрый день!
    Помоги пожалуйста, если знаешь - делаю всё как в инструкции и в итоге аватары вообще пропадают и их нет http://goeast7.blogspot.ru/2013/10/blog-post_17.html?showComment=1382340047305#c5528559106312118482.
    Скажи почему так может быть?
    И ещё - названия anon36.png, b36-rounded.png, openid36-rounded.png (выделенные синим) - надо на названия своих менять? Я пробовал вообще то и на свои менять - всё равно не выходит..

    ОтветитьУдалить
    Ответы
    1. Что-то я в упор не увидел у тебя примененного стиля из статьи, Добавь его, и вместо .../your-image.gif , .../your-image.jpg и .../your-image.png укажи ссылку на свое изображение. Больше в коде ничего менять не нужно, он рабочий и в этом блоге стандартные аватары изменены этим кодом CSS

      Удалить
  2. Спасибо за статью !!! Кстати у меня также пропадали аватары, пока не выписал стиль, не сразу за три аватара через запятую, а для каждого отдельно.
    Ну и два вопроса професcионалу: 1. Как убрать рамку в аватарах? 2. WordPress, определяется аватаром OpenID, возможно ли установить аватарку типа ленивый блогер для WP, LJ и др. Т.е. как в статусе автоматически устанавливались нужные аватары, вместо OpenID.

    ОтветитьУдалить
    Ответы
    1. 1. Рамка уже убрана в стилях в этом месте:
      .comments .avatar-image-container img {
      border: 0; /*убираем рамку*/
      ....
      Если что-то не работает, то попробуйте удалить комментарии из кода (все сноски типа /*...*/), бывает что именно они не дают правильно исполнять код стиля.
      2. Наверное, я не пробовал, но и то скорее всего это получится лишь для тех WP блоггеров, которые используют бесплатный домен wordpress.com, а их, поверьте, мало поэтому заморачиваться с этим вряд ли стоит.

      Удалить
    2. Действительно .comments .avatar-image-container img {
      border: 0, но строкоой ниже установлен другой код border : 48px, и скорее всего он не только устанавливает толщину блока, но и возвращает рамку.
      Помогите, пожалуйста избавиться от рамки.
      http://perevirkablogu.blogspot.com/2013/09/blog-post_5303.html

      Удалить
    3. В вашем шаблоне нужно удалить рамку и для самого контейнера аватара :
      .comments .avatar-image-container {
      border: 0;
      ...
      }

      Удалить
    4. Огромное Вам Спасибо !!!

      Удалить
  3. Этот комментарий был удален администратором блога.

    ОтветитьУдалить
    Ответы
    1. Куда и как добавлять CSS код, в статье есть ссылка, но я продублирую -
      http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html
      Если в шаблоне блога имеются селекторы, стиль которых необходимо изменить (проверить можно с помощью сочетания клавиш Ctrl + F), то естественно что свойства для них нужно переписать на те, которые приведены в статье, чтобы не возникало конфликта.
      Если вам необходимо изменить только иконку для "Анонимный", то нет необходимости использовать другие селекторы. Используйте только селектор анонимов, в статье это указано. И не забудьте указывать(подставить) свою ссылку на изображение.

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

      Удалить
    2. Спасибо большое за ответ, но к сожалению я только столкнулся с этим и мне сложно понимать.:-( Если есть возможность, напишите, пожалуйста, инструкцию только для этой одной задачи? Не получается логически вырвать кусочки с разных статей и многозадачных кодов.:-(

      Удалить
    3. Вот код, который вам нужен
      http://cssdeck.com/labs/cl9xfxc8
      Как добавить его в блог написано в статье по ссылке в предыдущем комменте. Ссылку на изображение замените на свою, размер 36Х36 - стандартный, по желанию можно увеличить.

      Удалить
    4. Спасибо большое, всё получилось!!!:-)

      Удалить
    5. Попытался увеличить, изменив все "36" на "48" в этом коде. Но размер не изменился, только сместились картинки внутри окна авы.

      Удалить
    6. Чтобы увеличить размеры иконок необходимо указать также точные размеры для самого внешнего контейнера аватарки, это видно из кода размещенного в статье. Т.е. для
      .comments .avatar-image-container указать свойства высоты - heght и ширины - width, с нужными значениями. Пример кода в статье.

      Удалить
    7. Прошу прощения за назойливость... Решил использовать полностью код с этой статьи. У меня почему-то на анонимных авах закруглен только левый верхний угол, а остальные острые. Подскажите, пожалуйста, как исправить.

      Удалить
    8. Ничего страшного :) Код проверил - все там нормально, удалите из кода шаблона строки повторяющихся селекторов со свойствами для этих блоков, а именно, примерно такие(все зависит от шаблона):
      .avatar-image-container {
      margin: .2em 0 0;
      }
      #comments .avatar-image-container img {
      border: 1px solid #eeeeee;
      }

      Это стандартные стили в шаблоне и они могут конфликтовать с теми, которые вы добавляете.

      Удалить
    9. .avatar-image-container {
      margin: .2em 0 0;
      Вот такое там было, я удалил, но к сожалению ничего не изменилось. Пробовал другую аву прописывать, то же самое...:-(

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

      Удалить
  4. Этот комментарий был удален администратором блога.

    ОтветитьУдалить
    Ответы
    1. Пожалуйста дайте ссылку на пост где есть уже опубликованные комментарии, код и все остальное я и так увижу.

      Удалить
    2. http://puzzlecrew.blogspot.com/p/ot.html

      Удалить
    3. Вот, теперь все понятно в чем косяк :) Просто надо задать свойство скругления углов ( border-radius ) не для картинки, а для самого контейнера, я-то когда тестил использовал изображение с прозрачным фоном и не видел этого, а по коду как-то провтыкал. Поправил в статье теперь все путем будет.

      Удалить
  5. Спасибо большое, теперь всё отлично!!!:-)

    ОтветитьУдалить
  6. Спасибо огромное.
    Все работает, и главное без каких либо скриптов, в стилях СИЛА!!!

    ОтветитьУдалить
  7. Подскажите что делаю не так
    http://www.catalunya4you.com/p/feedback.html

    смотрю в разбор сайта на состовляющие и не вижу чтобы коменты вообще обращаличь к этим стилям

    ОтветитьУдалить

Следующее Предыдущее

BestProject