Настройка и оформление (Темизация) комментариев в 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 позволяют удалять как каталоги, так и

Web-Дизайн
help2site
Разделы документа в HTML 5.1

Это перевод статьи «Document Outlines in HTML 5.1», опубликованной на bitsofco.de. Оригинальную статью можно прочитать здесь. В стандарте HTML 5.1. есть определённое количество изменений, два из которых

Windows
help2site
Windows 7 сбой черный экран смерти

«Черный экран смерти» (KSOD), по-видимому, пришел на смену «синему экрану смерти» (BSOD), знакомому многим пользователям Windows. Сообщается, что последние обновления системы безопасности Microsoft, выпущенные 25

Оборудование
help2site
Материнская плата

Эта плата, та основа с помощью которой объединяются и совместно функционируют остальные комплектующие (части) компьютера. Слот PCI — используется для подключения различных плат, таких как

Mac OS
help2site
Как сбросить Mac до заводских настроек

В этой статье мы разбиремся — Как сбросить Mac до заводских настроек. Обычно потеря всей информации с жесткого диска вызывает у людей негативные чувства, но иногда

Web-Дизайн
help2site
Расчёт расстояния при помощи API Карт Яндекс

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