Настройка и оформление (Темизация) комментариев в Drupal

Если вас не устраивает внешний вид вывода комментариев в шаблоне вашей темы вы можете настроить и оформить их на свой вкус, для этого скопируйте базовые шаблоны в папку вашей темы(/sites/all/themes/ваша тема).

Базовыми шаблонами для комментариев в Drupal являются файлы comment.tpl.php и comment-wrapper.tpl.php.

Оригиналы файлов базовых шаблонов comment.tpl.php и comment-wrapper.tpl.php по умолчанию находятся в /modules/comment/comment.tpl.php и соответсвенно /modules/comment/comment-wraper.tpl.php.

Фаил comment.tpl.php отвечает за вывод отдельного комментария, а фаил comment-wraper.tpl.php отвечает за вывод списка комментариев.

Если вы будете редактировать выше перечисленные файлы то ваши изменения будут применятся ко всем комментариям на всем сайте. А что делать если нужно сделать разные комментарии для разных типов материалов ?

В таком случае вам нужно будет создать шаблон комментария для конкретного типа материала, который будет иметь следующий вид: comment—<имя нужного вам типа материала>.tpl.php

 comment—<имя нужного вам типа материала>.tpl.php позволит изменить шаблон для всех комментариев принадлежащих к материалам указанного типа.

Например вы решили сделать разный вид вывода для комментариев типа blog и типа forum, следовательно нужно создать два файла в папке вашей темы:  comment—blog.tpl.php и comment—forum.tpl.php

Далее давайте рассмотрим переменные которые могут пригодиться для редактирования базовых шаблонов:

Стандартные переменные шаблона comment.tpl.php:

  • $author — автор комментария.
  • $content — массив полей комментария.
  • $created — дата и время создания комментария.
  • $changed — дата и время публикации комментария.
  • $classes, строка — CSS классы применяемые к комментарию. Используется для стилизации, по умолчанию содержит следующие варианты:
    • comment — тип шаблона
    • comment-by-anonymous- комментарий не авторизованного пользователя.
    • comment-by-node-author — комментарий автора материала, к которому оставлен комментарий.
    • comment-preview — предпросмотр и редактирование комментария.
    • comment-unpublished — неопубликованный комментарий.
    • comment-by-viewer — комментарий оставленный текущим пользователем (для авторизованных пользователей).
    • comment-new — комментарий оставленный после последнего визита (для авторизованных пользователей).
  • $new- если ИСТИНА, то комментарий новый.
  • $permalink — ссылка-якорь на комментарий.
  • $submitted — информация о публикации комментария, содержит имя автора и время публикации комментария.
  • $picture — аватар автора комментария.
  • $signature — подпись автора комментария.
  • $status — статус комментария. Может принимать значения: comment-published, comment-unpublished или comment-preview.
  • $title — заголовок комментария, в виде ссылки-якоря.
  • $title_prefix, массив — содержит текст для вывода перед заголовками.
  • $title_suffix, массив — содержит текст для вывода после заголовков.

Переменные шаблона comment.tpl.php используемые для связи:

  • $comment- комментарий.
  • $node- материал, к которому относится комментарий.

Прочие переменные шаблона comment.tpl.php:

  • $classes_array, массив — CSS классы.

Стандартные переменные шаблона comment-wrapper.tpl.php:

  • $content, массив — массив связанных данных материала. Используйте  render($content) для вывода всех данных или render($content[‘comment_form’]) для вывода частей.
  • $classes, строка — CSS классы одной строкой, применяемые для контекстноых стилей. Для ищменения используйте переменную $classes_array в препроцессинге. Значение по умолчанию «comment-wrapper». Текущий тип шаблона «theming hook».
  • $title_prefix, массив — содержит данные для вывода перед заголовками.
  • $title_suffix, массив — содержит данные для вывода после заголовков.

Следующие переменные шаблона comment-wrapper.tpl.php предназначены дляконтекстной информации:

  • $node- материал, к которому относятся комментарии.

Константы шаблона comment-wrapper.tpl.php:

  • $display_mode — режим отображения комментариев:
    • COMMENT_MODE_FLAT — отображать списком.
    • COMMENT_MODE_THREADED — отображать деревом.

Прочие переменные шаблона comment-wrapper.tpl.php:

  • $classes_array, массив — CSS классов. Преобразуются в строку сохраняясь в $classes.

Ну и небольшой бонус напоследок.

Если вам нравиться вид комментариев как на изображение выше, скачайте архив распаковав его вы найдете в нем следующие файлы и папки:

  • img (папка) — содержит изображение иконок, скопировать папку в корень вашей темы(www.ваш_сайт.ru/sites/all/themes/ваша тема)
  • templates/comment-wrapper.tpl.php — скопировать одноименную папку в корень вашей темы если таковая имеется либо в корневую папку темы (www.ваш_сайт.ru/sites/all/themes/templates/ваша тема или www.ваш_сайт.ru/sites/all/themes/ваша тема)
  • templates/comment.tpl.php — расположение такое же как и у предыдущего файла (www.ваш_сайт.ru/sites/all/themes/templates/ваша тема или www.ваш_сайт.ru/sites/all/themes/ваша тема)
  • comments.css — скопируйте в корень вашей темы или в папку css если таковая имеется, при этом не забудьте вставить следующую строку stylesheets[all][] = comments.css или stylesheets[all][] = css/comments.css соответствено в файл имя_вашей_темы.info , либо откройте фаил styles.css вашей темы и вставьте в него следующий код:
				
					/*-----------------------------comments styles--------------------------------- */
#comments {
 margin-left: 40px;
}
 
#comments ul.links{
 margin: -10px 0px 0px 0px;
 padding: 0px;
 text-align: right;
 display: block;
}
 
#comments ul.links li{
 margin-right: 3px;
 padding: 2px 0px 2px 20px;
}
 
.comment{
 margin-bottom:20px;
}
 
.comment-content{
 padding: 10px;
 position: relative;
}
 
.arrow {
 height: 0;
 width: 0;
 position: absolute;
 top: 10px;
 left: -28px;
}
 
.arrow-border {
 height: 0;
 width: 0;
 position: absolute;
 top: 10px;
 left: -38px;
}
 
.comment .user-picture img{
 float: left;
 margin: 0px 10px 2px 0px;
}
 
.comment h3{
 margin-bottom: 5px;
}
 
.comment .submitted{
 margin-bottom: 10px;
}
 
.user-signature p{
 margin-top:3px;
}
 
/*----------------------------Look & Feel---------------------------------- */
 
li.comment-add, li.comment-reply{
 background: url(../img/icons/comment_add.png) no-repeat left center;
}
 
li.comment-delete{
 background: url(../img/icons/comment_delete.png) no-repeat left center;
}
 
li.comment-edit{
 background: url(../img/icons/comment_edit.png) no-repeat left center;
}
 
li.comment-forbidden{
 background: url(../img/icons/block_16.png) no-repeat left center;
}
 
.arrow{
 border-style: solid;
 border-width: 15px;
}
 
.arrow-border{
 border-style: solid;
 border-width: 15px;
}
 
.odd .comment-content{
 border: 8px solid #dff0fc;
 background: #f2f9fe;
}
 
.even .comment-content{
 border: 8px solid #e8e8e8;
 background:#f6f8f9;
}
 
.odd .arrow{
 border-color: transparent #f2f9fe transparent transparent;
}
 
.even .arrow{
 
 border-color: transparent #f6f8f9 transparent transparent;
}
 
.odd .arrow-border{
 border-color: transparent #dff0fc transparent transparent;
}
 
.even .arrow-border{
 border-color: transparent #e8e8e8 transparent transparent;
}
 
.comment .submitted{
 font-size: 0.9em;
}
 
.user-signature{
 
 font-style:italic;
 color: #979696;
}
#content .inline li{
 padding-left: 25px !important;
}
				
			

На этом все. Всем удачи!

 

Если для стандартного типа материала Page, то нужно перейти по следующему пути: Структура » Типы материалов » Страница(или ваш тип материала), затем перейти на вкладку: «Поля комментария» найти поле Comment и нажать изменить, преименовать метку поля на нужное название

Сылка для правки полей комментария типа материала Page: /admin/structure/types/manage/page/comment/fields

С фоном тоже все просто, фон комментариев задается через css проверте в вашей теме названия класса в котором размещается каждый комментарий и задайте ему фон к примеру: background: #f6f8f9 none repeat scroll 0 0;

Свежие записи
Команда RD

Команда RD и RMDIR позволяют удалять как каталоги, так и

Оборудование
help2site
Сокет центрального процессора и его виды

Socket одно из основополагающих понятий, когда речь идет о сборке компьютера. Наверно каждый начинающий пользователь ПК при попытки собрать компьютер или сменить процессор задавался вопросом,

Windows
help2site
Как исправить ошибки при обновлении Windows 10

Столкнуться с такой проблемой, как ошибки при обновлении Windows 10, приходилось многим пользователям, устанавливающим актуальную версию системы. Притом, что компания Microsoft часто выпускает новые патчи,

iOS
help2site
Installous для айпад обзор

Installous поможет вам установить взломанные программы из appStore бесплатно. Я думаю не каждый захочет устанавливать взломанные игры или приложения на свой Айпад , безусловно выбор только за вами. Установка

Оборудование
help2site
Замена термопасты

Оглавление Что такое термопаста? И зачем нужна замена термопасты? Термопаста – это пластичное вязкое вещество, хорошо проводящее тепло, предназначенное для обработки процессоров и других рабочих