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

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

Небольшой справочник по разметке Хамелеона

В качестве предисловия: на странице есть гораздо больше элементов и классов, чем влезло в этот пост. Этот текст позволит вам получить общее представление о странице и логике разметки, но с более глубокими вопросами вам предстоит разбираться самостоятельно.

Для знакомства со строением страницы используйте веб-инспектор в Chrome либо Firebug для Firefox.
Почитать про удобные инструменты можно тут.


Начнем : )

Блоки страницы


Блоки-обертки контента страницы:

.j-l-wrapper
.j-l-container

Блок, отвечающий за ширину страницы:

.j-l-page

В Unstyled-темах ширина журнала и сайдбара задаются в настройках, и в коде их прописывать не обязательно.
Фон ленты задается в этом же блоке, так же через настройки.

Шапка:

.j-l-header - обертка всех блоков шапки

.j-w-social-networks-nav - виджет социконок. Может находиться в шапке либо в сайдбаре.
— — .j-social-networks-nav-item - элемент списка, каждый также имеет собственный класс

.j-w-journal-nav - меню журнала. Так же может находиться в шапке либо в сайдбаре.
— — .j-journal-nav-item - элемент списка, каждый также имеет собственный класс

.j-w-header-image - заглавная картинка. Блок появляется на странице, если картинка задана в настройках

.j-header-user - блок с названием, подзаголовком журнала и юзерпиком
— — .j-header-user-pic - блок с юзерпиком, можно выключить в настройках
— — .j-header-user-name - юзернейм в шапке, содержит ссылку
— — .j-user-journal-title - название журнала, содержит ссылку
— — .j-user-journal-subtitle - подзаголовок журнала

Контент

.j-l-content - обертка для ленты записей и сайдбара

.j-l-alpha - блок с записями (фон ленты нужно задавать в .j-l-alpha-content)
— — .j-l-alpha-footer - блок ссылок вперед/назад

.j-l-beta - сайдбар

Блок записей

.j-l-alpha-content - обертка ленты записей. Если вы хотите задать фон блоку записей, задавайте его в этом блоке.
.j-e - отдельный пост
— — .j-e-date - дата поста
— — .j-e-user - автор поста
— — .j-e-title - тема поста, содержит ссылку
— — .j-e-text - текст поста
— — .j-e-meta - блок меток, настроения, местоположения и музыки
— — .j-e-nav - ссылки под постом
— — — .j-e-nav-item - элемент списка, каждый также имеет собственный класс

— — — .j-e-nav-item-comments - число комментариев к записи
— — — .j-e-nav-item-reply - добавить комментарий
— — — .j-e-nav-item-edit_entry - редактировать запись
— — — .j-e-nav-item-edit_tags - редактировать метки
— — — .j-e-nav-item-mem_add - в избранное
— — — .j-e-nav-item-share - поделиться
— — — .j-e-nav-item-watch_comments - отслеживать комментарии к записи
— — — .j-e-nav-item-permalink - ссылка на пост


Сайдбар

.j-l-beta-inner - обертка виджетов сайдбара. Если хотите задать фон сайдбару, делайте это тут.
.j-beta-w - виджеты в сайдбаре. Также каждый виджет имеет свой собственный класс.
— — .j-w-title - заголовок виджета, может содержать ссылку
— — .j-w-content - содержимое виджета

Стрелки в календаре

.j-w-calendar-arr {
border-color: transparent #000;
}
.disabled .j-w-calendar-arr {
border-color: transparent #DDD;
}


Подробнее про стрелки можно почтитать тут

Работа со шрифтами


Шрифт и размер основного текста:

BODY {
font: 14px/1.4 Arial, sans-serif;
color: #333;
}


Цвета ссылок:

A {
color: #22729c;
}

A:hover {
color: #4c8eb0;
}


Размеры заголовков:

H2 {font-size: 30px;}
H3 {font-size: 25px;}
H4 {font-size: 18px;}


H2 - заголовок журнала (.j-user-journal-title)
H3 - подзаголовок журнала (.j-user-journal-subtitle), темы постов (.j-e-title) и заголовки блоков сайдбара (.j-w-title)
H4 - имя в виджете профиля в сайдбаре (.j-w-profile-name)


Это общие настройки для текста.
Если вы хотите изменить шрифт только в каком-то определённом блоке, используйте его класс.

Например, красим текст только в сайдбаре:

.j-l-beta {
color: teal;
}


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

.j-l-beta A {
color: gold;
}



На этом всё. Спрашивайте, если что-то непонятно : )
Вступите в сообщество, чтобы увидеть все дизайны
промо journals_covers август 1, 2013 11:15 64
Разместить за 200 жетонов
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
?

Log in

No account? Create an account