ФКСП №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à!
Наш блог готов.
В следующий раз я рискну рассказать еще о чем-нибудь. Если у вас есть вопросы или предложения (прекратить все это безобразие :), то пишите, вместе что-нибудь придумаем.

11 коммент.:

Victory комментирует...

Ого, и ведь хватило терпения все это написать))

М.Врединка комментирует...

Victory, нууу, я обещала помочь, вот и помогла :)) ДА и самой полезно было еще раз разобраться во всем этом :)

Sweet_Attrition комментирует...

Я уже говорила тебе, что ты мой гений, скажу еще раз. Ты гений!;)) Спасибо! Тебе надо пособие выпускать, ты все замечательно объясняешь. Вот, мне захотелось сделать себе буквицы. Сейчас попробую)) И, конечно, я жду продолжения;))

М.Врединка комментирует...

Дашусик, мне тоже буквицы нравятся очень. Давай делай. А потом чтоб шаблон поменяла! :D
Спасибо за комплимент, но из меня гений, как из... Ну, а хотя, почему бы и нет :D :D
P.S.: продолжения чего? ;)) Помнишь мультик про зайчика Фу-Фу?

миК комментирует...

Дааааа, почитал я, почитал ... и стало мне страшновато. ;)

SVEN комментирует...

Милая Введенка, когда продолжение будет? Я уже все сделал. Что самое интересное – получилось. Благодарствую.

М.Врединка комментирует...

миК, от чего страшновато? Надеюсь, ты не меня боишься? ))

SVEN, всегда пожалуйста :) А продолжение чего? )) Мне страшно теперь тоже, чего от меня ждут )) Вы, главное, спрашивайте, я с удовольствием расскажу :)
Кстати, хорошо получилось, а глаз - это нечто :))

SVEN комментирует...

Милая Врединка, спасибо за соучастии. У меня только одна просьба, как вставить в блог счетчик и “карту посещений”. Цели моего блога – только общение, без всякой коммерции, но чертовски интересно, откуда ко мне заходят на блог. В принципе у нас есть и свои программисты, но совсем не хочется их приобщать к моему “общению”. Буду весьма благодарен.

М.Врединка комментирует...

SVEN, на счет карты посещений - проблем нет, одно время ставила себе на блог. А вот про счетчики надо поискать. Проблем нет, заодно и сама разберусь, штука это полезная. В профиле не зря пишут слово "прибл.". Просмотр профиля - это не статистика.

миК комментирует...

Конечно не лично тебя, а твои скрытые возможности. ;)) (только не в обиду, ок?) Мне это напоминает Голливудские фильмы, где главные герой всегда работает скромным библиотекарем (к примеру), а на самом деле ... может ... ого-го чего. :))) Вот эта скрытая возможность и настораживает. ;)

М.Врединка комментирует...

миК, по сути ты прав :) Такие мы, Девы по гороскопу, родившиеся в год Дракона, да еще и получающие библиотечное образование :D

Отправить комментарий