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

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

День второй: стиль и фон

Сегодня мы сделаем два простых действия: выберем стиль и установим фон.

Если ваш стиль устраивает вас на 100%, эту часть читать не обязательно. Если не устраивает - продолжаем.

Для начала убедитесь что у вас система S2. Зайдите на страницу настроек оформления. Если вы там видите каталог стилей, значит у вас S2:

customize

В ином случае страница предложит вам сменить систему стилей, тогда перейдите на S2.

Внимание: если вам нравится стиль, который у вас сейчас, перед началом экспериментов запишите что у вас сейчас установлено. Это указано в верхнем правом углу страницы настроек:

3.gif

Можете сделать скриншот или записать где-нибудь название стиля, чтобы потом иметь возможность к нему вернуться.

Если используете какие-то коды во вкладке Css - сохраните их в файл


Теперь можете погружаться в пучину экспериментов : )

Если вы давно мечтали разобраться в каталоге стилей, сейчас самый подходящий момент.

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

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

Пожалуйста, имейте в виду, что мы можем менять только внешний вид страницы, а не её скелет.

Мы не можем добавить календарь или список меток на страницу, если их не было в стиле изначально (например, в Generator, Notepad или Classic).
Мы не можем повыкидывать лишние ссылки под постом (кроме стилей группы Minimalism) или добавить туда свои.

Всё это можно сделать в платных слоях, но мы не будем о них говорить.

Больше о главных различиях стилей есть здесь.

Правда, там написано про самые удобные для переделки стили:

• Bloggish
• Expressive/Mixit
• Flexible Squares
• Minimalism
• Smooth Sailing

Но в остальных примерно та же логика: если ссылок на комменты две - другие туда не вставишь. Если в верхнем меню какие-то пункты лишние - их так же не уберёшь и не добавишь.

Выбирать именно эти стили не обязательно, вы можете выбрать стили других групп, если они вам больше по душе.

Примечание: некоторые стили в переделке сложнее остальных. Это стили типа Weston группы Expressive и стили группы Minimalism.
В первом случае много лишних фонов, во втором - сложный по строению.
Эти стили выбирать не рекомендуется.

Установите себе выбранный стиль и запомните что именно вы себе установили.
Это важно, потому что коды для разных стилей будут разные. Коды от одного стиля не будут работать в другом.

У всех групп разное строение страницы, разные классы и идентификаторы элементов. Чтобы изменить вид элемента, надо "позвать" его по ID или названию класса.

Если вы по ошибке возьмёте коды от другого стиля, может получиться так, что вы зовёте, к примеру, элемент Вася, а на странице нет ни одного Васи!
Или Вася вас не слышит, потому что он вообще в другом городе.
Соответственно, коды вы вставите, но на странице при этом ничего не произойдёт.

Будьте внимательны


Для работы важно запомнить группу стилей:

group

Жирным шрифтом - индивидуальное название дизайна.
Если на странице каталога ввести его в поле поиска, вы попадёте прямо на нужный дизайн.

Запомните что вы установили и перейдём ко второй части урока: вставляем фоновую картинку.

Это одно из самых простых действий в настройке дизайна.

Во-первых, во многих стилях фон можно задать в настройках:

- 3 Column
- A Novel Conundrum
- Chameleon
- Classic
- Clean and Simple
- Component
- Digital Multiplex (OSWD)
- Disjointed
- Flexible Squares
- Generator
- Gradient Strip
- Haven
- Magazine
- Nebula
- Notepad
- Quite Lickable
- Punquin Elegant
- Refried Paper
- Smooth Sailing
- Tabular Indent
- The Boxer
- Unearthed
- Variable Flow

Если ваш стиль есть в списке, поищите в настройках вкладку Images.
В хамелеоне настройки фона находятся во вкладке Page

Если нет, фон можно вставить с помощью кода:

body{
background-color: #fff;
background-image: url('адрес вашей картинки');
background-repeat: repeat;
background-position: center top;
background-attachment: scroll;
}


Важно! Картинка должна находится в интернете, а не у вас на компе.

Теперь рассмотрим параметры управления фоном:

Цвет фона

background-color: #fff; - задаёт цвет фона, в данном случае - белый.

Цвет можно записать по-разному:
- по названию: white, red, green, yellow
- полным кодом: #FFFFFF, #FF9900, #000000, #FF0000, #98F563
- коротким кодом, если все 6 букв название одинаковые: #FFF, #000, #999, #222, #DDD

Перед названием цвета (white, red) решётка не ставится
Код можно писать прописными и строчными: #FFFFFF = #ffffff


colors
Таблица цветов

Фоновая картинка

background-image: url('адрес вашей картинки'); - задаёт фоновую картинку

Если вы используете галерею ЖЖ, убедитесь что картинка доступна не только вам
Пример адреса картинки: http://img-fotki.yandex.ru/get/4113/yoksel.4b/0_34776_64f336a5_orig.jpg (никаких скобочек, тегов или img src!)
Расширение файла должно быть gif, jpg или png. Это важно. Если расширение другое (zip, txt, html, pdf...) - это не картинка

Повторение фона

background-repeat: repeat; - повторение фона

repeat

Расположение фона

background-position: top; - расположение фона

bg side

Прокрутка фона

background-attachment: scroll; - прокрутка фона.

scroll - фон ездит вместе со страницей.
fixed - стоит на месте.


Код рассмотрен под микроскопом, можно начинать экспериментировать. Скопируйте код

body{
background-color: #fff;
background-image: url('адрес вашей картинки');
background-repeat: repeat;
background-position: center top;
background-attachment: scroll;
}


вставьте его во вкладку Css в настройках и поиграйтесь с параметрами.

Можете оставить только строчку с цветом фоном или задать только фоновую картинку.

Внимание: адрес вашей картинки замените на адрес вашей картинки, иначе компилятор кода будет ругаться из-за кириллицы

Вообще русского языка в поле для Css быть не должно - коды не будут работать.
Каждая строчка должна заканчиваться ;, иначе следующие работать не будут
Коды относящиеся к одному элементу (в данном случае - body) должны находиться внутри фигурных скобок { }

За фигурными скобками ничего лишнего быть не должно

Для удобства можно оставлять себе "записочки" в коде - комментарии. Для Css это выглядит вот так:

/*

внутри любой ваш комментарий ЛАТИНИЦЕЙ, например: Eto fon jurnala или Hello world!

*/

Ещё примеры:

/* ---- SIDEBAR ---- */ или /* ---- FOOTER ---- */ или /* ---- Css by me ---- */

Очень удобная штука для разметки длинных кодов или записок потомкам.

Задание:

1. Познакомьтесь с группами стилей в каталоге
2. При желании выберите и установите себе другой стиль. Напишите в комментах что выбрали
3. Вставьте фон страницы и поиграйтесь с параметрами.

Если что-то непонятно или не получается - спрашивайте.
Не стесняйтесь спрашивать, не бойтесь ошибаться. Это нормально : )

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

В некоторых стилях группы Minimalism фон задаётся в #page, а не в body.

В любом случае, если код не работает - пишите мне


Навигация по урокам
Назад День 1. Поиск картинок
День 2. Стиль и фон
День 3. Ширина журнала
День 4. Фон ленты
День 5. Шапка журнала
День 6. Сайдбар
День 7. Посты
День 8. Страницы комментариев
День 9. Метки и календарь
День 10. Хозяйке на заметку
 Вперёд

Вступите в сообщество, чтобы увидеть все дизайны
Отважно : ) Для того чтобы его привести в нормальный вид, надо много чего написать, проще всё-таки готовый переделывать - не в смысле мой взять (слишком много кодов), а взять из каталога. С меньшем количеством кода удобнее разбираться
спасибо за урок, начала эксперименты)
Работаю пока с тем, что у меня стоит сейчас - Army attire (smooth sailing от Michael Raffoul). Есть такой факт, что в этом стиле в настройках во вкладке Images, где задаешь фон, не сделать так, чтобы фон был fixed, то есть до вашего урока он у меня крутился вместе со страницей. А теперь по вашему коду он у меня стоит на месте)
Любимый мной дизайн Weston Natural Expressive от Lilia Ahner буду обживать для себя :) Эксперименты с фоном прошли удачно (кажется), попробую еще другие картинки)))
Как это, оказывается, пока просто!!! :)
yoksel, я Вас обожаю. Вы молодец. Перепостил баннер акции у себя) Пожалуй засяду за изучение, надо наконец сделать что-нибудь приятное своему журналу)
Скажите, а что тут не так? Я в кодах вообще ничего не смыслю, но пытаюсь! :)

header{
background-color: #990000;
background-image: url('тут моя картинка должна начинаться с <img ?? '); background-repeat: no repeat; background-position: top; background-attachment: fixed; }
А как определять, какой стиль подойдет мне, если я сделала макет?
Flexible Squares стоит у меня сейчас и я отчасти на него ориентировалась при создании макета... но.... у Flexible Squares ссылки в столбик, а у меня они получаются в строчку...
Мне подбирать другое оформление? Я что-то не увидела ни одной схемы со ссылками в строчку.
по количеству ссылок под постом : ) У вас таки да - Flexible Squares подойдёт больше всего

> у Flexible Squares ссылки в столбик, а у меня они получаются в строчку...

На самом деле, они в строчку, но как у вас в макете было, так Рутения и сделала. Короче, их можно и так и так, не беспокойтесь об этом.

> Я что-то не увидела ни одной схемы со ссылками в строчку

А здесь смотрели? : )
а вот у меня вопрос.у меня стоит Tranquility II и я не знаю, как сделать чтобы боковая колонка и полоска с названием журнала стали просто прозрачными.подскажите, пожалуйста.
ой, как интересно))) фон вставила - получилось почти что хочу. только еще бы виньеток на шапку как-то накидать, и второй фон-подложку убрать бы совсем...
?

Log in

No account? Create an account