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

Windows
help2site
Отключаем всплывающие подсказки Windows

Операционная система Windows 7 устроена так, что зачастую пытается давать свои советы – как лучше пользоваться системой, по началу эти подсказки не заметны, однако опытных

Windows
help2site
Перегрев процессоров компьютера с ОС Windows 7

Последнее время на компьютерном рынке все больше появляются эффективные процессоры, создатели которых позаботились о том, чтобы они выделяли как можно меньше тепла. Однако даже современного

Игры
help2site
Играть бесплатно в игры Gaminator

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

Оборудование
help2site
Видеокарта её ядро и память

Видеокарта предназначена для вывода изображения на монитор, она отвечает за обработку графики. Цены на видеокарты колеблется от 1 тысячи рублей до 30 тысяч, современные видеокарты итого выше,

Windows
help2site
Загрузка Windows с флешки и настройка BIOS

Оглавление Настройка BIOS и загрузка Windows с флешки Процедура загрузки Windows с флешки после записи её на загрузочную USB-флешку достаточно проста. Задача вполне рядовая и

Программы
help2site
Lodash — функции будущего в JS уже сегодня

Каждый разработчик ценит свое время и всегда ищет способы избежать дублирования кода и написания одинаковых реализаций под различные проекты. Lodash — библиотека с огромным количеством

Web-Дизайн
help2site
Как отобразить webform в всплывающем окне

Сегодня хочу рассказать о простом способе как в Drupal отобразить веб-форму (webform) в сплывающем окне (pop-up окно). Для реализации данной задачи нам потребуются модули webform