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

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

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

Для начала снова немного 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. Хозяйке на заметку
 Вперёд

Вступите в сообщество, чтобы увидеть все дизайны
промо journals_covers август 1, 2013 11:15 64
Разместить за 200 жетонов
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
Вопрос по стилю Bloggish April: Скажите, пожалуйста, как расположить заголовок и подзаголовок журнала по центру блока header? Если это возможно.
В ваших кодах как минимум в паре мест не хватает закрывающих фигурных скобок, из-за чего не работает всё что ниже. В коде, который в комментарии, кстати, тоже скобки не хватает
Щас буду приставать с вопросами:) В коде добавила пункты по шапке, но цвет шрифта не меняется, подчеркивание не могу убрать, хоть и написала, чтоб его не было. Как поменять цвет щрифта, как убрать подчеркивание из меню и сделать его в одну линию или как-нибудь красиво, как вкладочки отдельные сверху? как разместить название журнала посредине шапки? ффффух, пока все:) спасибо!:)
Милая Yoksel!
Спасибо за урок.
У меня получилось убрать контейнер зеленый - я просто отключила фон.
Но... я бы хотела сдвинуть рисунок - картинку в шапке ниже, чтобы сверху разместить название журнала, подзаголовок и меню. Не получилось.

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

не могу понять, что не так и почему пропали меню и заголовки и почему, если задать заголовок он не показывается...
адрес:
http://community.livejournal.com/sam_test_diz/

мой код:

body{
background-color: #fff;
background-image: url('http://b0.imgsrc.ru/s/sammyy/3/16687063liJ.jpg');
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}

#header{
background-color:#704214;
background-image:url('http://o0.imgsrc.ru/s/sammyy/1/16684891yQk.jpg');
height:250px;
background-repeat:no-repeat;
background-position: top center;
}

#header-inner{
background: transparent;
}

#header-name {
font-color: #ffffff;
text-align: left;
font-size:25px;
font-variant:small-caps;
margin-left: 0px !important; /хотела, чтобы название было по левому краю "шапки"/
padding-top:210px !important; /отступ сверху (?) - хотела, чтобы название ложилось под картинкой, на фон/
}

Благодарствую за помощь.
Скажите, пожалуйста, что я неправильно написала? Родная картинка стиля в шапке остается, а моя поверх накладывается.
#container-inner{
width: 900px !important;}

div#alpha{
width: 695px !important;
background-image: transparent;}

div#beta{
width: 200px !important;}

body{
background-color: #CC9999;
background-image: url('http://www.lenagold.ru/fon/tum/orsv/orsvtum17.jpg');
background-repeat: repeat;
background-position: top center;
background-attachment: fixed;}

#header{
background-color: transparent;
background-image: transparent;}

#header-inner {
background-image: url("http://pics.livejournal.com/viparasolka/pic/0004kqf5");
height: 400px;
background-repeat:no-repeat;}

Спастбо заранее!
В первой понравились спокойные цвета, атмосферно что ли : ) Не понравилась картинка в шапке: не стоит растягивать изображения по вертикали или горизонтали, изменение пропорций очень заметно

Во второй чёрная рамка и серые плашки ни в борщ, но это же не окончательно? : ) Сочетание картинок очень приятное
Gray Sky
Component от Kevin Phillips

/*shapka*/
.header {
height: 235px;
background-image: url('http://img-fotki.yandex.ru/get/4106/eli-post.0/0_3c331_2e63c867_orig');
border:0px solid black;
font-color: #ffffff !important;
font-weight: bold;
}

Если в components выбрать опцию "меню отдельным блоком", то все летит к чертям. И б-г бы с ним, мне такой вид нравится, но вот как поменять цвет шрифта меню? Это меню вверху идет для настройки как все ссылки в жжурнале. Help!
Огромнейшее спасибо за уроки.
Сама как-то расписывала html уроки для школьников - так что знаю, на сколько это сложная и кропотливая работа.
А вот до css как-то дело не дошло.
Тут ведь не только коды нужно знать, но и психологию ошибок.

Долго подбирала новый стиль жж. Пока что остановилась на Quite Lickable - там ведь и ширину основной колонки и сайдбаров менять можно без использования css. Да и задать картинку в заглавии и фон страниц.

=)
Она в #header-content, надо было чо-то попроще брать : ))

> И рыжие буквы, не знаю, как убрать (Свежие записи).

Сейчас добавлю про это в пост


> И в постах текст вылезает за ширину ленты...(((

задайте ширину для div#alpha, немного меньше чем у alpha
Картинка вместо шапки
Скажите, пожалуйста, а как можно поставить картинку вместо шапки и заголовка, просто у меня надпись «Я люблю мохито ...», я хочу ее сделать рукописным шрифтом, с парой клякс. А если нельзя, то какие можно использовать шрифты, там же какой-то маленький список. И если нельзя картинку как можно заголовок выровнять по правому краю ленты с постами.
И, наверное, вопрос должен быть не в этом дне, но как убрать рамочку черную вокруг Side Menu
Картинку вставила, попыталась поменять цвет заголовка и местоположение (было слева, сделала по центру). А нельзя ли как-нибудь ее опустить к нижнему краю? Маржин не сработал ;(

http://saavick.livejournal.com
.header-title {
background-color: transparent;
background-image: url('http://i16.photobucket.com/albums/b7/Klimena/blog/Gate22-1.jpg');
background-repeat: no-repeat;
height: 250px;
width: 1024px;
text-align: center;
color: #6600ff;
}
?

Log in

No account? Create an account