
Итак, идём во вкладку шаблон-изменить HTML. Обязательно делайте резервную копию шаблона. А вдруг что-то пойдёт не так. Находим строку ]]></b:skin> и сразу над ней устанавливаем следующий код.
.comments{clear:both;margin-top:10px;margin-bottom:0;background:#FFF;border:1px solid #DDD;padding:10px 5%}
.comments h4{font:normal normal 25px oswald}
.comments ol{list-style:none;counter-reset:trackit;margin:0}
.comments li.comment{list-style:none;position:relative;counter-increment:trackit;clear:both}
.icon.user.blog-author:after{content:"АВТОР";position:absolute;top:.4em;left:1em;color:rgba(112,153,182,0.97);font-size:70%}
.comments .comment-block:before{content:counters(trackit,".");position:absolute;float:none;z-index:10000;left:-1.9em;top:1.2em;bottom:inherit;background:#A9C5CC;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:20px;color:#F7FCFF;text-align:center;clear:both;margin:0;padding:8px 12px}
.comments .comment-replies .comment-block:before{content:;position:absolute;right:.5em;left:inherit;top:inherit;bottom:.5em;float:none;z-index:10000;background:rgba(0,0,0,0);border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:2rem;color:rgba(161,186,201,0.36);padding:8px 7px}
.comment-header{background:#DCE4EB}
.comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:5px 5px 10px;padding:0 10px 0 75px}
.comments .comments-content .comment-replies .comment-block{position:relative}
.comments .comments-content .comment-replies{margin-left:2em;margin-top:1em;clear:both;padding:0}
.comments .comment-thread.inline-thread{background:rgba(0,0,0,0);padding:0 0 0 2em}
.comments .comment-replies .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 3em}
.comments .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 2em}
.comment-actions{position:absolute;left:4.5em;bottom:.5em;font-size:18px;padding:0}
.comments .comment .comment-actions a{padding-right:5px;padding-top:5px;margin:0}
.comments .comments-content .user a{color:#8B969E}
.comments .comments-content .user{font-style:italic;font-weight:400;color:#FFF;font-size:18px;text-shadow:1px 1px 1px #FFF}
.comments .comments-content .datetime,.comments .comments-content .datetime a,.comments .comments-content .datetime a:hover{margin-left:6px;float:right;text-transform:uppercase;font-size:12px;font-family:arial;font-weight:700;color:#237DAC}
.comments .avatar-image-container{background:#FFF;margin-left:0;max-height:70px;max-width:70px;overflow:hidden;width:70px;height:70px;position:absolute;left:25px;top:55px;z-index:10;border:1px solid #DDD;padding:3px}
.comments .avatar-image-container img{max-width:70px;max-height:70px;min-height:70px;min-width:70px}
.comments .thread-toggle{display:none}
.comments h4{font:normal normal 25px oswald}
.comments ol{list-style:none;counter-reset:trackit;margin:0}
.comments li.comment{list-style:none;position:relative;counter-increment:trackit;clear:both}
.icon.user.blog-author:after{content:"АВТОР";position:absolute;top:.4em;left:1em;color:rgba(112,153,182,0.97);font-size:70%}
.comments .comment-block:before{content:counters(trackit,".");position:absolute;float:none;z-index:10000;left:-1.9em;top:1.2em;bottom:inherit;background:#A9C5CC;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:20px;color:#F7FCFF;text-align:center;clear:both;margin:0;padding:8px 12px}
.comments .comment-replies .comment-block:before{content:;position:absolute;right:.5em;left:inherit;top:inherit;bottom:.5em;float:none;z-index:10000;background:rgba(0,0,0,0);border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:2rem;color:rgba(161,186,201,0.36);padding:8px 7px}
.comment-header{background:#DCE4EB}
.comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:5px 5px 10px;padding:0 10px 0 75px}
.comments .comments-content .comment-replies .comment-block{position:relative}
.comments .comments-content .comment-replies{margin-left:2em;margin-top:1em;clear:both;padding:0}
.comments .comment-thread.inline-thread{background:rgba(0,0,0,0);padding:0 0 0 2em}
.comments .comment-replies .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 3em}
.comments .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 2em}
.comment-actions{position:absolute;left:4.5em;bottom:.5em;font-size:18px;padding:0}
.comments .comment .comment-actions a{padding-right:5px;padding-top:5px;margin:0}
.comments .comments-content .user a{color:#8B969E}
.comments .comments-content .user{font-style:italic;font-weight:400;color:#FFF;font-size:18px;text-shadow:1px 1px 1px #FFF}
.comments .comments-content .datetime,.comments .comments-content .datetime a,.comments .comments-content .datetime a:hover{margin-left:6px;float:right;text-transform:uppercase;font-size:12px;font-family:arial;font-weight:700;color:#237DAC}
.comments .avatar-image-container{background:#FFF;margin-left:0;max-height:70px;max-width:70px;overflow:hidden;width:70px;height:70px;position:absolute;left:25px;top:55px;z-index:10;border:1px solid #DDD;padding:3px}
.comments .avatar-image-container img{max-width:70px;max-height:70px;min-height:70px;min-width:70px}
.comments .thread-toggle{display:none}
Отмеченное слово АВТОР можно заменить своим ником или именем.
После установки нажмите на кнопку просмотр и если нет предупреждений, смело жмём сохранить. Бежим и смотрим, что получилось.
Так с помощью небольшого кода CSS изменили немного внешний вид комментариев.
Спасибо за ваш визит. Удачи всем и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
Добрый вечер! Ну и где пример посмотреть, как это все выглядит?! (посмотрите какую ссылку вы поставили). Виктория, поздравляю Вас с наступающим 8 марта.
ОтветитьУдалитьВика привет. У тебя ссылка примера дана админки блоггер. Меня перекинуло к себе в панель. Хотелось бы посмотреть результат.
ОтветитьУдалитьОльга Иван, спасибо за внимание, исправила положение вещей.
УдалитьИван спасибо тебе за поздравления.
Оля тебя с праздником. Всех всех благ.
Виктория! Какая Вы умница! Красиво смотрятся комментарии! Но можно без этого обойтись! Я лишний раз боюсь менять шаблон блогов.
ОтветитьУдалитьА резервная копия шаблона где сохраняется? Если что-то не получится, как ей воспользоваться? СПАСИБО!
ОтветитьУдалитьИрина, да, всего что предлагается в блог не натыкаешь. А резервная копия сохраняется в компьютере в загрузках.
УдалитьУже сделала, спасибо за шпоргалку. Только когда я установила код над ]]>, то он не заработал, а когда разместила в секции /* Comments, то получилось.
ОтветитьУдалитьНемного уменьшила аватары, у больших плохое качество.
Спасибо за поздравления! Тебе тоже всего наилучшего. Цветов, радости и желания творить!
Это тебе спасибо, что ты у нас есть!
Спасибо,Олеся. Как приятно слышать такие тёплые слова. Кстати, ты умница. Можно и так как ты сделала.
УдалитьВика, привет, заметила, что аватар - анонимный (помнишь мы как-то в одной из шпаргалок вставляли такой код - .comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] { content: url( http://s019.radikal.ru/i644/1504/53/5135d81ee1af.png); }) не работает. Когда анонимный или имя-URL, то просто пустое окошечко. Может эту строчку надо вставить куда-то в определенное место?
УдалитьОлеся.С этими комментариями вообще полный п...дец. Я у тебя это в блоге давно заметила. отпишусь на неделе.
УдалитьЯ заметила, что когда нажимаешь опубликовать комментарий, то слетают все картинки, в гаджетах, вместо них "черные квадраты Малевича" и появляются только при переходе на главную страницу. Это не только у меня? Проверь, пожалуйста, у тебя тоже так происходит.
УдалитьСпасибо за помощь!
Олеся, да у тебя чёрные квадраты. Но они и на главной не отображаются. Проверила у себя- всё нормально.
УдалитьСмотри-во-первых ты в коде поставила лишнюю скобку в конце. Вот так он должен выглядеть .comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] { content: url( http://s019.radikal.ru/i644/1504/53/5135d81ee1af.png); } Кстати, я вообще у тебя в коде такой не вижу.
Статья про это здесь. http://www.shpargalochki.ru/2015/04/ikonka-anonimnog-kommentatora.html
И ещё мне кажется, что ты с комментами у себя столько всего налепила в шаблоне, и смайлы, и коды для картинок, и стили и аваторы анонима. У тебя вообще сам гаджет последние комментарии не отображался и кнопка форма связи. Сейчас посмотрела всё ОК. Такое бывает с ними. Понаблюдай.
Да уже не до аватаров, сейчас ответила на коммент, опять черные квадраты. Может глянешь мой /* Comments
Удалить----------------------------------------------- */
Может там что-то лишнее? Можно прислать?
Хотя, знаешь,пропадают ведь не все картинки, а только те, которые с появляющимся описанием и конвертик формы связи. Наверное, какой-то конфликт в шаблоне получается?
УдалитьПопробуй убрать это стиль новых своих комментарие. Хотя это всего лишь CSS и не должен так влиять. Сейчас ещё гляну шаблон.
УдалитьСкорее всего глюк пошёл от того, что ты код этот поставила в стилях комментариев а не перед ]]> и ошибку в этом коде у теб я нашла. Пишу в личку.
УдалитьУдалила стили, ничего не изменилось, так же слетают картинки при публикации. Установила стиль назад. Буду вспоминать, что делала до этого, может где какую скобку лишнюю или добавила или удалила.
УдалитьОлеся, я вижу ты много всего за последнее время понаставляла и поменяла. Попробуй так. Скопируй по очереди код какого-нибудь баннера. Удали его. Если ситуация не меняется, копируй следующий, и так далее. пока всё не будет ОК. Потом поймёшь из за чего-ставь обратно.
УдалитьДа, спасибо, Вика, так и сделаю! Хорошего дня!
УдалитьНаконец, исправила косяк в комментах, уже стало напрягать, что после того, как отправил коммент, сайт зависал.
ОтветитьУдалитьПришла мысль, взять кусок кода, отвечающий за комменты, из тестового блога, у которого такой же шаблон. Оказалось, что куска какого-то не хватало. Интересно, почему?)))
Теперь все отлично!
Олеся, наконец-то разобралась. Лучше позже чем никогда. Поздравляю.
Удалить