[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;
}