Платформа Blogger позволяет без труда изменить стиль всего блока комментариев и отдельно оформить только комментарии автора блога, применяя только CSS свойства к уже имеющимся в стандартном шаблоне элементам. В этой заметке подробно показано как это сделать, с примерами CSS кода.
Конечно, некоторое отличие, по умолчанию, уже предусмотрено в Blogger, это стандартный значок - кружочек с карандашиком после имени, от которого все благополучно избавились или хотят избавиться, потому как выглядит он весьма уныло. Однако, с помощью стилевых свойств, этот элемент можно изменить как угодно, задав ему желаемый вид и расположение. Необходимо лишь добавить CSS к уже имеющемуся в стандартном шаблоне Blogger селектору, который записан так:
- .comments .comments-content .icon.blog-author - селектор элемента с иконкой. В данном случаи, .blog-author - добавочный класс, в комментариях администратора блога.
Записанные по умолчанию свойства можно удалить, а вместо них добавить собственные.
Чтобы скрыть этот значок, достаточно найти указанный выше селектор в шаблоне и просто заменить существующий стиль на такой:
.comments .comments-content .icon.blog-author {
display:none;
width:0;
}
Но вы можете скачать или сделать самостоятельно подходящую иконку и расположить её как угодно в блоке комментария:display:none;
width:0;
}
CSS в этом случаи будет таким:
.comments .comments-content .icon.blog-author {
position: absolute;
right: 0;
top: 0;
background: url(...image/admin-icon.png) no-repeat;
border: 0;
padding: 0;
margin: 0;
height: 48px;
width: 48px;
}
На этом, в общем-то можно и остановиться, а можно пойти еще дальше. Дополнительно оформить и блок с именем/ником автора блога, используя все тот же отдельный класс .blog-author. Например так:position: absolute;
right: 0;
top: 0;
background: url(...image/admin-icon.png) no-repeat;
border: 0;
padding: 0;
margin: 0;
height: 48px;
width: 48px;
}
Чтобы реализовать такое, нужно применить стиль для селектора:
- .comments .comments-content .user.blog-author.
Например:
.comments .comments-content .user.blog-author {
background: url(...image/man.png) 5px 50% #eee no-repeat; /*картинка-иконка, положение, цвет фона, без повторения*/
border: 1px solid #ccc;
border-radius: 3px;
font: normal normal 14px Arial;
padding: 3px 5px 3px 25px; /*внутренние отступы [верх][право][низ][лево] - указываем с учетом размеров изображения иконки*/
margin-right: 5px;
}
- .user - селектор элемента с информацией о комментаторе - имя, ссылка и т.д. Пользуясь информацией из этого элемента, можно при помощи CSS сделать простые статусы в комментариях блога, для всех посетителей. background: url(...image/man.png) 5px 50% #eee no-repeat; /*картинка-иконка, положение, цвет фона, без повторения*/
border: 1px solid #ccc;
border-radius: 3px;
font: normal normal 14px Arial;
padding: 3px 5px 3px 25px; /*внутренние отступы [верх][право][низ][лево] - указываем с учетом размеров изображения иконки*/
margin-right: 5px;
}
©http://magentawave.comВот и все, теперь комментарии админа блога оригинальны и их не спутаешь с другими. Если кому приглянулись картинки, вот те что использовались в примерах:
Только не забудьте перезалить к себе на хостинг или в черновик.
Пишите отзывы делитесь впечатлением.
А ведь я и не задумывалась зачем этот значок. Сама не использую, вот у других и не смотрела.
ОтветитьУдалить-moz-border-radius: 3px 3px 3px 3px; - так не надо
border-radius: 3px; - это свойство понимается без префиксов.
Кстати, мне нравится оформление комментов в отдельные блоки. У себя пробовала - не понравилось. А здесь аккуратно получилось, поскольку ширина не большая
Удалить"-moz-border-radius: 3px 3px 3px 3px; - так не надо" - покуда есть люди которые до сих пор сидят на FF 3.6 и даже ниже (разных мод-ций), то пожалуй надо, хуже от этого не будет. Хаки если пишутся, то пишутся ко всему, либо не пишутся вовсе - это мое мнение, хотя бывает пренебрегаю :)
УдалитьНа любой ширине все делается, на том блоге (с которого скрин в посте) я вообще стараюсь, где можно, все размеры только в % делать, так что он у меня "резиновый", на всех мониторах будет как положено - почти одинаковый :)
а получилось, побывала на тестовом блоге, я там все эксперименты провожу. Немного не угадала размером иконки админа, надо поменьше, ну с этим поплясать можно будет позже и с цветом уже на основном. Спасибо.
ОтветитьУдалитьКак для меня любителя всяких примочек очень даже нужная вещь)
как заменить капчу
ОтветитьУдалить1. Зачем она вообще нужна?
Удалить2. Вопрос к админам Blogger
Как у вас здорово получилось со вставочками "администратор, безликий, читатель, и т.д."! Я попыталась найти информацию о том как это реализовать у себя, но не нашла... подскажите пожалуйста. Очень хочется подобную красоту себе!
ОтветитьУдалитьЭто ноу-хау, моё :) Проходят последние тесты и статья на днях будет в блоге. Следите за обновлениями.
УдалитьКлассная идея!!! Я в восторге :) Жду с нетерпением, надеюсь будет не так сложно :)
УдалитьА за обновлениями я всегда слежу! ;)
Доброй ночи MagentaWAVE!
ОтветитьУдалитьСкажите пожалуйста, а можно так сделать для линейных комментариев???
В древовидных все получилось, но не нравится, что расположение "лесенкой" да еще и не ровной.
Вот и возник вопрос как это сделать. Может нужно добавить класс какой-то дополнительно?
Спасибо!
Можно , но там все немного по-другому пост как раз на подходе на эту тему
УдалитьСпасибо за ответ. Суть я поняла. Теперь сама сделаю.
ОтветитьУдалитьОтличная статья! Все получилось. Вот только раздражает ссылка на профиль автора в комментах. Не подскажите как ее убрать? А то мне тут говорили, что ее в древовидных комментах вообще теперь нельзя убрать. И еще как избавиться от ссылки на даты отправки комментов? Нигде не могу найти. Раньше помню в линейных комментах это было просто сделать, а сейчас не знаю как.
ОтветитьУдалитьЯ лично советую вообще не парится по этому поводу. Но если это критично, то все также - с помощью скриптов, напрямую - никак, так что не парьтесь; особой нужды в этом нет; спам отсеивайте с помощью фильтра и все будет тип-топ, не ведитесь на"паранойю", поверьте, это не так уж важно...
Удалить