Настройка оформления живого журнала при помощи перекрывающихся кодов в системе стилей S1 (для
Ну вот, мы создали аккаунт, сделали свою первую запись: «Всем привет! Я пока не знаю, что тут писать, но обязательно буду. Зафрендте меня ))))».
Новоиспеченный член ЖЖ-сообщества, теперь весь мир имеет уникальный шанс узнать о тебе! Твой журнал – твое лицо, и с каким лицом ты его встретишь? Естественно, следующим шагом будет попытка настроить вид своего журнала в соответствии со своими предпочтениями. Кому-то будет достаточно стандартных возможностей изменения цветовой схемы и шрифта. Особо серьезно настроенные и продвинутые выберут платный аккаунт, создадут или закажут у умельцев индивидуальный дизайн.
Но хитрые бессребреники с амбициями, вроде нас, постараются по максимуму использовать возможности, предоставляемые бесплатным пользователям. Одной из таких лазеек является расширенная возможность настройки «под себя» стилей из системы S1 при помощи особых кодов, называемых перекрывающимися кодами.
Будем подразумевать, что читатель имеет представление о том, что такое системы стилей, S1 и S2 и в чем разница между ними. В противном случае лучше для начала обратится к справке LJ.
Итак, для начала мы должны перейти в режим управления своим аккаунтом (пункт меню «Управление») и выбрать раздел «Оформление». Вот что мы увидим:

Выбираем систему стилей S1. Так же здесь можно указать заголовок страницы и подзаголовок для журнала, заголовок для страницы друзей. Всего доступны 10 стилей. Возможности доработки у них различны. большинство, судя по моим наблюдениям, выбирает Generator, но это ни в коем случае не означает, что нужно использовать только его, положитесь на ваш вкус, поэкспериментируйте с разными стилями. Для основной страницы, страницы друзей и пр. можно задавать различные стили, но я этого делать не рекомендую. После того, как мы определились со стилем, выбираем цветовую гаму. Здесь нам очень пригодится цветовая схема стиля. Посмотреть ее можно здесь. Ну вот, пока ничего сложного. Вот в этом то окошке мы и будем творить. Предупреждаю, вам понадобятся некоторые знания основ HTML и CSS! 1 Фоновая картинка GLOBAL_HEAD<= Background Color — По умолчанию: transparent. Background Repeat - По умолчанию: repeat. scroll картинка прокручивается вместе с текстом Background Position — По умолчанию: 0% 0%. Отступ изображения относительно верхнего левого угла экрана, если указано одно из значений, другое принимется равным 0. Оба параметра не могут быть установлены больше, чем 50%.
Так же можно использовать ключевые слова: 2. Изменяем шрифт. Это тоже описывается в GLOBAL_HEAD. Если вы используете больше одного перекрывающего кода GLOBAL_HEAD (шрифта и фоновой картинки), их нужно объединить.
GLOBAL_HEAD<= color шестнадцатиричное обозначение цвета шрифта 3. Изменяем количество записей на странице
LASTN_OPT_ITEMS=>30 4. Устанавливаем свой формат времени и даты Используемые переменные: 5. Добавляем свои ссылки в панель навигации, на примере стиля «Generator» LASTN_WEBSITE<= <!– код для добавляемой ссылки –> <!—код, дя отображения в панели навигации сайта, который вы указали в вашем профиле –> 6. Изменение оформления ссылок на комментарии (оформление – стиль «Generator»)
LASTN_TALK_READLINK<= LASTN_TALK_LINKS<= FRIENDS_TALK_LINKS<= Так же можно поместить картинку в качестве разделителя между ссылками на комментарии. Для этого вам потребуется найти картинку подходящего размера, в формате jpg, gif или png. И поместить ее на какой либо сайт, ну пусть даже ljplus.ru. Главное – получить Интернет-адрес картинки. LASTN_TALK_READLINK<= Теперь сохраним изменения и полюбуемся результатом. Ну как? Довольны? Что, нет? Появились новые идеи?
Теперь перейдем к закладке «Look and Feel». 
Пора переходить к самому основному – перекрывающимся кодам. Открываем закладку «Custom Options» 
Изменение фоновой картинки прописываются в теге GLOBAL_HEAD
<style type=”text/css”>
<!–
body {
background-color: cadetblue !important;
background-image: url(http://www.example.com/yourimage.jpg) !important;
background-repeat: repeat-y !important;
background-attachment: fixed !important;
background-position: 2% !important;
}
–>
</style>
<=GLOBAL_HEAD
repeat картинка повторяется по вертикали по горизонтали, заполняя весь экран
no-repeat картинка не повторяется
repeat-x изображение повторяется по горизонтали
repeat-y изображение повторяется по вертикали Background Attachment - По умолчанию: scroll.
fixed прокручивается только текст, картинка неподвижна
left горизонтальное выравнивание по левому краю
center горизонтальное выравнивание по центру
right горизонтальное выравнивание по правому краю
top вертикальное выравнивание по верхнему краю
center вертикальное выравнивание по центру
bottom вертикальное выравнивание по нижнему краю
<style type=”text/css”>
<!–
body, td, font, div, p {
color: #000000;
font-family: “Arial”, sans-serif;
: 12pt;
}
–>
</style>
<=GLOBAL_HEAD
font-family тип шрифта
font-size размер высоты шрифта в точках
30 – количество записей, выводимых на страницу журнала.
FRIENDS_OPT_ITEMS=>40
40 – количество записей, выводимых на страницу друзей.
Подставьте свои значения.
Например LASTN_DATE_FORMAT=>%%daylong%%, %%monlong%% %%dth%%, %%yyyy%% @ %%12h%%:%%min%%%%ampm%%
dayshort
День недели на английском сокращенно. Например: Mon, Tue, Wed…
daylong
День недели на английском полностью. Например: Monday, Tuesday, Wednesday…
monshort
Месяц кратко. Например: Jan, Feb, Mar…
monlong
Месяц полностью. Например: January, February, March…
yy
Год, две цифры.
yyyy
Год, четыре цифры.
m
Месяц. 1-12.
mm
Месяц. 01-12.
d
День. 1-31.
dd
День. 01-31.
dth
День с окончанием числительного. 1st, 2nd, 3rd, 4th, 5th…
min
Минуты. 00-59.
12h
Часы. 1-12.
12hh
Часы. 01-12.
24h
Часы. 1-23.
24hh
Часы. 01-23.
Добавляемые ссылки описываются в теге LASTN_WEBSITE, для различных стилей оформление будет отличатся, но суть остается той же: описание <a href=”адрес _fcksavedurl=””адрес” _fcksavedurl=””адрес” _fcksavedurl=””адрес” _fcksavedurl=””адрес” _fcksavedurl=””адрес” _fcksavedurl=””адрес” сайта”>имя сайта</a>
<!— код для добавляемой ссылки –>
<tr>
<td class=”meta”>[</td>
<td align="right" class="meta"><b>описание</b></td>
<td align="center" class="meta">|</td>
<td class="meta">
<a href="http://www.example.com/yourpage.html">имя сайта</a>
</td>
<td class="meta">]</td>
</tr>
<!— конец кода –>
<tr>
<td class=”meta”>[</td>
<td align="right" class="meta"><b> описание </b></td>
<td align="center" class="meta">|</td>
<td class="meta">
<a href="http://www.example.com/yourpage.html">имя сайта</a>
</td>
<td class="meta">]</td>
</tr>
<!– конец кода –>
<tr>
<td class=”meta”>[</td>
<td align="right" class="meta"><b>мой сайт</b></td>
<td align="center" class="meta">|</td>
<td class="meta">
<a href="%%url%%">%%name%%</a>
</td>
<td class="meta">]</td>
</tr>
<!—конец кода–>
<=LASTN_WEBSITE
<a href=”%%urlread%%”><b>%%messagecount%% отметились</b></a>|
<=LASTN_TALK_READLINK
<tr>
<td align=”right” colspan=”2″ width=”100%” bgcolor=”%%color:weak_back%%” class=”comments”>
%%readlink%%<a href=”%%urlpost%%”>Отзовись и ты тоже!</a>
</td>
</tr>
<=LASTN_TALK_LINKS
То же самое для страницы друзей:
FRIENDS_TALK_READLINK<=
<a href=”%%urlread%%”><b>%%messagecount%% отметились</b></a>|
<=FRIENDS_TALK_READLINK
<tr>
<td align=”right” colspan=”2″ width=”100%” bgcolor=”%%color:weak_back%%” class=”comments”>
%%readlink%%<a href=”%%urlpost%%”>Отзовись и ты тоже!</a>
</td>
</tr>
<=FRIENDS_TALK_LINKS
Теперь вставим тег <img> с адресом нашей картинки туда, где мы ей определили место, а имеено в тег LASTN_TALK_READLINK. Вот так:
<a href=”%%urlread%%”><b>%%messagecount%% thought%%mc-plural-s%%</b></a> <img src=”http://www.example.com/username/image.jpg“>
<=LASTN_TALK_READLINK
LASTN_TALK_LINKS<=
<tr>
<td align=”right” colspan=”2″ width=”100%” bgcolor=”%%color:weak_back%%” class=”comments”>
%%readlink%%<a href=”%%urlpost%%”>share your thoughts</a>
</td>
</tr>
<=LASTN_TALK_LINKS
Ну тогда пожалуй можно продолжить… в следующих сериях.
Коммент.(0)