yoksel : ) (yoksel) wrote in journals_covers,
yoksel : )
yoksel
journals_covers

Category:

День пятый: шапка журнала

Для начала снова немного Css.

1. Как двигать журнал влево-вправо?

Код простой: margin: 0px auto 0px auto;

Задавать его надо самому внешнему контейнеру журнала. Помните, что контейнеров может быть несколько?

Конкретно этот ставит журнал по центру. Если вам нужно сдвинуть его куда-либо - меняйте 2 или 4 значение.

Последовательность значений: верх - право - низ - лево.

Пример: margin: 0px auto 0px 20px;

Этот код прибьёт журнал к левому краю с отступом в 20 пикселей.

Код универсален для любых блоков которые вы захотите подвинуть: для шапки, внутренних колонок, меню и так далее.
Иногда может потребоваться !important, это выясняется опытным путём.

Какой блок нужен для конкретной группы?

Bloggish: #container

Expressive/Mixit: #container-inner

Flexible Squares: #content

Minimalism: блок, которому вы задали ширину журнала

Smooth Sailing: .pageblock


2. Как соединять стили?

Вроде бы все разобрались, но на всякий случай уточню: блоки кода просто ставятся один под другой. Никакой вложенности!

Второй момент: если у вас несколько стилей для одного блока, лучше объединять их все в одином месте.

Неверно:

#alpha{
width:600px;
}

#alpha{
background:transparent
}


Правильный вариант:

#alpha{
width:600px;
background:transparent
}


Так же в целях повышения читабельности кода лучше описывать блоки от общего к частному: сначала про body, потом про #container, затем про #beta и #alpha, затем стили поста и так далее.

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

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

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


Теперь перейдём к теме урока: шапка журнала

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

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

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

Bloggish

#banner - вся шапка
#banner-inner - внутренний блок в шапке
#banner-header - название журнала
#banner-description - подзаголовок

Chameleon

.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 - подзаголовок журнала

Expressive/Mixit

#header - вся шапка
#header-inner - внутренний блок в шапке
#header-name - название журнала
#header-name a - ссылка в названии - цвет заголовка задаётся здесь!
#header-description - подзаголовок
ul.nav - меню
ul.nav li.item - пункты меню
ul.nav li.current - выбраный пункт меню. Правильно перекрасить - .nav .current a, так как он тоже является ссылкой
ul.nav a - ссылка в меню - цвет ссылкам меню задаётся здесь!

Важно!!! если вы меняете высоту #header, обязательно ставьте такую же или большую #header-inner! Иначе пропадает всё содержимое шапки
И ещё: чтобы задать цвет заголовку и пунктам меню, задавайте его ссылкам в этих блоках!

Flexible Squares

#header - вся шапка
ul.navheader - меню
ul.navheader li - пункты меню
.title - название журнала
.subtitle - подзаголовок

Minimalism

.header - вся шапка
.header .userpic - внешний блок с юзерпиком
.header .userpic-in - внутренний блок с юзерпиком
.header H1,.header H2, .header H3 - заголовок, подзаговоловок и ссылка на ник юзера (в последовательности не уверена)
.header .nav - меню
.header .nav .item - пункты меню
.header .nav .item-selected - текущий пункт меню

Кроме того, там есть персональные классы у ссылок меню:

.item-recent - последние записи
.item-friends - друзья
.item-archive - архив
.item-profile - профиль
.item-rss - Rss

Smooth Sailing

.header-title - заголовок
.header-subtitle - подзаголовок
.header-icon - юзерпик
.bodyheaderblock - блок с заголовком страницы
.body-title - заголовок страницы
.header-menu - блок с меню
.header-menu ul - список с меню
.header-menu li - пункты меню
.header-menu a ссылка в меню


Теперь ещё немного Css, который вам сейчас очень пригодится : )

Цвет фона и фоновую картинку вы уже научились менять : )

Высота элемента: height: 200px;

Ширина: width:600px;

↑ значения только для примера, подберите свои

Отступы

Вы уже познакомились с margin: margin: 0px auto 0px auto;
Margin - это отступ наружу

Отступ внутрь - padding
Задаётся так же как margin, но при этом объект "отталкивает" не внешние объекты, а своё содержимое.

Если нужно чтобы содержимое шапки не прилипало к её краям - нужен padding. Если нужно чтобы сама шапка никуда не прилипала - margin.

Если нужно задать только одно значение - уточняем с какой стороны нужен отступ. Например:

margin-left:15px; или padding-top:10px;



Шрифт и цвет текста

Размер шрифта: font-size: 20px; (так же можно задавать в процентах и em, после цифры обязательно пишите единицу измерения)

Цвет шрифта: color: #ffcc00;

Жирность: font-weight: bold; нежирный - normal

Наклонный: font-style:italic;


Выравнивание текста

text-align: left;

Варианты: left/right/center (лево/право/по центру)



Ссылки

Подчёркивание: text-decoration: underline; отключить - text-decoration: none;

a:link - обычная ссылка

a:visited - посещённая

a:hover - ссылка при наведении

a:active - при нажатии


Задание:

Оформить шапку журнала по своему вкусу и похвастаться : )


Напоминаю: если есть вопросы (а они обязательно будут) - пишите. Если что-то не получается - пишите, всё починим : )
Самый капризный стиль для переделки шапки - Minimalism



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

Tags: useful: уроки по оформлению ЖЖ, ЖЖ-дизайн за 10 дней
Subscribe
promo journals_covers august 1, 2013 11:15 62
Buy for 200 tokens
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 1918 comments