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

[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;
}

На этом всё. Спрашивайте, если что-то непонятно : )