День четвёртый: фон ленты
Дата: 28.05.2011 г.
Должна сказать, что мы страшно рада количеству людей, которые не только освоили предыдущие задания, но и ускакали далеко вперёд!
Люди, вы просто супер! : )
Те, кто просто делает всё вовремя (неважно с какой попытки) - тоже большие молодцы.
Потому что просто берёте и делаете, потому что не сдаётесь когда не получается, потому что не испугались темы, которая некоторым кажется немногим проще ракетостроения.
Теперь вы знаете что это конечно же не так и коды на самом деле совсем не страшные : )
Вы все меня очень радуете - все вместе и каждый в частности.
Теперь перейдём
Точно так же таблицы, абзацы, дивы, картинки - элементы страницы.
Пример про классы и 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 не в счёт
Люди, вы просто супер! : )
Те, кто просто делает всё вовремя (неважно с какой попытки) - тоже большие молодцы.
Потому что просто берёте и делаете, потому что не сдаётесь когда не получается, потому что не испугались темы, которая некоторым кажется немногим проще ракетостроения.
Теперь вы знаете что это конечно же не так и коды на самом деле совсем не страшные : )
Вы все меня очень радуете - все вместе и каждый в частности.
Теперь перейдём
Точно так же таблицы, абзацы, дивы, картинки - элементы страницы.Пример про классы и 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
Добавить в закладки:
| akka_knebekaise @ 2010-10-26T00:50:00 » |
|---|



