Linkfeedator

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

Дата: 28.05.2011 г.
E-mail
(0 Голосов)
Должна сказать, что мы страшно рада количеству людей, которые не только освоили предыдущие задания, но и ускакали далеко вперёд!
Люди, вы просто супер! : )

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

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

Теперь перейдём 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-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/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 не в счёт


Навигация по урокам
Назад Вперёд



Просмотров 99

Добавить в закладки:

Еще по теме