Как натянуть свою "шкурку" на шаблон

Сегодня мы поговорим о скинах (англ. skins), в простонародье "шкурках".

Каждому из нас, блогеров, хочется выразить в блоге свою индивидуальность, сделать его полностью своим, непохожим на другие, отражающим нашу суть. Стандартные шаблоны, предлагаемые в Blogger (Blogspot) в этом нам, увы, не помогают. Что ж, будем их дорабатывать под наши нужды!

Читать - кликнуть! (скрытие - авт., при открытии след.)

Что по сути из себя представляет "шкурка"? "Шкурка" - это набор элементов, которые нужно расположить в правильном порядке. На Blogger основных элементов 6: 1. шапка (header), 2. середина (main), 3. подвал (footer), 4. список страниц, вкладок (tabs), 5.общий фон (background) и 6. градиентная заливка фона вверху (gradient). Номера я проставил по степени значимости и востребованности.

Если ваш скин имеет все эти элементы отдельно - хорошо. Если нет, то вам придется "поработать ножницами", чтобы разобрать его на составляющие. В принципе, каждый из этих элементов не является обязательным. Любой из них можно не задействовать. А можно и оставить тот, что предоставлен исходным шаблоном.

Первое, что надо сделать, это перед натягиванием "шкурки" в Дизайнере шаблонов среди стандартных вариантов выбрать наиболее близкий по структуре к тому, что вы хотите получить на выходе. Не запутайтесь в понятиях! Близкий не по внешнему виду (хотя если есть и такая возможность, то ей грех не воспользоваться), но по структуре. К примеру, есть шаблоны с фоновым изображением, а есть такие, у которых фон залит одним цветом, есть такие, у которых блог прокручивается, но фон статичный, а есть такие, у которых фон прокручивается вместе с лентой блога и т.д. Думаю, разберетесь.

Теперь переходим непосредственно к натягиванию различных элементов "шкурки". Идем по порядку.

Сначала шапку. Заходим в модуль редактирования шаблона (Дизайн->Изменить HTML) и ищем в шаблоне блок кода, начинающийся с ".header-outer". Сразу под ним вставляем строки вида "background: url(<ссылка на картинку фона шапки>); width: <...>px; height: <...>px;". Выглядеть это будет примерно так:

.header-outer {
  background: url(https://lh6.googleusercontent.com/PQSU/header.jpg); 
  width: 1028px; /* ширина картинки */
  height: 200px; /* высота картинки */
/* прочие строки кода */
}

Затем середину (в идеале это полоска высотой в 1 пиксель, которая будет размножена по вертикали). Ищем в шаблоне блок кода, начинающийся с ".main-outer". Сразу под ним вставляем строки вида "background: url(<ссылка на картинку фона середины>); width: <...>px;". Выглядеть это будет примерно так:

1 2 3 4 5

.header-outer {   background: url(https://lh6.googleusercontent.com/PQSU/main.jpg);   width: 1028px; /* ширина картинки */ /* прочие строки кода */ }

Потом подвал. Ищем в шаблоне блок кода, начинающийся с ".footer-outer". Сразу под ним вставляем строки вида "background: url(<ссылка на картинку фона подвала>); width: <...>px; height: <...>px;". Выглядеть это будет примерно так:

1 2 3 4 5 6

.footer-outer {   background: url(https://lh6.googleusercontent.com/PQSU/footer.jpg);   width: 1028px; /* ширина картинки */   height: 46px; /* высота картинки */ /* прочие строки кода */ }

Не забываем про вкладки. Ищем в шаблоне блок кода, начинающийся с ".tabs-outer". Сразу под ним вставляем строки вида "background: url(<ссылка на картинку фона вкладок>); width: <...>px; height: <...>px;". Выглядеть это будет примерно так:

1 2 3 4 5 6

.tabs-outer {   background: url(https://lh6.googleusercontent.com/PQSU/tabs.jpg);   width: 1028px; /* ширина картинки */   height: 35px; /* высота картинки */ /* прочие строки кода */ }

Для указания фонового изображения ищем строку, описывающую элемент Body Background и меняем ссылку в url(...) на свою:

1 2	<variable name="body.background" description="Body Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) url(http://www.blogblog.com/body_background_dark.png) repeat scroll top left"> </variable>

Аналогично поступаем с градиентной заливкой Ее описывает элемент Body Gradient Cap. Здесь, как и в середине, используется картинки толщиной в один пиксель. Только там речь шла о горизонтальной полоске высотой в пиксель, то тут мы имеем дело с вертикальной полоской шириной в пиксель:

1 2	<variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url" default="none" value="url(http://www.blogblog.com/body_gradient_dark.png)"> </variable>

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

Вот, собственно, и все. Этого вполне достаточно для того, чтобы "костюмчик" наделся. А вот, чтобы "костюмчик" сидел как надо, предстоит еще серьезная процедура подрезок, утяжек и утрясок. Впрочем, я подгонку даже на стандартных шаблонах делаю. Но это уже совсем другая история...

источник