День девятый: страницы меток и календаря
До приведения ваших журналов в окончательный вид осталось совсем немного, причём страницы, о которых мы будем говорить сегодня, так же унаследовали вид всего журнала, и вам осталось привести в порядок всего несколько отдельных элементов.
Начнём мы всё-таки не с них, а с навигации по страницам. Речь о ссылках, позволяющих пролистывать страницы и отдельные записи.
Блоки для малярно-оформительских работ:
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. Хозяйке на заметку
Начнём мы всё-таки не с них, а с навигации по страницам. Речь о ссылках, позволяющих пролистывать страницы и отдельные записи.
Блоки для малярно-оформительских работ:
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. Хозяйке на заметку