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

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

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

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

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

Для начала опять немного про 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-сценарий.
Точно так же таблицы, абзацы, дивы, картинки - элементы страницы.

Пример про классы и 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-color: transparent;
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/


#page {
background-color: transparent;
}


Подгруппа Carson


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


Подгруппа Inked


#page {
background-color: transparent;
}
#page-inner {
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: задание для продвинутых: попробуйте задать ленте ДВА фона (две разных картинки), и чтобы оба было видно.
Как они будут сочетаться меж собой - не важно.

Оставить комментарий

Популярные посты:

• Ранее
• Архив