ФКСП №1. Меняем шаблон блога

Шаблон блога можно изменить несколькими способами: погуглить, скачать и установить чей-нибудь новый шаблон или выбрать из имеющихся на блогспоте и видоизменить его. Если только у вас нет особых желаний по поводу 3-х или 4-х колоночных шаблонов. Предлагаю остановиться на втором варианте. В общем-то, при наличии фантазии, можно разнообразить и стандартный шаблон, всего-лишь используя определенную цветовую гамму, немножко (или множко) CSS и виджеты-гаджеты.

Если у вас уже стоят виджеты в блоге, запишите их на листочке, чтобы вдруг не забыть, а все возможные коды и пр. (например, из виджета "HTML/JavaScript") скопируйте в текстовый файл. На всякий пожарный.

Заходим в Панель инстурментов → Макет → Выбрать новый шаблон и выбираем ну, например, самый первый и самый простой - Minima, жмем Сохранить шаблон и идем в Изменить HTML.
Теперь давайте определим, что мы хотим получить от этого шаблона:
1. Больше места под текст и расширить сайдбар;
2. Картинку в шапке + изменить цвета фона, текста, ссылок;
3. Придумать буквицу.

Итак, мы все еще находимся в Панели инструментов и хотим Изменить HTML. Ставим галочку, где написано Расширить шаблоны виджета.
1. Чтобы сделать шире блок с текстом, жмем ctrl+F , вставляем и ищем строчку:

 #outer-wrapper {

Все, что написано ниже вплоть до }, можно изменить. Нас интересует параметр width Поэкспериментируйте с шириной и выберите оптимальную для себя. У меня вот что получилось:

 width: 860px;

Вы определились с шириной активной части блога. В порядок надо привести текстовый блог и ширину сайдбара. В общей сумме они должны давать 860 - 50-100px (сколько посчитаете нужным) на промежуток между текстом и сайдбаром. Чуть ниже найдите строчки

 #main-wrapper {

и

 #sidebar-wrapper {

Аналогично меняем ширину и получаем:

#main-wrapper {
width: 560px;

 #sidebar-wrapper {
width: 220px;

Не забывайте, что мы пока что только меняем показатели, и ничего не удаляем. Например, { или }. Их удалять нельзя. Следите за ними :))

Если вы хотите поместить в блог облако тегов или облако фотографий или еще какой-нибудь "широкий" виджет, то сделайте сайдбар пошире (например, 250px или 300px).

2. Наверное, вы обратили внимание на шапку. Что-то с ней явно не так. Ну, конечно, нам надо сделать ее такой же ширины (860px) и вставить красивую картинку. Находим строчку

 #header-wrapper {

и ниже меняем ширину

 width:860px;

Границы вы по желанию можете и оставить, я оставлю только внешнюю. В строке

 border:1px solid $bordercolor;

мы можем задать различные параметры внешней границы либо убрать ее.
1рх - толщина границы
solid (англ. сплошной) - это значит, что границы рамки представляют собой сплошную линию. Вместо этого слова можно вписать dotted (точки точки точки) или dashed (пунктирная линия). Пробуйте!
$bordercolor; означает то, что ваша рамка будет того цвета, который прописан в самом начале за разделителем

/* Variable definitions

Мы обратимся к этому в конце эксперимента, когда будем наводить красоту.
Если же вы хотите убрать рамку вообще, то напишите вот так:

text-decoration: none;

Внутренняя рамка убирается вот здесь:

#header a {
color:$pagetitlecolor;
text-decoration: none;
}

Теперь нам надо вставить картинку в шапку. Для этого в #header-wrapper вставляем две строки

background: #ffffff url(http://s60.radikal.ru/i168/0905/52/7fc633c124e9.jpg) no-repeat 0px 0px;
height: 200px;

#ffffff - это цвет фона под картинкой.
url () - адрес картинки (которую вы предварительно сделали размером 860px на 200рх и залили в какой-нибудь сток фоток/картинок или в собственный альбом в Picasa).
height - высота вашей картинки.

Расположение заголовка блога можно расположить по центру (center), слева (left) и справа (right):

#header {
margin: 5px;
border: none;
text-align: left;
color:$pagetitlecolor;
}

Меняем цветовое офомление блога. Мы пойдем по пути наибольшего сопротивления и поменяем так же в хтмл-коде, а не в Шрифтах и цветах. Для этого находим в самом верху запись

/* Variable definitions

Находим следующие слова и читаем, что они означают:

bgcolor — цвет фона блога
textcolor — цвет основного текста
linkcolor — цвет активных ссылок
pagetitlecolor — цвет заголовка блога (т.е. его названия)
descriptioncolor — цвет описания блога
titlecolor — цвет заголовков постов
bordercolor — цвет рамочки в шапке и вокруг других картинок/фоток
sidebarcolor — цвет заголовков в сайдбаре, а так же даты
sidebartextcolor — цвет основного текста в сайдбаре
visitedlinkcolor — цвет посещенных сылок
bodyfont — меняет что-то еще, например, цвет ссылки "просмотреть весь профиль" (я предупреждала про чайник :)

Теперь подумайте хорошенько над цветовым оформлением своего бложека. Подумали? Тогда берите необходимые вам коды из таблицы цветов и забивайте в параметр value (красным выделено вместо чего вставлять выбранный код):

value="#ff0000"

По моим скромным соображениям, default означает то, что в случае чего (чего?) будет применяться тот цвет, который указан сразу за этим параметром. Оставим его в покое.
Определились с цветом, — обратите внимание на такую мелочь, как границу после постов и в сайдбаре. Ее мы можем поменять на пунктирную, сплошную или оставить точки точки точки как есть. Находим:

.post {

и ниже в строке меняем dotted на желаемое:

border-bottom:1px dotted $bordercolor;

Точно так же поступаем и здесь:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;

Можете и толщину поменять. Хоть 5px нарисуйте :)
Так же можно поменять цвет ссылки при наведении на нее курсором:

a:hover {
color:#0099FF;
text-decoration:underline;
}

3. Для полного счастья сделаем так, чтобы желаемый абзац в тексте начинался с буквицы. В коде шаблона находим строчку

< /head >

и перед ней вставляем следующее:

 < type="text/css">
.letter {
font-size: 220%; /* Размер шрифта буквицы */
float: left; /* Выравнивание по левому краю */
color: blue; /* Цвет буквицы */
padding-right: 3px; /* Отступ между буквицей и текстом */
line-height: 32px; /* Положение символа */
}
< /style > 

При копировании кода уберите пробелы в тегах type, stile и class!

Теперь, когда вы захотите "нарисовать" буквицу, просто заходите в Изменить Html и заключайте буквочку в теги:

< class="letter">Ч< /span >его я не должна делать.

Voilà! Наш блог готов.

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