Для создания третьего блога «Записки на заборе» заменяем папку images активного шаблона "Myblog" на images из папки myblog3. Дизайн этого блога немного отличается от двух предыдущих, поэтому после замены изображений у нас получается вот такая ерунда.

Чтобы привести шаблон в порядок, необходимо внести небольшие изменения в CSS код шаблона.

1.Высота блока header уменьшился в два раза, поэтому в коде файла template.css

#header {

height:240px;

background-image:url('../images/header.png');

overflow:hidden;

}

необходимо высоту поставить 120px.

2. Название блога сдвинем на 60px вправо

#header h1{

padding:60px 0 0 290px;

font: bold 36px Georgia, Times New Roman, Times, serif;

text-align:left;

color:#fff;

border:none;

}

меняем 290 на 350px.

3. Блок topmenu для вывода горизонтального верхнего меню увеличился на 20px, в коде

#topmenu {

height:60px;

background-image:url('../images/topmenu.png');

overflow:hidden;

}

меняем 60 на 80px.

4. С блоком меню разобрались , но само меню висит на веревке, давайте перетащим его на забор. Для этого изменим слегка положение модуля .moduletable_topmenu в блоке topmenu . CSS код всех меню у нас находится в файле menu.css, его и будем редактировать.

В коде

.moduletable_topmenu {

font: bold 16px Georgia, Times New Roman, Times, serif;

font-style:italic;

text-align:right;

color:#1a688f;

margin:40px 100px 0 150px;

}

Margin заменим на margin: 0 100px 40px 150px.

Дальше разберемся с контентом на листе, вернемся к редактированию файла template.css.

5. Наша страница шириной 950px, из них 650 для вывода основного контента и 300px - это правая колонка. Контент загружается в блок content.

#content {

float:left;

width:580px;

overflow:hidden;

margin-left:70px;

}

Когда у нас вместо листа был блокнот, то нам нужно было переместить блок с контентом влево на 70px , чтобы текст не залазил на переплет блокнота. Соответственно на сам блок content оставалось всего 580px (70+580=650).

Теперь нам не нужен такой отступ, поэтому меняем ширину блока content с 580px на 650px и убираем margin-left:70px совсем.

6. Внесем коррективы в отступы правой колонки. Под правую колонку у нас отводится 300pх. Из них было 255px под контент колонки, 35 – отступ справа, 10 – отступ слева (255+35+10=300).

#right {

float:left;

width:255px;

margin:0 35px 0 10px;

}

Увеличим ширину колонки до 275px, а отступ справа уменьшим до 15px.

Теперь разберемся с нижней частью блога.

7. Блок footer больше не содержит изображения, но для того чтобы было видно газоны на заднем плане, блок надо увеличить по высоте.

Код

#footer{

height:150px;

background: url('../images/footer.png') no-repeat;

width:100%;

overflow:hidden;

clear:both;

}

заменяем на код

#footer{

height:200px;

width:100%;

overflow:hidden;

clear:both;

}

Если будете использовать этот дизайн блога, то не забудьте из папки images удалить файл footer.png и внести изменения в templateDetails.xml.

8. Осталось разобраться с блоком art_bot. В новом дизайне этот блок не имеет фиксированную ширину и должен растягиваться по ширине экрана монитора. Но мы имеем только одну картинку art_bot.png высотой 200px и шириной 587px.

Давайте заставим изображение повторятся по оси X, для этого код

#art_bot{

background-image:url('../images/art_bot.png');

background-position:bottom center;

background-repeat: no-repeat;

}

заменяем на

#art_bot{

background-image:url('../images/art_bot.png');

background-position:bottom;

background-repeat:repeat-x;

}

Все изменения в код внесены и у вас есть шикарный шаблон блога «Записки на заборе». Вы можете внести свои изменения в дизайн, PSD-исходник лежит в папке myblog3.

Для особо ленивых, кто не хочет ковыряться в коде, есть установочные пакеты шаблонов всех трех блогов в соответствующих папках myblog1, myblog2, myblog3.

Надеюсь, что мои уроки по созданию шаблона для блога были вам полезны.

Удачи в нелегком , но интересном деле веб-строительства!

Продолжение следует… В планах разобрать создание различных по дизайну и назначению шаблонов.

Скачать установочный пакет блога.