yoksel : ) (yoksel) wrote in journals_covers,
yoksel : )
yoksel
journals_covers

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

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

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

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

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. Хозяйке на заметку
 Вперёд

Tags: useful: уроки по оформлению ЖЖ, ЖЖ-дизайн за 10 дней
Subscribe
promo journals_covers august 1, 2013 11:15 62
Buy for 200 tokens
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 206 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →