Обложки для журналов
от Yoksel

Дизайны для ЖЖ

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

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

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

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

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

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

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

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

bad code

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

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

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

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

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

good code

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

good code2

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

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

Настоятельно рекомендую размечать комментариями код и складывать все стили стили для 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. Хозяйке на заметку
 Вперёд

Вступите в сообщество, чтобы увидеть все дизайны
так, камушек я поймала. Только вот Вы ругаетесь, что у меня в одном блоке две фоновые картинки, а ведь картинки=то разные: одна фон, другая украшение. Зачем же мне убирать другую, если она мне надо? Про переносы поняла, исправляю))
> так, камушек я поймала.

могли бы и не палиться : )

> а ведь картинки=то разные: одна фон, другая украшение. Зачем же мне убирать другую, если она мне надо?

Потому что две картинки в одном блоке всё равно работать не будут. Уберите остальные для чистоты эксперимента и убедитесь что в одном блоке можно задать только одну картинку
Спасибо за урок! Относительно комментариев была такая проблема, что они сильно "уезжали" вправо. "подвинула" commentHolder влево - теперь выглядит нормально
Я наверное самая отсталая в плане сделанного, но я всё равно не могу понять, как менять цвет ссылок в сайдбаре! Пробовала по-разному, ну не выходит, подскажите пожалуйста.
И почему-то в "Личная информация" буква Л не целиком видна....
http://community.livejournal.com/skyisbeautiful/
Код в беспорядке, но я обязательно им займусь)
> Пробовала по-разному, ну не выходит, подскажите пожалуйста.

покажите как делали

> И почему-то в "Личная информация" буква Л не целиком видна....

сделайте рамки всем блокам в шапке и посмотрите что у них с шириной
А как менять цвет полос разделителей в комментариях?
У меня пара вопросов, связанных с рекламой. Можно ли сделать так, чтобы реклама не вылезала за пределы журнала, а также чтобы из-под неё не вылезал кусок старого стиля?
http://black-fiancee.livejournal.com/
> А как менять цвет полос разделителей в комментариях?

в комментариях пользователей или в ссылках в посте?

> Можно ли сделать так, чтобы реклама не вылезала за пределы журнала, а также чтобы из-под неё не вылезал кусок старого стиля?

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

пример: http://morikelebven.livejournal.com/86355.html
Опять не могу справиться с сылками. Поставила .comment a {
color: #070807;
}
нажимаю на коменты, всё черное , а
Previous Entry | Next Entry , Оставить комментарий - синие. Ну что за навождение!!!!
Без паники, всё работает как надо : )

.comment - отдельный коммент, следовательно чёрными ссылки стали только внутри комментов

Оставить комментарий -> div.comments-nav - ссылки над блоком с комментами

Про Previous Entry | Next Entry завтра будет
?

Log in

No account? Create an account