Если у вас уже стоят виджеты в блоге, запишите их на листочке, чтобы вдруг не забыть, а все возможные коды и пр. (например, из виджета "HTML/JavaScript") скопируйте в текстовый файл. На всякий пожарный.
Заходим в Панель инстурментов → Макет → Выбрать новый шаблон и выбираем ну, например, самый первый и самый простой - Minima, жмем Сохранить шаблон и идем в Изменить HTML.
Теперь давайте определим, что мы хотим получить от этого шаблона:
1. Больше места под текст и расширить сайдбар;
2. Картинку в шапке + изменить цвета фона, текста, ссылок;
3. Придумать буквицу.
Итак, мы все еще находимся в Панели инструментов и хотим Изменить HTML. Ставим галочку, где написано Расширить шаблоны виджета.
1. Чтобы сделать шире блок с текстом, жмем ctrl+F , вставляем и ищем строчку:
#outer-wrapper { 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;
}
background: #ffffff url(http://s60.radikal.ru/i168/0905/52/7fc633c124e9.jpg) no-repeat 0px 0px;
height: 200px;url () - адрес картинки (которую вы предварительно сделали размером 860px на 200рх и залили в какой-нибудь сток фоток/картинок или в собственный альбом в Picasa).
height - высота вашей картинки.
Расположение заголовка блога можно расположить по центру (center), слева (left) и справа (right):
#header {
margin: 5px;
border: none;
text-align: left;
color:$pagetitlecolor;
}
/* Variable definitionsbgcolor — цвет фона блога
textcolor — цвет основного текста
linkcolor — цвет активных ссылок
pagetitlecolor — цвет заголовка блога (т.е. его названия)
descriptioncolor — цвет описания блога
titlecolor — цвет заголовков постов
bordercolor — цвет рамочки в шапке и вокруг других картинок/фоток
sidebarcolor — цвет заголовков в сайдбаре, а так же даты
sidebartextcolor — цвет основного текста в сайдбаре
visitedlinkcolor — цвет посещенных сылок
bodyfont — меняет что-то еще, например, цвет ссылки "просмотреть весь профиль" (я предупреждала про чайник :)
Теперь подумайте хорошенько над цветовым оформлением своего бложека. Подумали? Тогда берите необходимые вам коды из таблицы цветов и забивайте в параметр value (красным выделено вместо чего вставлять выбранный код):
value="#ff0000"Определились с цветом, — обратите внимание на такую мелочь, как границу после постов и в сайдбаре. Ее мы можем поменять на пунктирную, сплошную или оставить точки точки точки как есть. Находим:
.post {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!
< class="letter">Ч< /span >его я не должна делать.Voilà! Наш блог готов.
