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

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

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

До приведения ваших журналов в окончательный вид осталось совсем немного, причём страницы, о которых мы будем говорить сегодня, так же унаследовали вид всего журнала, и вам осталось привести в порядок всего несколько отдельных элементов.

Начнём мы всё-таки не с них, а с навигации по страницам. Речь о ссылках, позволяющих пролистывать страницы и отдельные записи.

Блоки для малярно-оформительских работ:

Bloggish

p.content-nav - навигация по страницам
div.skiplinks - навигация по дням

Expressive

div.stream-header p.prevnext - верхняя навигация по страницам
div.stream-footer p.prevnext - нижняя навигация по страницам

p.prevnext - навигация по записям
div.skiplinks - навигация по дням

Flexible Squares

div#footer - блок с навигацией по страницам
ul.navfooter - список ссылок в навигации
ul.navfooter li - отдельный пункт в навигации
ul.navfooter li.viewing - надпись типа viewing most recent entries

div.skiplinks - листалка дней и отдельных постов

Minimalism

ul.page-nav - навигация
ul.page-nav li.prev - пункт со ссылкой назад
ul.page-nav li.next - пункт со ссылкой вперёд

Smooth Sailing

#footer-menu - блок навигации
#footer-menu ul - список ссылок в блоке
#footer-menu ul li - отдельный пункт в списке


Напоминаю: я привела только блоки, без ссылок в них. Чтобы задать цвет ссылке - обращайтесь именно к ссылке.


Теперь рассмотрим страницы календаря. Их три вида:

— записи за год (таблицы)
— записи за месяц (список постов по датам)
— записи за день

Каждая из них устроена по своему, поэтому списки блоков поделены на три соответствующих группы

Bloggish

записи за год

.lj-view-archive div#alpha-inner ul - список годов
.lj-view-archive div#alpha-inner ul li - отдельный год
.lj-view-archive div#alpha-inner ul li.active - выбраный год

.lj-view-archive div#alpha-inner table - таблица с календарём
.lj-view-archive div#alpha-inner table th - ячейка с днём недели
.lj-view-archive div#alpha-inner table td - ячейка с датой
.lj-view-archive div#alpha-inner table td div a - ссылка на записи за день

записи за месяц

.lj-view-month center - навигация по месяцам
.lj-view-month dl - блок со списком
.lj-view-month dt - дата
.lj-view-month dd - записи за день

записи за день

.day h2 - заголовок страницы


Expressive

записи за год

ul.year - список годов
ul.year li - отдельный год
ul.year li.active - выбраный год

table.yeartable - таблица с календарём
td.yearmonth - название месяца
td.yearmonth a - ссылка на записи за месяц
td.yearday - день недели
td.yeardate - ячейка с датой
td.yeardate a - ссылка на записи за день

записи за месяц

div.prevnext table - навигация по месяцам
.lj-view-month dl - блок со списком
.lj-view-month dt - дата
.lj-view-month dd.viewsubjects - записи за день

записи за день

.day h2 - заголовок страницы
Внимание! изменения этого блока могут затронуть и заголовки постов! Будьте внимательны.


Flexible Squares

записи за год

ul.year - список годов
ul.year li - отдельный год
ul.year li.active - выбраный год

table.yeartable - таблица с календарём
td.yearmonth - название месяца
td.yearmonth a - ссылка на записи за месяц
td.yearday - день недели
td.yeardate - ячейка с датой
td.yeardate a - ссылка на записи за день

записи за месяц

.lj-view-month #maincontent center,
.lj-view-month dl - блок со списком
.lj-view-month dt - дата
.lj-view-month dd.viewsubjects - записи за день


Minimalism

записи за год

.view-archive div.entry-text ul - список годов
.view-archive div.entry-text ul li - отдельный год
.view-archive div.entry-text ul li.active - выбраный год

.view-archive div.entry-text div.calendar-wrap,
.view-archive div.entry-text table - таблица с календарём
.view-archive div.entry-text table caption - название месяца
.view-archive div.entry-text table th - день недели
.view-archive div.entry-text table td - ячейка с датой
.view-archive div.entry-text table td a - ссылка на записи за день

записи за месяц

.view-month div.entry-text dl - блок со списком
.view-month div.entry-text dt - дата
.view-month div.entry-text dd - записи за день

Smooth Sailing

записи за год

table.month - таблица с календарём
table.month td.daytitles - день недели
table.month td.day - ячейка с датой
table.month div.day-date - дата
table.month div.day-count - количество записей за день

записи за месяц

div.daysubjects - записи за день


Теперь остались только страницы меток. Там обычно всё совсем просто

Bloggish

h2 - заголовок страницы
ul.ljtaglist - список меток
ul.ljtaglist li - отдельный пункт

Expressive

.lj-view-tags div#alpha-inner ul - список меток
.lj-view-tags div#alpha-inner ul li - отдельный пункт

Flexible Squares

ul.ljtaglist - список меток
ul.ljtaglist li - отдельный пункт

Minimalism

div.content-tags - блок с метками
div.content-tags a - отдельная метка

Smooth Sailing

table.tagstable - таблица с метками
table.tagstable td - отдельная ячейка


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


Задание

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

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


Навигация по урокам
Назад День 1. Поиск картинок
День 2. Стиль и фон
День 3. Ширина журнала
День 4. Фон ленты
День 5. Шапка журнала
День 6. Сайдбар
День 7. Посты
День 8. Страницы комментариев
День 9. Метки и календарь
День 10. Хозяйке на заметку
 Вперёд

Вступите в сообщество, чтобы увидеть все дизайны
ой, я уже так довольна своим жж, что мне кажется, больше ничего и не надо... Вот может быть, вы посоветуете чего? я же чайник, сотворила такое своими руками - и уже на седьмом небе от счастья! А со стороны оно виднее. http://gostika.livejournal.com/
Помогите, пожалуйста! Что мне изменить в коде, чтобы меню было не по центру всего журнала, а по центру над лентой для записей. Пока не установила "Предыдущие-следующие" всё устраивало. А сейчас не красиво. http://community.livejournal.com/vikka93/

ul.nav {
width:1018px;
position:relative;
font-family:Georgia;
font-size:23px;
font-style:italic;
text-align:center;
margin-left:250px;
margin-top:290px;
}
Уже больше не знаю, что менять. Текущий вид моего журнала меня устраивает) Спасибо большое, yoksel! А уроки сохраню-ка я в избранное для будущих экспериментов))
Спасибо большое Вам, давно я ничего такого увлекательного не делала :))) Я в восторге :)
Теперь я не только могу сделать себе простенький дизайн(а сложные я особо и не люблю) но и могу немного прочитать коды понравившегося дизайна, выдернуть что-нибудь или переделать :)
У меня остался только один вопрос, может я проворонила где то по урокам :-/ - как убрать верхнюю полосу навигации(controlstrip?) что то я от неё отвыкла, не нравится.
И еще один вопросик-просьба.
Хотелось бы поставить себе какую-нибудь небольшую баннер-кнопку, что дизайн сделан самостоятельно по Вашей акции, может

Помоги, пожалуйста, у меня так и не получилось сделать нормальный календарь. Таблицы я не умею рисовать:(
Хочется, чтобы ячейки были широкими, календарь был расположен посередине страницы. Научи, что и куда писать.
Скажи, пожалуйста, могу ли я закрасить ячейку с названием месяца на странице календаря в какой-нибудь цвет? что для этого нужно написать?
Во-первых, не надо читать комментарии - читайте посты.

Во-вторых, по вашей ссылке каждый увидит свои коды, а не ваши : )

Вставьте в комментарий коды которыми вы пробовали это сделать. Не все коды журнала, а только относящиеся к этому делу
простите, что я наверняка не в той теме задаю вопрос, но очень хочется разобраться
вот у меня стиль, который я у вас в сообществе брала. и теперь у меня появились проблемы с календарем. не могу понять, как исправить ситуацию . у меня посты из будущего =) за 14ое отображается как за 22ое.. помогите пожалуйста.
код такой:
/* --------- sidebar calendar ---------- */

div#latestmonth {
padding: 0 10px;
}

.latestmonth-inactive {
font: normal 18px Arial;
color: #514c45;
text-align: center;
padding: 10px 5px;
}

.latestmonth-active {
font: normal 18px Arial;
color: #ffffff;
text-align: center;
padding: 7px 0px;
margin: 3px;
background: #8B847B;
}

.latestmonth-active a,
.latestmonth-active a:link,
.latestmonth-active a:visited {
font: normal 18px Arial;
color: #ffffff;
text-decoration: none;
}

.latestmonth-active a:hover {
color: #514C45;
text-decoration: none;
}
здравствуйте!
в первую очередь хочется сказать большое спасибо за ваши уроки - ничего более понятного и доступного я еще не видела.
изучая пошагово правила оформления обложки журнала, мне удалось сделать то, что я хотела. и под конец возник единственный вопрос, можно ли в сайтбаре убрать строчку "разработано LJ.com". возможно, я что-то упустила просто. подскажите, пожалуйста.
вот журнал http://li-s-ka.livejournal.com/
и очень интересно, какова будет оценка профи моих начинаний? :-[
?

Log in

No account? Create an account