У кого таких подвала и чердака нет, и кто хочет себе их построить, читаем инструкцию:
1. CSS - описание для чердака или подвал
Чердак:
#top-wrapper {
width: 900px;
margin: 0 auto;
background: $top_bg;
color: $top_color;
font-size: 100%;
}
Подвал
#bottom-wrapper {
width: 900px;
margin: 0 auto;
background: $bottom_bg;
color: $bottom_color;
font-size: 100%;
}
width
- это по английски ширина. Найдите самую широкую часть вашего блога (называться она может по-разному) и поставьте вместо моих 900px .
Кто использует "резиновые шаблоны" (у вас ширина измеряется не в пикселях, а в процентах) ставит width 100%.
background - фон мы сказали, что фон будет задаваться в переменной top_bg (для чердака) и bottom_bg (для подвала)
color - цвет шрифта тоже для удобства вынесем в переменные: top_color (для чердака) и bottom_color (для подвала)
font-size - размер шрифта я для начала поставила 100% но вы потом можете уменьшить или увеличить размер шрифта в зависимости от ваших потребностей
1а. Куда поставить CSS описания чердака и подвала:
Я предлагаю в вашем шаблоне найти строчку ]]></b:skin> и ПЕРЕД ней добавить наши описания.
Раз уж мы с вами решили все делать удобно и по науке, т.е. вынесли описания цветов фона и шривта в переменные, то
2. Переменные :
<Variable name="top_bg" description="Цвет фона на чердаке"
type="color" default="#ffffff" value="#ffffff">
<Variable name="bottom_bg" description="Цвет фона в подвале"
type="color" default="#ffffff" value="#ffffff">
<Variable name="top_color" description="Цвет шрифта на чердаке"
type="color" default="#000000" value="#000000">
<Variable name="bottom_color" description="Цвет шрифта в подвале"
type="color" default="#000000" value="#000000">
Чтобы не долго думать, да и у всех цвета в блоге разные я поставила начальные цвета: черные буквы на белом фоне - как в книжке, а вы уж потом их сами себе исправьте. Очень удобно будет через Дизайн - Цвета и Шрифты
Следующий вопрос куда эти описания цветов поставить... Очень вероятно, что у вас в HTML-коде шаблона есть такая строчка:
/* Variable definitions
Она обычно располагается очень близко к началу и после этой строчки обычно идут описания переменных примерно такого же вида как мы только что описали. Вот и добавьте туда описание наших новых четырех переменных.
Все описания сделаны осталось последнее вставить их на конкретное место в структуре блога.
Проверьте не сломалось ли чего-нибудь в вашем шаблоне нажав кнопку ПРОСМОТР и если все хорошо нажимаем кнопку СОХРАНИТЬ.
Внимание! Чтобы совсем не запутаться галочку на РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА мы НЕ СТАВИМ.
3. Изменения в структуре шаблона.
Это самая трудная для объяснения-описания часть, потому что во многих шаблонах используются разные названия для структурных единиц.
а) Прежде всего находим начало <body>
не далеко от <body> видим описание заголовочной части блога. Оно очень похоже на это:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Заголовок вашего блога (Header)' type='Header'/>
</b:section>
</div>
Теперь после закрывающего </div> можно вставить наш чердак:
<div id='top-wrapper'>
<b:section class='topper' id='topper'/>
</div>
Если ничего в шаблоне не испортилось, то можно сохранить изменения.
б) Подвал будем вставлять внизу кода.
Идем в самый низ нашего кода видим строчки:
</div>
</body>
</html>
ПЕРЕД </div> вставляем код для нашего подвала:
<div id='bottom-wrapper'>
<b:section class='bottommer' id='bottommer'/>
</div>
Еще раз проверяем и если ничего в нашем шаблоне не испортилось нажимаем кнопку СОХРАНИТЬ.
Теперь идем в Элементы страницы и видим новые места в Макете куда можно добавить гаджеты. Идем в Шрифты и цвета и меняем скучную черно-белую раскраску наших чердака и подвала на более соответствующую цветам вашего блога.
Еще на чердаке можно разместить горизонтальное меню, но о нем мы поговорим в следующий раз.
источник:http://blogger4you.blogspot.com/2009/05/blogger-attic-and-basement-in-your.html
|
|
0 коммент.:
Отправить комментарий