Обложки для журналов
от 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 62
Разместить за 200 жетонов
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
а у ссылок "вперед" и "назад" нету своих классов? чтобы картинки прикрутить
я у себя в журнале для этого покупала платный аккаунт и лазила в код (но это было еще до хамелеона)
хочу просто высказать свое, помимо того, что это, конечно, самый удобный и хороший стиль:
- не хватает разделения ссылок под постом на "комменты/оставить коммент" и все остальные (как в Минимализме)
- смутило немного, что автоматический margin от alpha до beta =30px (как-то многовато...)
> - не хватает разделения ссылок под постом на "комменты/оставить коммент" и все остальные (как в Минимализме)

Это всё есть в коде : ) Если всё описывать, пост был бы гораздо длинее, а используя веб-инспектор пользователь сам найдет всё это на странице

> - смутило немного, что автоматический margin от alpha до beta =30px (как-то многовато...)

можно отрубить layout.css и сформировать свою ширину и отступы. А можно выключить обе css-ки и получить чистый Html без ничего
Добрый день. Очень интересно то чем вы владеете, но для меня-простого педагога-гуманитария - эти слова просто запредел, мой мозг не воспринимает. Помогите, пожалуйста: как мне сделать, чтобы гости, кот. зашли на мою страницу, чтобы оставить коммент, видели русский текст хотя бы слова оставить комментарий. Вообще как сделать все на моей странице (не только мои записи и мой текст) на русском языке?
Йоксель, подскажите как можно убрать из кнопки надпись "со скрытыми". Заменить на звёздочку или плюс. Это можно сделать?
Сейчас это выглядит так.
скрыт
в ленте записей пользовательский юзерпик выглядит нормально




но при этом некоторые юзерпики во френд-ленте появляются с полями.






можно это как-то исправить?
Пытаюсь сделать закругленные углы журнала в Хамелеоне вот так:
.j-l-page-inner {-moz-border-radius: 20px;}
Не получается. Что я делаю не так?

Edited at 2013-05-08 02:48 (UTC)
по-первых, префикс не нужен, если вы регулярно обновляете свои браузеры

во-вторых, фон ленты можно задать в настройках, во вкладке Page : )
В этом случае он попадет в блок .j-l-page, которому и надо будет скруглить углы
веб-инспектор по идее должен показать вам все интересующие вас классы : )
из этого списка реально существует только .j-header-nav-item

в левом поле он показывает код страницы с выбранным элементом, посмотрите какие классы у него есть

Edited at 2013-05-10 20:42 (UTC)
?

Log in

No account? Create an account