Боди, топменю и сайдбар.
Попросили...
*У меня к тебе предложение-просьба: неплохо бы каждый блок диза расписать кто за что отвечает\влияет и как с ними бороться))
Это не урок (поскольку я сама ещё не очень много знаю), а так, делюсь опытом.
Строго не судите, рассказываю как могу. Если кто поймёт моё косноязычье, отлично!)) Если нет - спрашивайте. Будем разбираться))
Кто чуток знает английкий, тому легче)) Я учила немецкий)) Кстати, inner - внутренний
Картинку стырила в http://community.livejournal.com/journals_covers/78018.html.
Там же подробные уроки и вообще много умностей про дизайн журнала.
Начнём с body
Ну про альфу и бету знают все.
#content-inner - это всё, что ниже шапки. Если вам надо подтянуть к шапке посты и сайдбар, уменьшаете TOP: у меня тут стоит top: -25px.
Далее div.post-asset. Сюда я ставлю цвет и тень для блока.Это сам пост.Ну и отступы-ширину, это само собой.
div.asset-inner - внутренности поста. Если не хотите, что бы текст прилепился к рамке, то размер сделайте меньше, чем post-asset. Или воспользуйтесь padding.
padding:10px 20px 30px 40px; (цифры для наглядности)
10px - верх
20px - справа
30px -низ
40px -слева
.post-asset .asset-body - это *тело поста, ваша запись. Сюда можно кроме остальных атрибутов, указать стиль шрифта (допустим font-style: italic;), тогда прописью будет только сам пост. Если это сделать в боди, таким весь шрифт дизайна будет.
/*----TOPMENU----*/ - это шапка дизайна.
div#header - это сама шапка в целом. Тут у нас месторасположение, размер, цвет и тень шапки.Если хотите, что бы тень была только вокруг картинки, то её прописываете там же, где и картинку. Или в #header-photo,а в header-photo-inner только картинку.
#header-inner - внутренний блок в шапкеЕсли вы хотите поставить не одну, а две картинки, то первая будет в #header-photo, а вторая в
#header-photo-inner. Вторая должна быть на прозрачном фоне, иначе перекроет первую и ту видно не будет.
Что бы картинка не повторялась (если маленькая), background-repeat: no-repeat;
Вообще в коде есть правило *что ниже, то и главней.Исключение из этого правила делается путём прописывания !important; Пишется он через пробел
вот так:
width: 1202px !important;
div#header-description - это ваш подзаголовок.Он весь прописывается в /*----TOPMENU----*/, т.к. не является ссылкой.Кстати, у некоторых он так и остаётся сереньким и маленьким, в генераторе его оформления просто нет.
ul.nav - меню
ul.nav li.item - пункты меню
ul.nav li.current - выбраный пункт меню.Размер , цвет и стиль шрифта прописываются в /*----LINKS----*/ (ссылки)
(это почти в конце кода ищите), потому что являются ссылками. Заголовки и метки, кстати, тоже там.Ну об этом позже, потому что пишу по своему коду *сверху вниз))
prevnext skiplinks a - *Предыдущая *Следующая запись внизу блога.
/*----SIDEBAR----*/
div.widgetт - цвет и тень для сайдбара я прописываю тут.
background-color: #fff; - цвет (это белый)
box-shadow: 0px 0px 8px 0px #9C815A -это тень
0 0 20px rgba(228, 205, 157, 0.84) inset - внутренняя тень . пишутся через запятую:
box-shadow: 0px 0px 8px 0px #9C815A, 0 0 20px rgba(228, 205, 157, 0.84) inset;
.widget .user-pic a img,
.widget .user-pic img {
margin: 10px 40px;} тут его можно поставить посередине, а не сбоку профиля, с помощью margin.
div.calendar-widget td,
div.calendar-widget th{
text-align: center;
font-size: 16px;
box-shadow: 0px 0px 1px 0px #9C815A; календарь в сайдбаре. С помощью тени его можно оформить *в квадратиках. Не придумала, как ещё обозвать)))
.profile-name - ваше имя в профиле. Цвет, размер и семейство шрифта указывается тут.
Лирическое отступление ))
Отступы
Margin - это отступ наружу
Отступ внутрь - padding
Задаётся так же как margin, но при этом объект "отталкивает" не внешние объекты, а своё содержимое.
Если нужно чтобы содержимое не прилипало к краям - нужен padding. Если нужно чтобы сам блок никуда не прилипал - margin.
Продолжение будет позже.
*У меня к тебе предложение-просьба: неплохо бы каждый блок диза расписать кто за что отвечает\влияет и как с ними бороться))
Это не урок (поскольку я сама ещё не очень много знаю), а так, делюсь опытом.
Строго не судите, рассказываю как могу. Если кто поймёт моё косноязычье, отлично!)) Если нет - спрашивайте. Будем разбираться))
Кто чуток знает английкий, тому легче)) Я учила немецкий)) Кстати, inner - внутренний
Картинку стырила в http://community.livejournal.com/journals_covers/78018.html.
Там же подробные уроки и вообще много умностей про дизайн журнала.
Начнём с body
Ну про альфу и бету знают все.
#content-inner - это всё, что ниже шапки. Если вам надо подтянуть к шапке посты и сайдбар, уменьшаете TOP: у меня тут стоит top: -25px.
Далее div.post-asset. Сюда я ставлю цвет и тень для блока.Это сам пост.Ну и отступы-ширину, это само собой.
div.asset-inner - внутренности поста. Если не хотите, что бы текст прилепился к рамке, то размер сделайте меньше, чем post-asset. Или воспользуйтесь padding.
padding:10px 20px 30px 40px; (цифры для наглядности)
10px - верх
20px - справа
30px -низ
40px -слева
.post-asset .asset-body - это *тело поста, ваша запись. Сюда можно кроме остальных атрибутов, указать стиль шрифта (допустим font-style: italic;), тогда прописью будет только сам пост. Если это сделать в боди, таким весь шрифт дизайна будет.
/*----TOPMENU----*/ - это шапка дизайна.
div#header - это сама шапка в целом. Тут у нас месторасположение, размер, цвет и тень шапки.Если хотите, что бы тень была только вокруг картинки, то её прописываете там же, где и картинку. Или в #header-photo,а в header-photo-inner только картинку.
#header-inner - внутренний блок в шапкеЕсли вы хотите поставить не одну, а две картинки, то первая будет в #header-photo, а вторая в
#header-photo-inner. Вторая должна быть на прозрачном фоне, иначе перекроет первую и ту видно не будет.
Что бы картинка не повторялась (если маленькая), background-repeat: no-repeat;
Вообще в коде есть правило *что ниже, то и главней.Исключение из этого правила делается путём прописывания !important; Пишется он через пробел
вот так:
width: 1202px !important;
div#header-description - это ваш подзаголовок.Он весь прописывается в /*----TOPMENU----*/, т.к. не является ссылкой.Кстати, у некоторых он так и остаётся сереньким и маленьким, в генераторе его оформления просто нет.
ul.nav - меню
ul.nav li.item - пункты меню
ul.nav li.current - выбраный пункт меню.Размер , цвет и стиль шрифта прописываются в /*----LINKS----*/ (ссылки)
(это почти в конце кода ищите), потому что являются ссылками. Заголовки и метки, кстати, тоже там.Ну об этом позже, потому что пишу по своему коду *сверху вниз))
prevnext skiplinks a - *Предыдущая *Следующая запись внизу блога.
/*----SIDEBAR----*/
div.widgetт - цвет и тень для сайдбара я прописываю тут.
background-color: #fff; - цвет (это белый)
box-shadow: 0px 0px 8px 0px #9C815A -это тень
0 0 20px rgba(228, 205, 157, 0.84) inset - внутренняя тень . пишутся через запятую:
box-shadow: 0px 0px 8px 0px #9C815A, 0 0 20px rgba(228, 205, 157, 0.84) inset;
.widget .user-pic a img,
.widget .user-pic img {
margin: 10px 40px;} тут его можно поставить посередине, а не сбоку профиля, с помощью margin.
div.calendar-widget td,
div.calendar-widget th{
text-align: center;
font-size: 16px;
box-shadow: 0px 0px 1px 0px #9C815A; календарь в сайдбаре. С помощью тени его можно оформить *в квадратиках. Не придумала, как ещё обозвать)))
.profile-name - ваше имя в профиле. Цвет, размер и семейство шрифта указывается тут.
Лирическое отступление ))
Отступы
Margin - это отступ наружу
Отступ внутрь - padding
Задаётся так же как margin, но при этом объект "отталкивает" не внешние объекты, а своё содержимое.
Если нужно чтобы содержимое не прилипало к краям - нужен padding. Если нужно чтобы сам блок никуда не прилипал - margin.
Продолжение будет позже.