DLE заготовка под комментарии

Комментарии это та часть шаблона которую более всего впадло делать, а еще как правило дизайна комментарив у заказчика нет и приходится делать самому.

Перед Вами чистый шаблон комментарив с микроразметкой для шаблона DLE - остается подогнать немножко стили под себья. Поля специально не оформлял в CSS - так как они, как правило, определяются стилями по умолчанию.

--

- панель входа ДЛЕ

--

Коментарии DLE:

fullstory.tpl

                <!-- Комментарии -->
                    <div class="clear str-50"></div>
                    [comments]<h4>Читать комментарии</h4><div class="clear str-30"></div>[/comments]                    
                    <ol class="comment-list">{comments}</ol>
                    <div class="clear str-30"></div>
                    	[comments]<h4>Все комментарии?</h4>[/comments]
                    	[not-comments]<h4>Оставь свой комментарий</h4>[/not-comments]
                    	{addcomments}
                    <div class="clear str-30"></div>
                    	{navigation}
                    <div class="clear str-30"></div>                    
                 <!-- / Комментарии -->

comments.tpl

        <li class="comment" id="{comment-id}" itemprop="comment" itemscope itemtype="http://schema.org/Comments">            
            <div class="comment-author" itemprop="creator" itemtype="http://schema.org/Person">
                <img src="{foto}" />
                <div itemprop="name">{author}</div>
            </div>            
            <div class="comment-txt">
                [available=lastcomments|search]<h3 class="title"><a href="{news-link}#{comment-id}">{news_title}</a></h3>[/available]
                <span itemprop="datePublished" content="{date=Y-m-j}" datetime="{date=Y-m-j}T{date=H:i}" title="{date=j F Y} at {date=H:i}">{date=j F Y}at{date=H:i}</span>
                <div class="comtxt-tekst" itemprop="text">{comment}</div>
                <div  class="com-edit" itemprop="comment-edit">
                	[fast]<s>Цитировать</s>[/fast]
					[treecomments][reply]<s>Ответить</s>[/reply][/treecomments] 
					[com-del]<s>Удалить</s>[/com-del]
					[complaint]<s>Жалоба</s>[/complaint]
                    [not-group=5]<s>[com-edit]редакт.[/com-edit]</s> <s>{mass-action}</s>[/not-group]                    
                </div> 
                <meta itemprop="discusses" content="{comment limit="66"}" />
           		<link itemprop="url" href="{news-link}#{comment-id}">
            </div>
        </li>

addcomments.tpl

		<div class="commadd">		
			[not-logged]
				<div class="commadd-kto">
					<input placeholder="Ваше имя" type="text" name="name" id="name" class="wide" required>
					<input placeholder="Ваш e-mail" type="email" name="mail" id="mail" class="wide">
				</div>
			[/not-logged]
            <div class="commadd-editor">{editor}</div>
			<div class="commadd-nuz">
    			[recaptcha]<div class="commadd-recapcha">{recaptcha}</div>[/recaptcha]
				[question]
					<div class="commadd-vopros">
						<label for="question_answer">{question}</label>
						<input placeholder="Ответ" type="text" name="question_answer" id="question_answer" class="wide" required>
					</div>
				[/question]
				[sec_code]
    			<div class="commadd-capcha">
                    {sec_code}
					<input placeholder="Повторите код" title="Введите код указанный на картинке" type="text" name="sec_code" id="sec_code" required>
				</div>
				[/sec_code]
				<button class="btn" type="submit" name="submit" title="Отправить комментарий">Отправить комментарий</button>
			</div>
		</div>

Базовые стили css:

/*Комментарии*/
.comment, .com-edit, .mass_comments_action, .commadd-kto, .commadd-nuz {display:flex; flex-flow: row wrap; justify-content: space-between;}
.comment img {max-width:100%;}
.comment-author{width:18%;}
.comment-txt {width:80%;font-size:16px;}
.comment-txt > span {font-size:.7em;}
.comtxt-tekst, .commadd-kto > input, .commadd textarea {font-size:1.3em; font-weight:400; margin:0; padding:10px 20px; border-radius:5px; background:#271e42;}
.com-edit {font-size:.7em; }
.com-edit > s {display:block; padding:5px 15px;}
.mass_comments_action {margin-top:20px; padding-top:10px; border-top: 1px solid #110d1e; justify-content: end;}

/*Добавить Комментарии*/
.commadd {margin:10px 0;}
.commadd-kto > input{display:block; width:48%; color:#fff; margin:10px 0;}
.comments_subscribe {display:block; margin-top:-10px;}
.comments_subscribe input {float:left; margin:4px 10px 0 0;}
.commadd button {padding:13px 20px 10px 20px; text-transform:uppercase;border-radius:5px; line-height:1;}

! * - это строка разделения высотой 30рх - стили здесь

<div class="clear str-30"></div>