вторник, 9 февраля 2010 г.

Работа над блогом. Исправляем дизайн.

Как только разобрался с функционалом и настройками блога, тут же захотелось сменить оформление. Из стандартных тем в Дизайн -> Выбрать новый шаблон ничего особо не приглянулось. Немного погуглив я нашел сайт с темами для блогов на blogspot'е. Потратив около двух часов на выбор той темки, которая будет отвечать моему извращенному вкусу, я остановился на следующей: Spiral Pad. Тема меня вполне устроила, она была успешно скачана и установлена. Но через пару часов обнаружился небольшой огрех дизайна.
Выглядел он следующим образом:
На лицо не состыковка фоновой картинки футера с фоном основной части. Еще раз сходив на сайт и посмотрев привью темы я убедился, что она такая, какая есть. И единственный способ все исправить, это взять в руки инструмент и подпилить.
В первую очередь я отправился в Дизайн -> Изменить HTML, где нашел ссылки на все бекграунды, что использовались в теме. Их оказалось всего три.
Верх:
#header-wrapper {
background:#52929E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbk1DrQuN4IFZn_qnh0LsOod9df02jLsxUdu-G-NsMs5zvtBSq9bfnhl0sJENsIpFRT1Wf-QsR-tXsYx3-0bS-hLys9Ypg9Rx2fP1A2eMRk29M5trOA7pbJtNTA962klx41bn-uz0ecSjj/s1600/header.jpg) no-repeat scroll center top; }

Основная часть:
#content-wrapper {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWl0Bnr1CVMVDhp3jswy0vgzSplLH-SszMyodEhIcjlwGbfs3VgyD00K3X75ISXD-9MF1U5AMYu1oxmvjEhy74hlHVBrbelyEag3nanrUZVc0akENK8optAtClvDMKy_7tb-do3NM4JtFV/s1600/content-bg.gif) repeat-y scroll 0 0; }

Низ:
#footer {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimOZNgjlkCsJdhOp0Gvq4gMiwWInv-hdHL-tqM7-HVaCpa4zsHTchISWGwjXu0zAKn7Bkr6GysNpjnQUft38-7C3qPPy4nDBEJKyrybemxuh-ZN6EdHbOgteiV8FSH9SEzeo7CXD9rT5g8/s1600/footer.gif) no-repeat scroll center bottom; }

Изображение footer.gif было слегка смещено, отсюда и поломанный дизайн. Способ решить проблему был только один. Запустить Фотошоп The Gimp и подогнать изображение под нужные нам размеры. 10 минут работы и результат готов.
Осталось залить изображение на какой нибудь стабильный хостинг и прописать в  #footer ссылку на исправленную картинку. В качестве такого сервиса я выбрал DropBox.
#footer {
background:transparent url(http://dl.dropbox.com/u/1660744/blog/spiral-pad-template/footer.gif) no-repeat scroll center bottom; }

Также в блоке #footer я поменял в свойстве width значение с 1015 на 1004, т.е. на то значение, которое соответствует размеру картинки.
Осталось нажать Сохранить шаблон и насладится результатом. Конечно у самой темы есть еще некоторые мелкие огрехи, связанные с цветом. Будет время и я попробую эти недочеты исправить.
UDP: Закинул на DropBox исправленную мной xml'ку.

2 комментария:

Maxim Barzunov комментирует...

Возможно придется отказаться от данной темы, слишком много правок...

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

Я вообще отказался от блогспота ибо на нормальном хоте держать блог или сайт как то более престижней. Хотя вот подумываю перейти как закончется оплата хоста на бесплатный http://www.0fees.net. Очень хороший забугорный хост, тольк что придется все ручками переносить.

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