Архив за ноября, 2006

Настройка оформления живого журнала при помощи перекрывающихся кодов в системе стилей S1 (для

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

Выбираем систему стилей S1. Так же здесь можно указать заголовок страницы и подзаголовок для журнала, заголовок для страницы друзей.
Теперь перейдем к закладке «Look and Feel». Сейчас нам предстоит ответственное решение – выбрать стиль, который мы будем модернизировать.

Всего доступны 10 стилей. Возможности доработки у них различны. большинство, судя по моим наблюдениям, выбирает Generator, но это ни в коем случае не означает, что нужно использовать только его, положитесь на ваш вкус, поэкспериментируйте с разными стилями. Для основной страницы, страницы друзей и пр. можно задавать различные стили, но я этого делать не рекомендую. После того, как мы определились со стилем, выбираем цветовую гаму. Здесь нам очень пригодится цветовая схема стиля. Посмотреть ее можно здесь. Ну вот, пока ничего сложного.
Пора переходить к самому основному – перекрывающимся кодам. Открываем закладку «Custom Options»

Вот в этом то окошке мы и будем творить. Предупреждаю, вам понадобятся некоторые знания основ HTML и CSS!

1 Фоновая картинка
Изменение фоновой картинки прописываются в теге GLOBAL_HEAD

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

Background Color — По умолчанию: transparent.

Background Repeat - По умолчанию: repeat.
repeat картинка повторяется по вертикали по горизонтали, заполняя весь экран
no-repeat картинка не повторяется
repeat-x изображение повторяется по горизонтали
repeat-y изображение повторяется по вертикали Background Attachment - По умолчанию: scroll.

scroll картинка прокручивается вместе с текстом
fixed прокручивается только текст, картинка неподвижна

Background Position — По умолчанию: 0% 0%. Отступ изображения относительно верхнего левого угла экрана, если указано одно из значений, другое принимется равным 0. Оба параметра не могут быть установлены больше, чем 50%.

Так же можно использовать ключевые слова:
left горизонтальное выравнивание по левому краю
center горизонтальное выравнивание по центру
right горизонтальное выравнивание по правому краю
top вертикальное выравнивание по верхнему краю
center вертикальное выравнивание по центру
bottom вертикальное выравнивание по нижнему краю

2. Изменяем шрифт. Это тоже описывается в GLOBAL_HEAD. Если вы используете больше одного перекрывающего кода GLOBAL_HEAD (шрифта и фоновой картинки), их нужно объединить.

GLOBAL_HEAD<=
<style type=”text/css”>
<!–
body, td, font, div, p {
color: #000000;
font-family: “Arial”, sans-serif;
: 12pt;
}
–>
</style>
<=GLOBAL_HEAD

color шестнадцатиричное обозначение цвета шрифта
font-family тип шрифта
font-size размер высоты шрифта в точках

3. Изменяем количество записей на странице

LASTN_OPT_ITEMS=>30
30 – количество записей, выводимых на страницу журнала.
FRIENDS_OPT_ITEMS=>40
40 – количество записей, выводимых на страницу друзей.
Подставьте свои значения.

4. Устанавливаем свой формат времени и даты
Например 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.

5. Добавляем свои ссылки в панель навигации, на примере стиля «Generator»
Добавляемые ссылки описываются в теге LASTN_WEBSITE, для различных стилей оформление будет отличатся, но суть остается той же: описание <a href=”адрес _fcksavedurl=””адрес” _fcksavedurl=””адрес” _fcksavedurl=””адрес” _fcksavedurl=””адрес” _fcksavedurl=””адрес” _fcksavedurl=””адрес” сайта”>имя сайта</a>

LASTN_WEBSITE<=
<!— код для добавляемой ссылки –>
<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

6. Изменение оформления ссылок на комментарии (оформление – стиль «Generator»)

LASTN_TALK_READLINK<=
<a href=”%%urlread%%”><b>%%messagecount%% отметились</b></a>|
<=LASTN_TALK_READLINK

LASTN_TALK_LINKS<=
<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

FRIENDS_TALK_LINKS<=
<tr>
<td align=”right” colspan=”2″ width=”100%” bgcolor=”%%color:weak_back%%” class=”comments”>
%%readlink%%<a href=”%%urlpost%%”>Отзовись и ты тоже!</a>
</td>
</tr>
<=FRIENDS_TALK_LINKS

Так же можно поместить картинку в качестве разделителя между ссылками на комментарии. Для этого вам потребуется найти картинку подходящего размера, в формате jpg, gif или png. И поместить ее на какой либо сайт, ну пусть даже ljplus.ru. Главное – получить Интернет-адрес картинки.
Теперь вставим тег <img> с адресом нашей картинки туда, где мы ей определили место, а имеено в тег LASTN_TALK_READLINK. Вот так:

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

Теперь сохраним изменения и полюбуемся результатом. Ну как? Довольны? Что, нет? Появились новые идеи?
Ну тогда пожалуй можно продолжить… в следующих сериях.

О родителях:

Когда мне было восемнадцать лет я пришла домой и, зажмурившись, втянув голову в плечи, с порога выпалила маме: «Я выхожу замуж!» Мама без промедления ударилась в слезы: «Отцу скажешь сама…»
Я по стенке вползла в комнату, где мой грозный родитель вкушал на диване послеобеденную дрему: «Батя, ты знаешь… я хочу выйти замуж…» с трудом сдержалась, чтобы не добавить «Можно?» ,Отец, не меняясь в лице, лишь чуть приподнявшись на локте изрек: «Ты что, сдурела??? Иди учи уроки!» Думаю, не стоит говорить, что больше вопрос о моем замужестве не поднимался. За то я тысячу раз мысленно благодарила: «Спасибо, батя!» Одной фразой он уберег меня от самой большой глупости в моей, не такой уж и долгой жизни.
Знают ли родители лучше нас, что нам нужно? Каждый найдет в памяти десятки случаев, когда родительское «тебе это не нужно» оказывалось истиной. Но оценить их совет мы часто можем только после того, как поступим наперекор. То, что ты действительно хочешь, ты сделаешь, какие бы преграды не стояли на пути и какими бы проклятиями тебе не грозили в родительском доме. А совет – он нужен тем, кто сомневается, тогда чужое мнение способно качнуть чашу весов в какую-либо сторону.

987 знаков без пробелов для Галки на тему: “Родители - истина в последней инстанции?”

Закрыть
E-mail It