У меня уже есть статья про то, как можно обозначить автора, а теперь я поделюсь фишкой как можно выделить и остальных участников дискуссии.
Итак, дамы и господа, мальчики и девочки, сейчас мы с вами будем делать простые статусы для комментаторов в комментариях Blogger-блога, с помощью CSS.
Для того чтобы без скриптов сменить аватарки по умолчанию в блоге, я использовал разделение селекторов по значению атрибутов. В данном случаи все примерно также, но немного круче.
Для понимания дальнейших действий, рассмотрим HTML-код опубликованного комментария, а точнее ту часть, которая касается его автора:
<div id="*****" class="comment-header" kind="m">
<cite class="user">
<a rel="nofollow"href="http://www.blogger.com/profile/..много циферов...">
Имя/Ник комментатора
</a>
</cite>
<span class="icon user"/>
<span class="datetime secondary-text">
</div>
Для реализации задуманного у нас есть блок <cite> с классом .user и тег <a> с атрибутом href, в котором значится ссылка, в данном случаи на профиль Blogger. Чтобы задать CSS для ссылки именно с таким значением атрибута href, селектор нужно записать так:<cite class="user">
<a rel="nofollow"
Имя/Ник комментатора
</a>
</cite>
<span class="icon user"/>
<span class="datetime secondary-text">
</div>
.comments .comments-content .user[class="user"] a[href*="www.blogger.com"] { ...
Таким образом можно выделить в комментариях соратников по любимой платформе :) .В комментариях автора блога, к тегу <cite>, кроме основного класса - .user, добавлен дополнительный - .blog-author и выглядит это так:
Если оставленный комментарий сделан с помощью аккаунта в WordPress(бесплатный домен wordpress.com), LiveJornal или другого, то и ссылка будет с доменом этих ресурсов. Это дает возможность задавать стили раздельно, используя для этого различия в значениях атрибута href. Комментарии, оставленные с помощью комбинации "Имя/URL", можно фильтровать просто по наличию или отсутствию ссылки - если записано только имя, то ссылки внутри тега <cite> не будет, а это тоже отличие.<cite class="user blog-author">
<a rel="nofollow"href="http://www.blogger.com/profile/....">
Имя/Ник автора блога
</a>
</cite>
Это позволяет фильтровать комментарии автора блога по дополнительному классу. Выглядит это так:<a rel="nofollow"
Имя/Ник автора блога
</a>
</cite>
.comments .comments-content .user[class*="blog-author"] a
И конечно главный вопрос, который волнует многих - Анонимный, что делать с этими скромняжками? Выход есть, но без скрипта тут не справится. Я лично решил эту проблему с помощью jQuery, подключить этот фреймворк не составит труда, после чего, чтобы решить вопрос с анонимами потребуется добавить скрипт длинной всего в одну строчку:
$(function(){
$(".user:contains('Анонимный')").addClass('anonymous').text('Секретный Агент');
});
Он найдет в теге с классом .user надпись "Анонимный" и заменит её, в данном случаи, на "Секретный Агент", а также добавит дополнительный класс - anonymous, для возможности отсортировать и добавить CSS свойства именно к комментариям оставленным анонимами.$(".user:contains('Анонимный')").addClass('anonymous').text('Секретный Агент');
});
Создавать строчку со статусом, будем с помощью псевдоэлемента :before для блока с классом .user.
Кое-что я отметил комментариями в коде CSS, но для большей наглядности забомбил такую схему:
- восклицательный знак "!" - свойство обязательно;
- знак вопроса "?" - можно указать свое значение;
Ну и конечно готовый CSS-шаблон, для древовидных комментариев:
.comments .comment-block {
position: relative; /*точно указываем относительное позиционирование для всего блока комментария*/
}
/*стили для блока со статусом*/
.comments .comments-content .user[class*="blog-author"] a:before,
.comments .comments-content .user[class="user"] a[href*="www.blogger.com"]:before,
.comments .comments-content .user[class="user"] a[href*="livejournal.com"]:before,
.comments .comments-content .user[class="user"] a[href*="wordpress.com"]:before,
.comments .comments-content .user[class="user"] a:before,
.comments .comments-content .user[class="user"]:before,
.comments .comments-content .user[class*="anonymous"]:before {
position: absolute; /*абсолютное позиционирование обязательно*/
right: 10px;
bottom: 10px;
border-width: 15px; /*ширина рамки, в данном случаи выполняет роль высоты всего блока; значение х 2 (15px x 2 = 30px)*/
border-style: solid;
border-color: #fff; /*цвет рамки, в данном случаи - цвет блока*/
-webkit-box-shadow: 0 0 5px 1px #666;
box-shadow: 0 0 5px 1px #666;
color: #000; /*цвет текста*/
font: normal normal 16px/1px Tahoma, Arial, sans-serif; /*1px в этой строку указан для вертикального выравнивания, это значение может быть любое, но должно быть обязательно*/
text-align: right; /*выравнивание текста по краю*/
letter-spacing: 0px; /*межбуквенный интервал, отрицательное значение - уменьшает*/
height: 0;
width: 50%;
}
.comments .comments-content .user[class*="blog-author"] a:before {
content: 'Администратор';
}
.comments .comments-content .user[class="user"] a[href*="www.blogger.com"]:before {
content: 'Соратник';
}
.comments .comments-content .user[class="user"] a[href*="livejournal.com"]:before {
content: 'Журналист';
}
.comments .comments-content .user[class="user"] a[href*="wordpress.com"]:before {
content: 'Конкурент';
}
.comments .comments-content .user[class="user"] a:before {
content: 'Гость';
}
.comments .comments-content .user[class="user"]:before {
content: 'Прохожий';
}
.comments .comments-content .user[class*="anonymous"]:before {
content: 'Скромник';
}
.comments .comments-content .comment-content {
margin: 0 5px 30px 0; /*внешний отступ блока с текстом комментария, 30px - отступ снизу, чтобы блок с подписью не налазил на текст*/
}
position: relative; /*точно указываем относительное позиционирование для всего блока комментария*/
}
/*стили для блока со статусом*/
.comments .comments-content .user[class*="blog-author"] a:before,
.comments .comments-content .user[class="user"] a[href*="www.blogger.com"]:before,
.comments .comments-content .user[class="user"] a[href*="livejournal.com"]:before,
.comments .comments-content .user[class="user"] a[href*="wordpress.com"]:before,
.comments .comments-content .user[class="user"] a:before,
.comments .comments-content .user[class="user"]:before,
.comments .comments-content .user[class*="anonymous"]:before {
position: absolute; /*абсолютное позиционирование обязательно*/
right: 10px;
bottom: 10px;
border-width: 15px; /*ширина рамки, в данном случаи выполняет роль высоты всего блока; значение х 2 (15px x 2 = 30px)*/
border-style: solid;
border-color: #fff; /*цвет рамки, в данном случаи - цвет блока*/
-webkit-box-shadow: 0 0 5px 1px #666;
box-shadow: 0 0 5px 1px #666;
color: #000; /*цвет текста*/
font: normal normal 16px/1px Tahoma, Arial, sans-serif; /*1px в этой строку указан для вертикального выравнивания, это значение может быть любое, но должно быть обязательно*/
text-align: right; /*выравнивание текста по краю*/
letter-spacing: 0px; /*межбуквенный интервал, отрицательное значение - уменьшает*/
height: 0;
width: 50%;
}
.comments .comments-content .user[class*="blog-author"] a:before {
content: 'Администратор';
}
.comments .comments-content .user[class="user"] a[href*="www.blogger.com"]:before {
content: 'Соратник';
}
.comments .comments-content .user[class="user"] a[href*="livejournal.com"]:before {
content: 'Журналист';
}
.comments .comments-content .user[class="user"] a[href*="wordpress.com"]:before {
content: 'Конкурент';
}
.comments .comments-content .user[class="user"] a:before {
content: 'Гость';
}
.comments .comments-content .user[class="user"]:before {
content: 'Прохожий';
}
.comments .comments-content .user[class*="anonymous"]:before {
content: 'Скромник';
}
.comments .comments-content .comment-content {
margin: 0 5px 30px 0; /*внешний отступ блока с текстом комментария, 30px - отступ снизу, чтобы блок с подписью не налазил на текст*/
}
Свойство border-color указывает цвет блока с подписью, оно обязательно. Если нужно чтобы была видна только подпись, без блока, то цвет для этого свойства нужно указать такой же как и у блока комментария.
Например, если цвет блока всего комментария зеленый, то и в значении для border-color нужно указать зеленый.
Прозрачный указывать нельзя.
Например, если цвет блока всего комментария зеленый, то и в значении для border-color нужно указать зеленый.
Прозрачный указывать нельзя.
На этом пока все, теперь вам остаётся только придумать прикольные статусы в соответствии с тематикой блога.
P.S. Я нашел комментарии только с ссылками для WP и LJ, других не нашел, если знаете, скиньте, дополню пост.
©http://magentawave.com
Ура! Дождалась выхода этой статьи! Будем разбираться, спасибо! Мне очень понравилось ваше оформление статусов комментаторов :)
ОтветитьУдалитьНаконец-то дописал, ели осилил :) В статье показана суть, оформление это тема для другой статьи, но по-этому поводу, впрочем, уже полно материала, называется CSS ленты, и уж не знаю смогу ли внести еще что-то полезное... :)
УдалитьОх уж это CSS :) Сделала, что смогла... Решила оставить только выделение автора блога. Пошла изучать ваши кнопки "вверх-вниз".
УдалитьТак в статье есть уже готовый стиль, просто оформление самое простое - чисто для примера.
УдалитьЗа это и спасибо! :) Я же не возмущаюсь, а наоборот, выражаю благодарность!
УдалитьСпасибо! Отличная статья. Давно хотел сделать выделение комментов и тут так подфартило.
ОтветитьУдалитьКстати, а "Скромный" это кто? Что нужно сделать, чтоб такая подпись была?
ОтветитьУдалить"Скромник" - в примере это Аноним, вы можете вписать любое слово(статус) какой подходит, на свой вкус или по теме блога.
УдалитьВ примере стиля выделены строки где указаны статусы, прочтите статью и просмотрите примеры кода. У вас все получится :)
добавил anonymous, но он не работает, все анонимные комменты идут в "Прохожий". В чем разница между "Прохожим" и "Безликим"? Сразу скажу, что скрипт добавил и подключил: правильно.
ОтветитьУдалитьhttp://perevirkablogu.blogspot.com/2013/09/blog-post_5303.htm
Страница пустая.
УдалитьПрошу прощения, Александр.
УдалитьПолный адрес страницы: http://perevirkablogu.blogspot.com/2013/09/blog-post_5303.html
Скрипт не выполняется, потому что допущены ошибки записи. Вам сюда
Удалитьhttp://www.magentawave.com/2013/03/how-connect-scripts.html#fore
И кстати, вместо "Секретный агент" можно писать все что угодно, это просто для примера :)
Спасибо за статью !!! Скрипт работает, потому что я исправил "Анонімний" на "Анонім"(сайт украинский). Не сочтите меня навязчивым, Александр, но у меня к Вам вопрос. Вы правильно посоветовали мне в последнем комментарии об ошибках записи. Но у меня не могут все скрипты находиться в одном блоке, тогда ни один не работает. Приходится каждый заключать в
Удалить//
, а это скорее всего большая нагрузка.
Подскажите, пожалуйста как установить в один блок, и чтобы работали все скрипты.
http://perevirkablogu.blogspot.com/2013/09/blog-post_5303.html
Никто не говорит что все, но те что вы добавляете самостоятельно объединить можно, но jquery отдельно, а нативный (обычный) JS отдельно. Каждый скрипт не нужно в секцию CDATA заключать, это можно сделать один раз.
УдалитьБолее подробно писал тут:
http://www.magentawave.com/2012/11/how-i-sped-up-my-blog.html
Здравствуйте, автор! а подскажите пожалуйста, как изменить в шаблоне "анонимный" на что-то другое? ну к примеру на тот же "секретный агент". Остальные правки не нужны, вот просто хочется анонимных изменить)
ОтветитьУдалитьПросто добавьте скрипт, который приведен в статье.
УдалитьКак добавить скрипт - http://www.magentawave.com/2013/03/how-connect-scripts.html
Здравствуйте,Александр! Хотелось бы вместо рамочки для админа и гостей записать backgraund-image как у вас. Заранее благодарю!
ОтветитьУдалитьУ меня нет картинок в коде, это оформление CSS-лентами, подробнее с примерами писал здесь:
Удалитьhttp://www.magentawave.com/2015/11/3d-css-ribbons.html
Спасибо, пойду посмотрю!
УдалитьНе смогла убрать поле в коде дизайна комментариев.И к какому классу привязать код ленты?
УдалитьВсе стили для блока со статусом, находятся в коде после строки:
Удалить/*стили для блока со статусом*/
Но чтобы вы долго не мучились, попробуйте так:
.comments .comments-content .user:before {
position: absolute;
right: 0;
bottom: 0;
border-width: 15px;
border-style: solid;
border-color: #684FA3 #684FA3 #684FA3 transparent;
font: normal normal 16px/1px Tahoma, Arial, sans-serif;
color: #fff;
text-indent: 15px;
text-shadow: 1px 1px 1px #000;
height: 0;
min-width: 60px;
max-width: 140px;
}
.comments .comments-content .user:after {
position: absolute;
content:'';
right: 0;
bottom: -10px;
border-width: 5px;
border-style: solid;
border-color: #3A2C5A transparent transparent #3A2C5A;
height: 0;
}
.comments .comments-content .user[class*="blog-author"]:before {
content:'Администратор';
}
.comments .comments-content .user:before {
content:'Гость';
}
Спасибо,Саша! Из двух статей и рекомендуемого кода ленты получилось! Смотрите http://prntscr.com/cliaov
ОтветитьУдалитьСаша,я поставила картинку для тех, у кого нет аватарок, теперь аватарки с прозрачным фоном накладываются на картинку. Как этого избежать?
ОтветитьУдалитьСмотрите здесь:
Удалитьhttp://www.magentawave.com/2013/03/change-standart-avatars-on-blogger.html
Оттуда я как раз взяла код
ОтветитьУдалить.avatar-image-container {
....
background: url(.../your-image.gif) 0 0 no-repeat;
}
чтобы закрыть картинкой пустые контейнеры. И все чудесно функционирует. Если есть у автора аватарка, она выводится поверх этой картинки.Только у некоторых это png с прозрачным фоном и видно подложку. Наверное по-другому не получится. То,что картинка должна уезжать и скрываться я не поняла.Можно конечно свою картинку убрать, чтобы не портить аватарки посетителей, но тогда у меня анонимусы будут пустыми. И почему-то Блоггеры и Google+ вместо Соратник пишет Гость.
В остальном все замечательно
В той статье написано же что это (тот способ, который вы использовали) "старый дедовский", т.е. не совсем подходящий для корректной замены аватарок. Используйте тот что описан в статье выше.
УдалитьP.S. Если не получается с кодом из конкретной статьи, то пожалуйста, задавайте вопросы под той статьей с кодом из которой возникли трудности.