[MODX] Настройка стилей для комментариев Tickets

Все чанки стандартные для версии 1.8.2. Правки только в CSS. Примеры стилей на этом сайте:)

Вызов чанка

Чтобы удобнее было работать с tagElementPlugin. Если не знакомы с плагином, обазательно подключите его, и экономьте часы в своей ежедневной работе с MODX.

[[!TicketComments?
  &allowGuest=`1`
  &gravatarSize=`70`
  &tplCommentAuth=`tpl.Tickets.comment.one.auth`
  &tplCommentDeleted=`tpl.Tickets.comment.one.deleted`
  &tplCommentEmailBcc=`tpl.Tickets.comment.email.bcc`
  &tplCommentEmailOwner=`tpl.Tickets.comment.email.owner`
  &tplCommentEmailReply=`tpl.Tickets.comment.email.reply`
  &tplCommentEmailSubscription=`tpl.Tickets.comment.email.subscription`
  &tplCommentForm=`tpl.Tickets.comment.form`
  &tplCommentFormGuest=`tpl.Tickets.comment.form.guest`
  &tplCommentGuest=`tpl.Tickets.comment.one.guest`
  &tplComments=`tpl.Tickets.comment.wrapper`
  &tplLoginToComment=`tpl.Tickets.comment.login`
]]

Стили CSS

.comments{
  margin-top: 40px;
}
.comments > .title{
  font-size: 18px;
	font-weight: 500;
}
#comment-form .form-control{
	padding: 12px 20px;
	border: 3px solid rgba(0, 0, 0, 0.08);
  font-size: 1.2em;
  outline:none;
  font-family: inherit;
}
.ticket-comment #comment-form{
  margin-top: 40px;
}
#comment-form textarea.form-control{
  height: 160px;
}
#comment-form .form-control:focus{
  border: 3px solid #ffdd57;
}
#comment-form > .form-group{
  padding: 5px 0;
  display:flex;
	align-items: center;
}
#comment-form > .form-group label[for="comment-name"],
#comment-form > .form-group label[for="comment-email"],
#comment-form > .form-group label[for="comment-captcha"] {
	font-size: 1.2em;
	min-width: 70px;
	padding-right: 10px;
	display: inline-block;
}
#comment-form > .form-group > label[for="comment-name"]:after,
#comment-form > .form-group > label[for="comment-email"]:after,
#comment-form > .form-group > label[for="comment-captcha"]:after{
  content: ':';
}
#comment-form > .form-group > div{
  width: 100%;
}
#comment-captcha.form-control {
	width: 70px;
	text-align: center;
	padding: 7px 12px;
}
#comment-form > .form-group .error{
  padding: 0 10px;
}
.form-actions .preview,
.form-actions .submit {
	padding: 12px 25px 10px;
	background-color: #fff;
	border: none;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.5px;
	background-color: #ffdd57;
	color: #424242;
	font-family: inherit;
	border-bottom: 2px solid #e8cd63;
	outline:none;
	cursor: pointer;
}
.form-actions .preview {
	color: #000;
	font-weight: normal;
	background-color: #fff0b6;
	margin-right: 15px;
	border-bottom: 2px solid #e8d89a;
}
.form-actions .preview:hover,
.form-actions .submit:hover{
	border-bottom: 2px solid #c7ad44;
}



.ticket-comment-header > div,
.ticket-comment-header > img,
.ticket-comment-header > span{
  vertical-align: middle;
  display: inline-block;
}
.ticket-comment .ticket-comment-up,
.ticket-comment .ticket-comment-down{
  display: none;
}
.ticket-comment .ticket-comment-link a {
	color: #999;
}
.ticket-comment .ticket-comment-link{
  opacity: 0.4;
}
.ticket-comment .ticket-comment-body:hover .ticket-comment-link{
  opacity: 1;
}
.ticket-comment .ticket-comment-text{
  margin-top: 20px;
}
.ticket-comment .ticket-comment-body {
	margin-bottom: 12px;
	border: 1px solid #eaeaea;
	padding: 15px 15px 30px;
	position: relative;
}
.ticket-comment .comment-reply{
  margin-top: -26px;
  padding-left: 10px;
  position: relative;
  z-index: 2;
}
.ticket-comment .comment-reply a{
  padding: 3px 5px;
  background-color: #fff;
  font-size: 13px;
  color: #999;
  display: inline-block;
}
.ticket-comment .ticket-comment-guest .ticket-comment-author {
	color: #000;
	font-size: 1.1em;
	font-weight: 500;
}
.ticket-comment .ticket-comment-createdon{
  font-size: 0.9em;
}
.ticket-comment .ticket-comment-dot{
  right: 11px;
}
.ticket-comment .ticket-comment-header .ticket-comment-rating{
  display:flex;
}
.ticket-comment-rating .rating{
  order:2
}
.ticket-comment-rating i{
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  padding: 0 4px;
}
.ticket-comment-rating .vote.plus{
  color: #3ebc6b;
  order:1;
}
.ticket-comment-rating .vote.minus{
  color: #e01b1b;
  order:3;
}
.glyphicon-arrow-up:before{
  content: '+';
  display: inline-block;
}
.glyphicon-arrow-down:before{
  content: '-';
  display: inline-block;
}

Комментарии (2)

  1. Тест 22 декабря 2020, 16:10(Комментарий был изменён) # 0
    Авор, напиши как смог избавиться от двойной капчи
    1. Тест 07 сентября 2022, 00:37(Комментарий был изменён) # 0
      Как включить премодерацию? Все комменты появляются сразу же на сайте.
      *Комментарий будет опубликован после проверки модератором

      Похожие статьи

      Генератор настроек MIGX

      Документация на русском по MODX MIGX

      Подсказки по работе и заготовки для MiniShop2

      Импорт и экспорт в MiniShop2. Реализация 1

      Как включить HTTPS (SSL) в MODX - Подробная инструкция

      Генерация YML для выгрузки в маркет

      pdoPage и getImageList - Постраничная навигация MIGX

      Примеры работы с API MODX

      Расширение свойств товаров minishop2

      Примеры выборки where, optionFilters, innerJoin

      pThumb - ресайз изображений. Примеры использования.

      Примеры использования

      Сайт на обслуживании (выключить сайт)

      Вывести getImageList только если он не пустой

      Тип поля "Список ресурсов" (resourcelist) с ограничением по родителю (parents)

      Оформление и настройка easyComm. Комментарии и отзывы на сайте.

      Поиск на сайте с пакетом SimpleSearch

      Простая и симпатичная галерея fancybox

      Вывод tv-параметров в формате -

      Галерея. Вывести обложки альбомов и фотографии

      Подсчет и вывод количества потомков ресурса в MODX

      Добавить в письмо контактную информацию

      pdoResources Заготовки для работы

      Quip для MODX. Более рабочий вариант

      Отредактировать письмо о заказе - добавить ТВ поле, или что-то еще

      Сниппет для вывода размера и расширения файла

      Простой аудио-плеер HTML5

      Вывести список всех опций MiniShop2

      Изменить цену на товар в зависимости от количества при добавлении в корзину minishop2

      Как контролировать кэш CSS и скриптов

      Простейшая авторизация

      Слайдер Slick slider в контенте ресурса

      Подключить MODX в стороннем PHP файле

      Красивое адаптивное меню под pdoMenu

      Массово обновить ТВ, или другое поле через базу

      Изменить формат номера заказа

      Как создать ресурс процессором $modx->runProcessor('resource/create', $props)

      Создать свою страницу в админке

      Получить grandparent. Вывести родитель родителя

      Симпатичный список файлов, загружаемых к ресурсу через MIGX

      Создать источник файлов

      Установить шаблон по-умолчанию для новых, создаваемых ресурсов

      Сообщение о том, что сайт использует Cookie

      Вывести все доступные плейсхолдеры

      Отредактировать шаблон письма

      Добавить скрипт перед тегом body

      Создать раздел с паролем на сайте MODX

      Общая сумма по каждому товару в корзине Minishop2

      Что делать если ее приходит почта администратору

      Фильтрация по TV параметрам в msProducts

      Дата на русском

      FontAwesome - часто используемые иконки для шаблонов MODX

      Создать пакет с пользовательской таблицей

      Заготовки для работы

      Курсы валют с cbr.ru на PHP

      Обязательный чекбокс при оформлении заказа

      getResources заготовки

      Соответствие названия классов с названиями таблиц в MySQL

      Баннеры с использованием BannerY

      Загрузка сниппета после загрузки страницы через AjaxSnippet

      Разбить вывод pdoResources на несколько колонок (блоков)

      CSS для постраничной навигации pdoPage

      Обработка остатков заказа в miniShop2

      Счетчик посещений и скачиваний для сортировки ресурсов

      Расширить таблицу site_content (объект modResource) за 5 минут

      Вывести время загрузки (формирования) страницы

      Вырезать кавычки — фильтр-сниппет MODX

      Динамическое поле emailSubject в FormIt

      Бесплатная доставка от 5000 рублей в MiniShop2

      Скрыть информацию о том, что сайт работает на MODX

      Обновить alias (псевдоним) у всех ресурсов

      Отсортировать ресурсы по количеству комментариев Quip MODx

      Изменить цену на товар, если в корзине лежит товар из особой категории minishop2

      Вывести 404 ошибку по настройке TV MODX

      Создать редирект через autoRedirector API

      Ответ для сервиса moneta.ru

      Email сделать не обязательным полем

      Как разместить исходный код сниппета на сайте, в документации

      Ускорить установку MODX revo до пары кликов

      Постраничная навигация — набор параметров и CSS PdoPage

      Не работает подгрузка товаров ajax mfilter2 на мобильном

      Сделать поле размер обязательным

      Сделать все элементы статичными для Git и IDE

      Кастомный чанк для AdminPanel

      Настройка стилей для комментариев Tickets

      Подключить текстовой редактор к доп. полям ресурса

      Разместить корзину внутри блока с оформлением заказа

      Динамическая замена шаблона ресурса - плагин

      Cортировать по списку id в pdoResources и pdoTools

      Вывести список всех родителей в ТВ поле ресурса

      Вложенные условия в xPDO MODX

      Вывести список всех емэйлов miniShop2

      Если getParentIds не работает в плагине

      Как получить данные пользователя сразу после авторизации через API

      Плагин для формирования замороженных URL с редиректом

      Контролировать кэширование файлов CSS и JS MiniShop2

      xPDO Выборка из одной таблицы с зацепкой значения из другой

      Приветственный экран / заглушка на сайт

      Не приходят / не отправляются письма - в чем причина?

      Кэширование в MODX: использование $modx->cacheManager

      Наш сайт использует куки, нажмите «ОК» если вы не против
      OK