День восьмой: страницы комментариев
К этому дню страницы большинства участников уже имеют практически законченый вид.
Вы выбрали ширину журнала, установили фоны, настроили вид сайдбара и ленты записей.
Вы сделали бОльшую часть работы, но это ещё не всё: помимо страницы ваших записей и ленты друзей есть ещё несколько страниц, по которым обычно редко ходят, но, тем не менее, их так же стоит привести в порядок.
Что за страницы?
Это страницы календаря (их несколько), список меток и страницы комментариев (если включены комменты в стиле журнала).
На самом деле, все эти страницы наследуют общее оформление журнала, но на них есть элементы, которые нам до сих пор не попадались, и кодов для них у вас пока нет.
Сегодня мы займёмся страницами с комментариями.
О боже, совсем забыла про лирическое отступление!
! Приведите коды в порядок!
Это нужно в первую очередь вам самим, чтобы бы вам было легче в них ориентироваться.
Вот вам пример как не надо (не скажу чей), оригинальный размер по клику:
Что мы видим: строки слипаются в длинную колбасу, колбаса не влезает в один экран (при ширин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-subject - заголовок коммента
div.comment-date - дата
div.comment-links - ссылки под комментом
span.separator - разделитель ссылок
#qrform table - таблица с формой для ответа на странице комментов
#postform table - таблица с формой для ответа на отдельной странице
Примечание: .comment-odd и .comment-even нужны, чтобы покрасить комменты в ветке через один, для удобочитаемости. Например, можно одному задать фон темнее, а другому светлее.
Текст в окошках для добавления коммента:
.textbox, textarea, select{
font-family:Tahoma;
font-size:12px;
line-height: 1.4em;
color:#333;
}
Код примерный, подставьте свои параметры
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. Приведите в чуйство страницы комментариев : )
Напоминаю: что-то непонятно - спрашивайте.
Если просите помочь найти ошибку, не забывайте дать ссылку на журнал где тестите.
Все коды в комменты вставлять не надо - они уже длинные.
Вставляйте только кусок который не хочет работать
Навигация по урокам
День 1. Поиск картинок
День 2. Стиль и фон
День 3. Ширина журнала
День 4. Фон ленты
День 5. Шапка журнала
День 6. Сайдбар
День 7. Посты
День 8. Страницы комментариев
День 9. Метки и календарь
День 10. Хозяйке на заметку
Вы выбрали ширину журнала, установили фоны, настроили вид сайдбара и ленты записей.
Вы сделали бОльшую часть работы, но это ещё не всё: помимо страницы ваших записей и ленты друзей есть ещё несколько страниц, по которым обычно редко ходят, но, тем не менее, их так же стоит привести в порядок.
Что за страницы?
Это страницы календаря (их несколько), список меток и страницы комментариев (если включены комменты в стиле журнала).
На самом деле, все эти страницы наследуют общее оформление журнала, но на них есть элементы, которые нам до сих пор не попадались, и кодов для них у вас пока нет.
Сегодня мы займёмся страницами с комментариями.
О боже, совсем забыла про лирическое отступление!
! Приведите коды в порядок!
Это нужно в первую очередь вам самим, чтобы бы вам было легче в них ориентироваться.
Вот вам пример как не надо (не скажу чей), оригинальный размер по клику:
Что мы видим: строки слипаются в длинную колбасу, колбаса не влезает в один экран (при ширин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-subject - заголовок коммента
div.comment-date - дата
div.comment-links - ссылки под комментом
span.separator - разделитель ссылок
#qrform table - таблица с формой для ответа на странице комментов
#postform table - таблица с формой для ответа на отдельной странице
Примечание: .comment-odd и .comment-even нужны, чтобы покрасить комменты в ветке через один, для удобочитаемости. Например, можно одному задать фон темнее, а другому светлее.
Текст в окошках для добавления коммента:
.textbox, textarea, select{
font-family:Tahoma;
font-size:12px;
line-height: 1.4em;
color:#333;
}
Код примерный, подставьте свои параметры
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. Приведите в чуйство страницы комментариев : )
Напоминаю: что-то непонятно - спрашивайте.
Если просите помочь найти ошибку, не забывайте дать ссылку на журнал где тестите.
Все коды в комменты вставлять не надо - они уже длинные.
Вставляйте только кусок который не хочет работать
Навигация по урокам
День 1. Поиск картинок
День 2. Стиль и фон
День 3. Ширина журнала
День 4. Фон ленты
День 5. Шапка журнала
День 6. Сайдбар
День 7. Посты
День 8. Страницы комментариев
День 9. Метки и календарь
День 10. Хозяйке на заметку