Опубликовано 4.06.2012, 21:02 by Jerry в разделе DLE / Хаки5

Оформляем вывод комментариев

Делаем вид комментариев более симпатичным.
Оформляем вывод комментариев

К сожалению не помню уже с какого шаблона взял, но скажем все вместе автору - Спасибо! :)

Заменяем всё содержимое файла comments.tpl на это:

<div id="dle-comments-list">
<div class="comment-block">
<div class="comment-block-left">

		<img src="{foto}" alt="" />

	</div>

	<div class="comment-block-right">

		<div class="comment-block-right2">

			<div class="comment-text">

				<div class="comment-text-title">

					{mass-action} [online]<img src="{THEME}/images/online.png" style="vertical-align: middle;" title="Пользователь Онлайн" alt="Пользователь Онлайн" />[/online][offline]<img src="{THEME}/images/offline.png" style="vertical-align: middle;" title="Пользователь offline" alt="Пользователь offline" />[/offline] {author} {date} | Комментариев: {comm-num} | Публикаций: {news-num}

				</div>

				{comment}<br />
[signature]<br clear="all" /><div class="signature">--------------------</div><div class="slink">{signature}</div>[/signature]
				<div class="comment-text-more">[fast]Ответить[/fast] [complaint]Жалоба[/complaint] [com-edit]Изменить[/com-edit] [com-del]Удалить[/com-del]</div>

			</div>		

		</div>

	</div>

</div></div>


В styles.css прописываем:
/* Вид комментария */
.comment-block {
	clear: both;
	margin: 0 0 10px 0;
	position: relative;
	padding: 5px 5px 5px 100px;
	
	background: #f4f4f4;
	border: 1px #d3d3d3 solid;
	border-radius:7px; 
	-webkit-border-radius:7px; 
	-moz-border-radius:7px;
}

	.comment-block-left {
		width: 85px;
		height: 85px;
		overflow: hidden;
		position: absolute;
		left: 5px;
		top: 5px;
		background: #fff;
		border-radius:7px; 
		-webkit-border-radius:7px; 
		-moz-border-radius:7px;
		padding: 7px;
		border: 0;
		border: 1px #e5e5e5 solid;
	}
	
		.comment-block-left img {
			max-width: 85px;
		}
		
	
	.comment-block-right {
		margin: 0 0 0 10px;
		position: relative;
		padding: 0px 0 0 0;
	}
	
		.comment-block-right2 {
			
		}
		
			.comment-text {
				background: #fff;
				border: 1px #e5e5e5 solid;
				padding: 7px;
				border-radius:7px; 
				-webkit-border-radius:7px; 
				-moz-border-radius:7px;
				color: #7b7b7b;
				line-height: 17px;
				font-size: 11px;
			}
			
				.comment-text a {
					color: #000;
				}
				
					.comment-text a:hover {
						text-decoration: none;
					}
			
				.comment-text-title {
					border-bottom: 1px #ebebeb dotted;
					padding: 0 0 5px 0;
					margin: 0 0 5px 0;
					color: #333;
				}
				
					.comment-text-title a {
						color: #3fadc8;
					}
					
						.comment-text-title a:hover {
							text-decoration: underline;
						}
						
				.comment-text-more {
					padding: 3px 0 0 0;
					font-size: 11px;
					color: #d3d3d3;
					border-top: 1px #ebebeb dotted;
				}
				
					.comment-text-more a {
						color: #d3d3d3;
					}
					
						.comment-text-more a:hover {
							color: #000;
						}

.comment-block .bbcodes, .mass_comments_action .bbcodes, .news-item-content .editor input, .news-item-content input {
	background: #fff;
	border: 1px #ccc solid;
	color: #333;
	border-radius:3px; 
	-webkit-border-radius:3px; 
	-moz-border-radius:3px;
	margin: 0;
	cursor: pointer;
}


Вот и всё! :)
Пример когда был на данном сайте... :)


Добавить комментарий

5 Комментариев

  1. Jerry Пользователь offline автор
    test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-
    test-test-test-test-test-test-test-test-test-test
  2. Jerry Пользователь offline автор
    marcelo, так сложно сказать, надо смотреть.
    возможно где-то margin или padding ненужный прописан...
    Скинь в ЛС ссылку.

Добавление комментария

Я бы хотел услышать Ваши мысли. Не стесняйтесь оставить свой комментарий и присоединиться к беседе!

Чей это блог?
Введите код: * Кликните на изображение чтобы обновить код, если он неразборчив