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

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

спецкостюм
yoksel

Про слои

Сегодня речь пойдет про слои, которые предоставляют обширные возможности в оформлении журналов и доступны только пользователям платных аккаунтов.

ВНИМАНИЕ
Урок для продвинутых пользователей.
Подразумевается, что вы знакомы с Html и Css и вас не пугает программный код. В идеале иметь хотя бы небольшие навыки программирования.
Для экспериментов обязательно иметь платный аккаунт (можно купить за 5$ на 2 месяца, если что).

Итак, слои.

Какие типы слоев существуют?


Core - родительский слой.
— i18nc - языковые слои.
— layout - слои стилей.
— — i18n - языковые слои для слоев стилей.
— — theme - темы.
— — user - слои настроек.

Описание


Core - родительский слой для всех прочих типов слоев. Недоступен для редактирования, но содержит массу полезной информации

Содержание слоя
Код слоя

— i18nc - языковые слои, так же недоступны для редактирования. Они применяются, когда вы в настройках оформления выбираете язык для надписей в своем журнале.

Пример слоя

— layout - слои стилей. Именно они отвечают за разметку страниц и возможности стилей из конкретных групп. Всего таких слоев 35, интерес представляют лишь некоторые из них, потому что часть дублируется, а большинство безнадежно устарело. Minimalism, Expressive, Flexible Squares - это именно слои стилей.

Примеры:
* Expressive
* Minimalism

— — i18n - языковые слои для слоёв стилей. Также применяются при выборе языка в настройках оформления.

— — theme - конкретные темы. Именно их вы выбираете в каталоге стилей.

Пример слоя

— — user - слой, в котором хранятся ваши настройки дизайна. Практически всё, что вы меняете вот тут сохраняется в этом слое.
При каждом изменении настроек этот слой перезаписывается, поэтому никогда не храните там то, что не хотите потерять.

Как пользоваться слоями?


Общий принцип такой: вы создаете новый слой, копируете в него отдельные функции или слой стилей целиком, затем подключаете свой слой к журналу.

Все полезные ссылки есть на странице Расширенные возможности оформления

Для того, чтобы увидеть как это работает, давайте попробуем создать слой и добавить с его помощью на страницу какой-нибудь текст.

1. Зайдите в Ваши слои, найдите внизу страницы форму и выберите значения как на картинке:



Нажмите Создать

Затем в таблице ваших слоев найдите такую строчку:



Цифра будет другой, но тип слоя будет theme и слой пока не имеет названия.

2. Нажмите Правка, чтобы перейти к редактированию. Откроется вот такой редактор кода (поля будут пустыми):


Увеличить

Свежесозданный слой в поле для кода содержит только две строчки кода:

layerinfo "type" = "theme";
layerinfo "name" = "";

Это объявление типа темы и её название.
Назовите как-нибудь свою тему, а затем ниже вставьте такой код:



Это фунция для вывода страницы в Expressive - Page::print ().

Нажмите Save & Compile - она наверху, над полем для редактирования.

В поле с результатами компиляции должно появиться собщение Compiled with no errors. (как у меня на скриншоте).

3. Теперь можно посмотреть что у нас получилось. Зайдите в каталог стилей и в левой колонке найдите пункт Собственные слои.

В этом разделе должен находиться ваш новый слой с именем, которое вы ему задали:



Вы можете отважно применить слой к журналу (внимание!!! ваше текущее оформление слетит!) либо нажмите на лупу, чтобы посмотреть, что получилось, не надевая слой на журнал.

Должно получиться вот так:


на скрине только верхняя часть страницы

Это дефолтная тема Expressive, голубая с цветком, и текст, который я вставила в функцию вывода страницы - Привет, мир! : )

Если верх вашего журнала выглядит как на скриншоте - значит у вас всё получилось!

А дальше?


Теперь вы можете сами создавать и редактировать слои.
Вам следует выбрать удобный способ работы с ними.

Я показала как можно не трогая основной слой стиля отредактировать только нужную функцию. Это удобно, код короткий и в нём только то, что нужно вам.
Но есть ограничения: в слое типа theme нельзя создавать свои настройки (property) и функции.

Если нужны все возможности слоя стиля - вам потребуется скопировать его код целиком и вставить его в слой типа layout (слой макета).
Плюсы - вам не нужно будет копировать функции по одной, в вашем распоряжении сразу будут все возможности слоя.
Минусы - очень длинный код.

Где брать код?


Самому написать слой конечно можно, но смысла особого нет : ) Проще и удобнее скопировать код уже имеющегося слоя и перекраивать его.

Список всех слоев можно найти на странице Общедоступные слои

Как отлаживаться?


Если в коде есть проблема, при компиляции в нижнем поле вывалится ошибка, и слой не скомпилируется.
На вашем журнале это никак не отразится - последние изменения не применятся к журналу, пока слой не будет исправлен и скомпилирован без ошибок.
В сообщении об ошибке будет указана строка с проблемой.

Что почитать?


На русском:
Какие виды слоёв в системе стилей S2?
Как мне создать новый стиль S2?

На английском:
S2 Manual
Содержание Core
s2layers

Хозяйке на заметку


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

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

Метки: ,
промо journals_covers август 1, 2013 11:15 62
Разместить за 200 жетонов
Новое в ЖЖ: перевод настроек
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
Previous Entry
Next Entry
← назад
вперёд →
eleema
С Вашего разрешения вопрос не по теме.
Как у себя в ЖЖ настроить такую табличку, где оставляют комментарии, как Ваша, - со шрифтами, ссылками и фото?
random1911
я сейчас попал на непонятное совершенно мне явление. После того, как я вставлял 3 строчки в стили, все стили переставали работать. Они относились к тегу blockquote.
То есть я вношу 3 новые строки в тег style (это я стал делать после предыдущего раза, когда sustom CSS вообще игнорировались), и вообще все значения стилей, кроме базовых, перестают работать. Вносил в 2 разные места. Строки банальные:
blockquote {margin:35px;text-align:center;font:italic normal 15px/20px Georgia, sans-serif;color:#7f7f7f;}
blockquote:before {content:'«';font:italic normal 20px/1 Georgia, sans-serif;color:#7f7f7f;}
blockquote:after {content:'»';font:italic normal 20px/1 Georgia, sans-serif;color:#7f7f7f;}

Как такое вообще возможно?
liria_blanca
Если создать свой оформительский слой на Хамелеоне то почему-то пропадают настройки страницы и шапки. Это так задумано или как-то надо исправлять?
yoksel
Смотрите: Unstyled 01 - это тема. Когда вы создаете свою тему, она заменяет собой любую другую.

Чтобы сделать себе копию Unstyled, скопируйте себе нужную тему, вот например Unstyled 01: http://www.livejournal.com/customize/advanced/layersource.bml?id=46856780&fmt=html

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

Включение настроек выглядит вот так:

property use page_width_type;
property use fixed_page_width;
property use min_page_width;
property use max_page_width;

именно это use делает видимой настройку в интерфейсе. Скопировав Unstyled 01 вы включите все настройки.

Надеюсь, понятно объяснила : )
liria_blanca
Да, коды слоя в Хамелеоне действительно совсем другие ... Как же туда в нужное место кусочек html добавить? Вот, например, хочу имя юзера переставить из шапки в виджет "Профиль". Убрать-то его из шапки я убрала, ломать - не строить (с). А вот как его теперь в этот виджет вставить? Ни до, ни после картинки, ни в div.j-w-profile-image оно вставляться не хочет.

Edited at 2013-07-15 09:18 (UTC)
liria_blanca
Йоксель, как в Хамелеоне переставить местами div class="j-user j-e-user j-p-no-username" и h3 class="j-e-title" ? Сейчас они идут именно в таком порядке, а мне надо заголовок поставить первым. Они в разных функциях находятся, насколько я поняла. Юзерпик - в function layout_author_username_first, а заголовок - в function print_entry_default.
yoksel
Раскладка элементов записи таки в одной функции, именно в print_entry_default()

Посмотрите на функцию:

print_author($e); - это автор

"""<time class="j-e-date"... - дата

<h3 class... - заголовок

Переставляйте их как хотите, главное не терять концы строк и блоков : )

function print_entry_default(Entry e, string e_class) {
var Page p = get_page();
var string id = " id=\"entry-$e.journal.username-$e.itemid\"";
var string datetime = $e.time->date_format("%%yyyy%%-%%mm%%-%%dd%%");

"""<article $id class="$e_class">\n""";

"""<time class="j-e-date" datetime="$datetime">""" + _dateTime ($e.time, "e") + """</time>\n""";

print_author($e);

"""<h3 class="j-e-title">\n""";
post_status_icon($e);
"""<a href="$e.permalink_url">"""; post_subject($e); """</a>\n""";
"</h3>\n";

print_repost_user($e);

"""<div class="j-e-text">\n""";
$e->print_text();
"""</div>\n""";

$e->print_metadata();

$e->print_linkbar();

"</article>\n\n";
}
yoksel
Во-первых, там два поля для текста, одно из них Профиль, но по сути тот же Свой текст.

Во-вторых, минуя настройки можно вставить нужный текст в сайдбар прямо в слое. Это можно сделать в слое темы.

Но если подойти к вопросу серьезно, то логичнее добавить текстовую переменную (это уже делается в копии слоя), она при этом в настройках будет выглядеть как текстовое поле. Затем её уже можно вывести в нужном месте.

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

Нарисовалась у меня странная такая проблема, и внутренний голос подсказывает, что она нерешаема. Но на всякий случай спрошу. Непосредственно в тексте записи есть элементы, которые требуют стилевого оформления - всякие там цитаты, таблицы, эпиграфы и т.д. Раньше я их описывала "на месте". Элемент style= - и вперёд. Но это получалось очень громоздко. Вот я и решила присвоить нужным элементам классы и вынести их описание в общий CSS.

На странице самой записи всё отображается как надо. А на главной (лента "последние записи") всё, что попало между тегами ката "обесклассивается". Т.е. div class такой-то только на главной и только под катом становится просто div. При этом если стиль описан внутри самого тега - всё остаётся на месте. Пропадает только атрибут сlass.

Можно это как-то решить али безнадёга?
yoksel
попробуйте задавать не класс, а аттрибут data-class, например

стили для такой штуки задаются примерно так:

div[data-class] {
color: gold;
}

должно сработать : )

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

а ещё можно использовать простые теги, типа i, blockquote - и задавать стили для этих тегов находящихся внутри поста
Previous Entry
Next Entry
← назад
вперёд →
?

Log in

No account? Create an account