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