Я уже писал о том, как изменить дизайн комментариев, а также выделить автора блога. Эта статья расскажет и покажет, как с помощью CSS, сменить иконки для анонимов, блоггеров без аватаров и пользователей OpenID, установить свой размер для блока с аватаркой в комментариях блога на Blogger.
В статье добавлен готовый CSS шаблон, для быстрого внесения изменений, вам останется лишь подобрать подходящие картинки на замену стандартным.
Вот они, три аватара по умолчанию для комментаторов Blogger-блога, об изменении которых и пойдет речь:
Нет, конечно авки классные, интуитивно понятные и все такое. Но минус в том, что во всех блогах они одинаковые, и выбрать что-нибудь другое невозможно..., было :). Но решение есть.
HTML блока с виртуальным лицом посетителя в шаблоне блога выглядит так:
<div class='avatar-image-container'>
<img src='тра-та-та.jpg'></img>
</div>
Где "тра-та-та.jpg", это и есть аватар комментатора, который подгружается с профиля Blogger или Google+, еще может быть взят с Gravatar. Но если там пусто, то будут отображены те самые, иконки по умолчанию. И как ни странно, но именно они и помогут нам себя поменять.<img src='тра-та-та.jpg'></img>
</div>
В шаблоне, по умолчанию, уже есть кое-какой стиль для блока с селектором .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 кода. Он готов к использованию, его просто нужно добавляем в шаблон и указать свои ссылки на выбранные картинки.- http://img2.blogblog.com/img/b36-rounded.png - ленивый блоггер;
- http://img1.blogblog.com/img/openid36-rounded.png - OpenID, Wordpress, LiveJornal и др.
/*стили для всего блока аватарок*/
.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;
} /*конец*/
Гаттова!.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$="
.comments .avatar-image-container img[src$="
.comments .avatar-image-container img[src$="
border: 48px solid transparent; /*! указываем рамку, толщина максимальному значению размеров всего блока*/
height: 0; /*! убираем высоту чтобы рамка не съезжала в сторону*/
width: 48px; /*ширина равна общей*/
}
/*устанавливаем новые аватарки! :)*/
.comments .avatar-image-container img[src$="
background: url(.../your-image.png) 0 0 repeat;
}
.comments .avatar-image-container img[src$="
background: url(.../your-image.png) 0 0 repeat;
}
.comments .avatar-image-container img[src$="
background: url(.../your-image.png) 0 0 repeat;
} /*конец*/
В примере используется свойство border со значением толщины равной максимальному из значений размеров родительского блока (в данном случаи они одинаковы), таким образом изображение сместится, выйдет за пределы элемента и будет скрыто. Значение стиля и цвета свойства border установлены как сплошной и прозрачный соответственно, это позволяет видеть подложенную как фон картинку - новый аватар, позиция которого установлена как левый верхний угол ( 0 0 ), а размеры соответствуют размерам контейнера.
Также можно указать дополнительную иконку, так сказать, по умолчанию, старым дедовским способом: добавив в CSS фон для всего контейнера
Также можно указать дополнительную иконку, так сказать, по умолчанию, старым дедовским способом: добавив в CSS фон для всего контейнера
.avatar-image-container {
....
background: url(.../your-image.gif) 0 0 no-repeat;
}
Он будет виден в тех случаях когда аватакрка удалена или недоступна, при этом для замены стандартных иконок не следует использовать изображения с прозрачностью.....
background: url(.../your-image.gif) 0 0 no-repeat;
}
В примере кода размеры иконок, в писелях, 48х48, стандартные - 36х36, вы можете задать любые подходящие вам размеры, изменив в коде стиля 48 на любое нужное вам число.
Вот такой трюк, мнения, пожелания, адекватную критику вносим в форму ниже.
©http://magentawave.com
Александр, добрый день!
ОтветитьУдалитьПомоги пожалуйста, если знаешь - делаю всё как в инструкции и в итоге аватары вообще пропадают и их нет http://goeast7.blogspot.ru/2013/10/blog-post_17.html?showComment=1382340047305#c5528559106312118482.
Скажи почему так может быть?
И ещё - названия anon36.png, b36-rounded.png, openid36-rounded.png (выделенные синим) - надо на названия своих менять? Я пробовал вообще то и на свои менять - всё равно не выходит..
Что-то я в упор не увидел у тебя примененного стиля из статьи, Добавь его, и вместо .../your-image.gif , .../your-image.jpg и .../your-image.png укажи ссылку на свое изображение. Больше в коде ничего менять не нужно, он рабочий и в этом блоге стандартные аватары изменены этим кодом CSS
УдалитьСпасибо за статью !!! Кстати у меня также пропадали аватары, пока не выписал стиль, не сразу за три аватара через запятую, а для каждого отдельно.
ОтветитьУдалитьНу и два вопроса професcионалу: 1. Как убрать рамку в аватарах? 2. WordPress, определяется аватаром OpenID, возможно ли установить аватарку типа ленивый блогер для WP, LJ и др. Т.е. как в статусе автоматически устанавливались нужные аватары, вместо OpenID.
1. Рамка уже убрана в стилях в этом месте:
Удалить.comments .avatar-image-container img {
border: 0; /*убираем рамку*/
....
Если что-то не работает, то попробуйте удалить комментарии из кода (все сноски типа /*...*/), бывает что именно они не дают правильно исполнять код стиля.
2. Наверное, я не пробовал, но и то скорее всего это получится лишь для тех WP блоггеров, которые используют бесплатный домен wordpress.com, а их, поверьте, мало поэтому заморачиваться с этим вряд ли стоит.
Действительно .comments .avatar-image-container img {
Удалитьborder: 0, но строкоой ниже установлен другой код border : 48px, и скорее всего он не только устанавливает толщину блока, но и возвращает рамку.
Помогите, пожалуйста избавиться от рамки.
http://perevirkablogu.blogspot.com/2013/09/blog-post_5303.html
В вашем шаблоне нужно удалить рамку и для самого контейнера аватара :
Удалить.comments .avatar-image-container {
border: 0;
...
}
Огромное Вам Спасибо !!!
УдалитьЭтот комментарий был удален администратором блога.
ОтветитьУдалитьКуда и как добавлять CSS код, в статье есть ссылка, но я продублирую -
Удалитьhttp://www.magentawave.com/2012/02/adding-css-to-html-blogger.html
Если в шаблоне блога имеются селекторы, стиль которых необходимо изменить (проверить можно с помощью сочетания клавиш Ctrl + F), то естественно что свойства для них нужно переписать на те, которые приведены в статье, чтобы не возникало конфликта.
Если вам необходимо изменить только иконку для "Анонимный", то нет необходимости использовать другие селекторы. Используйте только селектор анонимов, в статье это указано. И не забудьте указывать(подставить) свою ссылку на изображение.
З.Ы. Содержание комментария удалено по причине что код, который я пишу, я прекрасно знаю и дублировать его не нужно.
Спасибо большое за ответ, но к сожалению я только столкнулся с этим и мне сложно понимать.:-( Если есть возможность, напишите, пожалуйста, инструкцию только для этой одной задачи? Не получается логически вырвать кусочки с разных статей и многозадачных кодов.:-(
УдалитьВот код, который вам нужен
Удалитьhttp://cssdeck.com/labs/cl9xfxc8
Как добавить его в блог написано в статье по ссылке в предыдущем комменте. Ссылку на изображение замените на свою, размер 36Х36 - стандартный, по желанию можно увеличить.
Спасибо большое, всё получилось!!!:-)
УдалитьПопытался увеличить, изменив все "36" на "48" в этом коде. Но размер не изменился, только сместились картинки внутри окна авы.
УдалитьЧтобы увеличить размеры иконок необходимо указать также точные размеры для самого внешнего контейнера аватарки, это видно из кода размещенного в статье. Т.е. для
Удалить.comments .avatar-image-container указать свойства высоты - heght и ширины - width, с нужными значениями. Пример кода в статье.
Прошу прощения за назойливость... Решил использовать полностью код с этой статьи. У меня почему-то на анонимных авах закруглен только левый верхний угол, а остальные острые. Подскажите, пожалуйста, как исправить.
УдалитьНичего страшного :) Код проверил - все там нормально, удалите из кода шаблона строки повторяющихся селекторов со свойствами для этих блоков, а именно, примерно такие(все зависит от шаблона):
Удалить.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid #eeeeee;
}
Это стандартные стили в шаблоне и они могут конфликтовать с теми, которые вы добавляете.
.avatar-image-container {
Удалитьmargin: .2em 0 0;
Вот такое там было, я удалил, но к сожалению ничего не изменилось. Пробовал другую аву прописывать, то же самое...:-(
На 2-х своих код проверен и прекрасно работает, так что показывайте где вы это все делаете, а то я уже устал вслепую ваш блог "оперировать" .
УдалитьЭтот комментарий был удален администратором блога.
ОтветитьУдалитьПожалуйста дайте ссылку на пост где есть уже опубликованные комментарии, код и все остальное я и так увижу.
Удалитьhttp://puzzlecrew.blogspot.com/p/ot.html
УдалитьВот, теперь все понятно в чем косяк :) Просто надо задать свойство скругления углов ( border-radius ) не для картинки, а для самого контейнера, я-то когда тестил использовал изображение с прозрачным фоном и не видел этого, а по коду как-то провтыкал. Поправил в статье теперь все путем будет.
УдалитьСпасибо большое, теперь всё отлично!!!:-)
ОтветитьУдалитьСпасибо огромное.
ОтветитьУдалитьВсе работает, и главное без каких либо скриптов, в стилях СИЛА!!!
Подскажите что делаю не так
ОтветитьУдалитьhttp://www.catalunya4you.com/p/feedback.html
смотрю в разбор сайта на состовляющие и не вижу чтобы коменты вообще обращаличь к этим стилям
Ой все разобрался =)
ОтветитьУдалитьПодскажите пожалуйста на сайте не могу избавиться от аватара блоггера в комментах, установила код из этой статьи, но аватар так и не убрался, пример вот на этой странице tesing777777.blogspot.ru/2017/07/blog-post_64.html, прилагаю сканы goo.gl/cwr9fd, goo.gl/2ugzzc. С уважением Тата
ОтветитьУдалитьБлоггер изменил ссылки на картинки для стандартных аватаров, поэтому код не отображает желаемые персональные изображения. Решение очень простое, необходимо изменить в коде для селекторов картинок путь на актуальный, а именно:
Удалитьвместо anon36.png указать - blank.gif,
b36-rounded.png - SA=s35 или b16-rounded.gif,
openid36-rounded.png - openid16-rounded.gif.
Привет! Скажите пожалуйста, я вижу в других темах изменён стиль комментариев там где ты пишешь! Спасибо ваша статья помогла, всё поменял, только вот там где пишешь комментарии поменять не могу! Не знаете как сделать! Обычными css не выходит!
ОтветитьУдалитьСмутно понял о чем речь и где не получается пометь комментарии?
Удалить