День восьмой: страницы комментариев

journals_covers — 27.01.2010 К этому дню страницы большинства участников уже имеют практически законченый вид.
Вы выбрали ширину журнала, установили фоны, настроили вид сайдбара и ленты записей.
Вы сделали бОльшую часть работы, но это ещё не всё: помимо страницы ваших записей и ленты друзей есть ещё несколько страниц, по которым обычно редко ходят, но, тем не менее, их так же стоит привести в порядок.

Что за страницы?
Это страницы календаря (их несколько), список меток и страницы комментариев (если включены комменты в стиле журнала).

На самом деле, все эти страницы наследуют общее оформление журнала, но на них есть элементы, которые нам до сих пор не попадались, и кодов для них у вас пока нет.

Сегодня мы займёмся страницами с комментариями.

О боже, совсем забыла про лирическое отступление!

! Приведите коды в порядок!

Это нужно в первую очередь вам самим, чтобы вы вам было легче в них ориентироваться.
Вот вам пример как не надо (не скажу чей), оригинальный размер по клику:



Что мы видим: строки слипаются в длинную колбасу, колбаса не влезает в один экран (при ширинe окна 1200рх!), в результате человек не видит, что у него в этом блоке уже есть одна фоновая картинка, и вставляет туда же ещё одну.

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

Конечно, при таком форматировании коды покажутся вам ужасной многоголовой гидрой, я и сама теряюсь когда такое вижу.

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

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



Правило номер два: правильные группы



Ну и последнее: не забывайте про /* ----- комментарии ----- */

Их можно размещать и внутри блоков, и снаружи.

Настоятельно рекомендую размечать комментариями код и складывать все стили стили для body - в одно место, стили от сайдбара - в другое, стили от постов - в третье...

Получаются как бы боксы с ярлыками. Вы пролистываете коды, пока не найдёте нужный ярлык, и уже тогда начинаете вчитываться в код.
При таком форматировании для поиска нужного элемента не нужно читать весь код начиная с body - достаточно найти нужный ярлык.

Примеры ярлыков я уже приводила:

/* --- ENTRIES --- */
/* --- SIDEBAR --- */
/* --- LINKS --- */

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


Теперь вернёмся к теме поста: оформление страниц комментариев

Повторю: нам не нужно оформлять всю страницу с нуля, надо будет дописать коды только для комментариев к посту.

Если у вас страница комментов не в стиле журнала - можете дальше не читать. Для всех остальных даю классы и id блоков для покраски:

Bloggish

div.comments - блок с комментариями
h3.comments-header - заголовок блока с комментами
div.comments-content - внутренний блок с комментами
.comment - отдельный коммент (может быть ветка)
div.comment-userpic - юзерпик и имя юзера
div.comment-footer - ссылки под комментом
span.separator - разделитель ссылок
#qrform table - таблица с формой для ответа на странице комментов
#postform table - таблица с формой для ответа на отдельной странице

Expressive/Mixit

div#comments - блок с комментариями
div#comments-inner - внутренний блок с комментами
h2.comments-header - заголовок блока с комментами
div.comments-nav - ссылки над блоком с комментами
.comment - отдельный коммент
.comment-odd - отдельный коммент, нечётный
.comment-even - отдельный коммент, чётный
div.comment-body - содержимое коммента
div.user-icon - юзерпик
span.commenter-name - ник юзера
div.comment-date - дата
div.comment-links - ссылки под комментом
span.separator - разделитель ссылок
#qrform table - таблица с формой для ответа на странице комментов
#postform table - таблица с формой для ответа на отдельной странице

Примечание: .comment-odd и .comment-even нужны, чтобы покрасить комменты в ветке через один, для удобочитаемости. Например, можно одному задать фон темнее, а другому светлее.

Flexible Squares

div.box - блок с комментариями
div.box center - ссылки над комментами
.commentbox - отдельный коммент
.datesubjectcomment - блок с датой и ником
.datesubjectcomment span.ljuser - ник юзера
.commentreply - текст коммента
img.userpiccomment - юзерпик
#qrform table - таблица с формой для ответа на странице комментов
#postform table - таблица с формой для ответа на отдельной странице

Minimalism

div.entry-comments-text - блок с комментариями
div.comments-links - ссылки над комментами
.comment-wrap - отдельный коммент
.comment-head - шапка коммента
div.comment-head-in - блок с датой и ником
div.comment-upic - юзерпик
div .comment-head-in span.ljuser - ник юзера
div.comment-text - текст коммента
div.comment-menu - ссылки под комментом
#qrform table - таблица с формой для ответа на странице комментов
#postform table - таблица с формой для ответа на отдельной странице

Smooth Sailing

div.bodyheaderblock - заголовок над комментами
div.commentHolder - отдельный коммент
div.commentHeader - шапка коммента
table.commentUserinfo - таблица с юзерпиком и ником
div.commentUserinfo-usericon - юзерпик
div.commentUserinfo-username - ник
div.commentText - текст коммента
div.commentLinkbar - блок ссылок под комментом
div.commentLinkbar ul - список ссылок под комментом
div.commentLinkbar ul li - отдельный пункт списка
div.commentLinkbar ul li a - отдельная ссылка в списке
#qrform table - таблица с формой для ответа на странице комментов
#postform table - таблица с формой для ответа на отдельной странице


Задание

1. Приведите в порядок коды.
2. Приведите в чуйство страницы комментариев : )


Напоминаю: что-то непонятно - спрашивайте.
Если просите помочь найти ошибку, не забывайте дать ссылку на журнал где тестите.

Все коды в комменты вставлять не надо - они уже длинные.
Вставляйте только кусок который не хочет работать

← День седьмой: посты

Оставить комментарий

Популярные посты:

• Ранее
• Архив