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

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

День четвёртый: фон ленты

Должна сказать, что я страшно рада количеству людей, которые не только освоили предыдущие задания, но и ускакали далеко вперёд!
Люди, вы просто супер! : )

Те, кто просто делает всё вовремя (неважно с какой попытки) - тоже большие молодцы.
Потому что просто берёте и делаете, потому что не сдаётесь когда не получается, потому что не испугались темы, которая некоторым кажется немногим проще ракетостроения.
Теперь вы знаете что это конечно же не так и коды на самом деле совсем не страшные : )

Вы все меня очень радуете - все вместе и каждый в частности.

Теперь перейдём к занятиям.

Для начала опять немного про Css.

1. Если я говорю что для всех стилей коды разные - это означает, что в каждом стиле мы зовём свои элементы, но сообщаем им при этом одно и тоже.

Все цвета, рамки, фоны, ширина, высота и прочие штуки пишутся совершенно одинаково.
Главное - правильно позвать нужный элемент по названию, классу или Id - именно они меняются от стиля к стилю

По-моему, все уже и так это поняли : )

2. Как правильно писать, #beta или div#beta?

Как работает - так и писать. Если оба варианта работают - без разницы какой выбрать.

Другой случай, если вы переопределяете уже имеющиеся стили.
Практически во всех дизайнах к странице подключено несколько файлов со стилями, иногда 5-6 разных.

Иногда даже совершенно корректный код может не заработать из-за того, что во встроеных стилях есть div#beta, а вы написали просто #beta и эта #beta "не слышит" ваши стили, а "слышит" только то, что задано по умолчанию.

Тогда можно попробовать div#beta. Если не помогло - можно применить !important.
Если и это не сработало - ищите ошибки в коде. Скобку не закрыли, точку с запятой потеряли...

Кстати, искать ошибки - это отдельное искусство : )

!important лучше не злоупотреблять, потому что оно может как помочь, так и запутать ещё больше.

3. Кстати, про "слышимость"

Если вы определяете свойства одного элемента в двух разных местах (такое бывает), страница "услышит" последний элемент в коде.

Точнее, как: если задаваемые свойства не пересекаются - проблем не возникнет, а вот если у вас в первом блоке для #header (к примеру) задано border:1px solid red;, а во втором border:0px solid red; - рамки не будет, потому что второй блок приоритетней.

4. Про элементы страницы (выношу из комментов) .
Просто представьте себе всё что ниже, возможно, коды станут вам ещё ближе и понятнее:

Элементы страницы - "кирпичики" из которых она состоит. Вообразите комнату: комната - страница. Стол, шкаф, кровать, окно - элементы комнаты, кошка - javascript-сценарий.
stul ikeaТочно так же таблицы, абзацы, дивы, картинки - элементы страницы.

Пример про классы и Id:

Элемент страницы - стул

Класс элемента - красный стул. В комнате три красных стула.

ID элемента - на красном стуле кто-то нацарапал схему солнечной системы. Такой стул всего один.

5. Как можно "выключить" стили на время?

Просто засуньте нужный блок или строчку в комментарий:

/*

body{
background:yellowgreen;
font-family:Georgia;
}

*/

Этот блок не будет работать, пока вы не вынете его из комментария. Ещё пример:

body{
/* background:yellowgreen; */
font-family:Georgia;
}

Так будет работать весь блок, кроме второй строчки. Полезная штука : )


Теперь о теме урока: фоны ленты

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

Под лентой может подразумеваться как весь журнал, так и только лента записей, без сайдбара. Это зависит от фонов страницы.

Рассмотрим несколько вариантов:

Лента под постами


Лента под всем журналом


Лента есть - фона нет


Как видите варианты могут быть разными, постараемся не запутаться в лентах : )

Ещё раз: фоны ленты - это фон под журналом (не фон всей страницы!) или фон столбца записей.

Прежде чем вы начнёте добавлять свои фоны - надо убрать те что уже есть.
Опять таки: для всех групп стилей коды будут разными. И даже могут различаться - о ужас! - внутри одной группы!
Чем дальше в лес - тем толще партизаны

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

Учитывая количество вариаций внутри группы (23 для Bloggish, 250 для Expressive и так далее) - я не смогу написать все коды сразу, но для начала напишу некоторые, а потом по вашим запросам дополню список.

На самом деле, реально различающихся по строению стилей внутри одной группы не так уж много. Часто разница заключается только в заглавной картинке или в цветовой гамме - тогда коды будут работать для всех похожих стилей. Примеры близняшек:


Bats Blue и Bats Red


Aquatic Moon и Autumn Time


Cityscape Austin и Cityscape Boston

Как видите, это подгруппы внутри группы стилей.

Теперь коды:

Группа: Bloggish

body{
background-image: none;
}

#container{
background-color: transparent;
background-image: none;
}

#container-inner{
background-color: transparent;
background-image: none;
}


Примечание: фон может быть как во всех блоках, так и в каком-то одном.
Экспериметируйте, отключайте по одному или все сразу.
В отличие от Expressive, фоны не кочуют по странице как попало, а находятся в этих трёх блоках : )

Подсказка для сообразительных:

нужные вам блоки шапки - #banner и #banner-inner

Группа: Expressive

Подгруппы Cityscape/Cycling


body {
background-image: none;
}

#content-inner {
background-image: none !important;
}



Подгруппы Camo/Fireplace/Endless Summer/Draft/Elephant/Food/Ghouls/Autumn


#page {
background-color: transparent;
}



Подгруппа Carson


#page {
background-color: transparent;
}
#content-inner {
background-image: none !important;
}



Подгруппа Inked


#page {
background-color: transparent;
}
#page-inner {
background-image: none;
}



Подгруппа Weston


#container {
background-image: none;
}

#page {
background-image: none;
}



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

Подсказка для сообразительных:

нужные вам блоки шапки - #header и #header-inner

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


Группа Flexible Squares

#content{
background-color: transparent;
}

#maincontent {
background-color: transparent;
}



Группа Minimalism

Aquatic Moon и похожие


#page{
background-image: none;
}

.content-inner {
background-color: transparent;
}



Группа Smooth Sailing

.sidebox {
background-color: transparent;
}

.entryHolder {
background-color: transparent;
}


В этом стиле нет общей ленты фона, фон задаётся каждому отдельному посту и блоку сайдбара.


Теперь, когда есть всё необходимое, задание:

1. Возьмите нужный код и посмотрите как он работает.
Когда убедитесь что фоны пропадают как по команде, попробуйте в этих же блоках задать свои фоны или фоновый цвет

Задание достаточно сложное, так что одного вам хватит.

Напоминаю: никакого самобичевания и битья об стенку головой. Приберегите своё время на более интересные вещи.
Не получается - пишите.
Обязательно дайте ссылку на журнал где тестите и подробно опишите проблему, чтобы я знала куда смотреть.
Вставлять коды в комменты не обязательно.

Вперёд, отважные вы мои! : )

Upd: задание для продвинутых: попробуйте задать ленте ДВА фона (две разных картинки), и чтобы оба было видно.
Как они будут сочетаться меж собой - не важно. #alpha и #beta не в счёт


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

начала устанавливать цветные фоны вместо картинки. Светло-зеленый получился, но когда пытаюсь вставить другие цвета- теперь все равно остается зеленый...

Если убираю строки
background-repeat: repeat;
background-position: top center;

то появляется кусок задаваемого цвета (н-р синий, но не на всю ленту, а на половину)
#content-inner {
background-color: #0066CC;
}





кажется, здесь уже слишком много моих сообщений =(
дорогая Yoksel!
я разобралась с проблемой, описанной (все дело в невнимательности), но у меня возник новый вопрос. Я скачала палитру из 5 цветов с сайта, который Вы указывали в первом уроке. Сделала скрин.Обрезала и оставила один цвет, далее закачала его на сайт и указала ссылку в настройках. Так как полосочка узкая, задала повторять фон. Что получилось можно увидеть в моем журнале: а получилось то, что обычно происходит ,когда дома клеят обои: видны границы =(
От этого можно как-то избавиться, или может я изначально сделала что-то неправильно?

...у меня дизайн на основе вашего шаблона с ракушками. Однажды пришлось экономить интернет (и такое в наше время бывает, да! :)) и загружать страницу без картинок - коричневый текст на кофейном фоне плохо читался. Поэтому хочется дополнить - фон (backgound-color) ленты желательно делать похожим по цвету на фоновую картинку, чтобы при отключении картинок текст ленты оставался контрастным с фоном (и читаемым). Спасибо огромное за уроки, я удивляюсь вашему мастерству, терпению и бескорыстию :)
Дорогая Yoksel, у меня к вам такой вопрос: работает ли такое отключение фона по отношению к Army Attire (Smooth Sailing)? (В настройках вкладки Images можно оставить графы Entry Background и Entry Title Background пустыми, чтобы не было фона под столбцом записей, но это приходится делать при каждом посещении настроек, иначе он ставит те цвета фона, которые в этом стиле "По умолчанию")
попробуйте задать ленте ДВА фона (две разных картинки), и чтобы оба было видно.

это как... разным блокам два фона? тогда просто.
или можно одному блоку две разные картинки пририсовать? background1 и background2?
я тоже задалась этим вопросом, попробовала вот так:

div#alpha{
background-image: url(http://s002.radikal.ru/i200/1001/ac/153e7aebaf9c.jpg)!important;
background-repeat: repeat;
}

div#beta{
background-image: url(http://s002.radikal.ru/i200/1001/ac/153e7aebaf9c.jpg)!important;
background-repeat: repeat;

наверное, Вы можете сделать для ленты с фоном, а для сайдбара -без...если это подходит для Вашего стиля
Ой, я наверно отношусь как раз к той группе людей, для которых это все сверхестественное чудо!!! никак не могу разобраться. Как же мне сделать так, чтобы изменить в моем журнале только фон под постами, а все остальное оставить без изменений? вот мой журнал http://toniatueva.livejournal.com/ ПОМОГИТЕ, ПОЖАЛУЙСТА
Смотря что вы хотите получить. Если общий цвет под обоими столбцами, задайте фон их контейнеру.

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

> И еще вопрос - как вставить в поле не цвет, а картинку?

Точно так же как в body, только вместо body позовите нужный элемент, например #alpha
Как я уже говорила, в некоторых стилях много вложенных блоков, вот этим и надо воспользоваться. Можете задать фоновую картинку #page-inner, например, или другим блокам внутри этого.
Смотря что хотите получить в итоге
Добрый день! Мне очень нравятся уроки. Скажите пожалуйста, как правильно разместить в div#header карту ссылок. Делала ее по Вашим советам в сообществе, сделать саму карту удалось, а разместить в шапке нет :( Вот она сама:









Буду благодарна за ответ!!!
Спасибо Вам огромное за такие замечательные и полезные уроки!

Я тоже присоединяюсь к вопросу о Smooth Sailing (кодах для него) и извините, если опережаю события или туплю: а в этом варианта диза возможен хэдер? (У меня как раз Under Fire)
клааааасссс!!!:) замечательно получается:) спасибо))))
а можно ли сделать так, чтоб лента сайдбара была одной высоты с блоком ленты, фиксированной не зависимо от наличия в сайдбаре всех его составляющих: линков, тэгов и т.д.?
http://community.livejournal.com/khaleeda_design/
а высота, размер и положение текста в шапке это когда будет? а то у меня цвет текста не меняется, стиль у меня Expressive Winter ад chasethestars (вчера забыла про это написать:))
чтоб лента сайдбара была одной высоты с блоком ленты
> Можно ли сделать так, чтоб лента сайдбара была одной высоты с блоком ленты, фиксированной не зависимо от наличия в сайдбаре всех его составляющих: линков, тэгов и т.д.?

Это делается не совсем так: высоту сайдбара фиксировать не надо, потому что высота содержимого может быть самой разной.
А решение очень простое: делаете картинку с фоновым цветом под сайдбар и шириной с сайдбар. Высота любая. Сохраняете в Gif или Png и ставите эту картинку фоном не сайбару, а общему контейнеру. Положение фона подгоняете под сайдбар, сайдбар слева - фон слева с повторение по вертикали.

Таким образом получается фон под сайдбаром независимый от его высоты


> а высота, размер и положение текста в шапке это когда будет?

Скоро, завтра может быть : )

Edited at 2010-01-23 11:47 (UTC)
?

Log in

No account? Create an account