Шаблон блога можно изменить несколькими способами: погуглить, скачать и установить
чей-нибудь новый шаблон или выбрать из имеющихся на блогспоте и видоизменить его. Если только у вас нет особых желаний по поводу 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à! Наш блог готов.
В следующий раз я рискну рассказать еще о чем-нибудь. Если у вас есть вопросы или предложения
(прекратить все это безобразие :), то пишите, вместе что-нибудь придумаем.
и получайте код.
Что бы вставить код в блог, как обычно, заходим в Макет→Элементы страницы→Добавить гаджеты→HTML/JavaScript. Т.о. кликая на полученный виджет, вы получаете информацию о том, сколько, когда и откуда. Ежели хотите восполнить пробелы в географии, то посмотрите Flag Map.
Если вы ощущаете себя прямым потомком Максима Максимовича Исаева, то можете зарегиться в Google Analitycs или SpyLog.
Теперь пересмотрите великолепный фильм "17 мгновений весны" и наслаждайтесь ролью развдчика-чекиста в собственном же блоге.
