Как вы, может быть, знаете, у компании Google есть собственная блоговая платформа под названием Blogger. Её отличительной особенностью среди подобных сервисов является доступ к редактированию шаблона, где с внешним видом и компоновкой блога можно делать всё что угодно. У тех, кто не знает HTML/CSS/JS, возможность создать свой стиль появилась лишь после анонса дизайнера шаблонов. Однако корректно этот редактор работает лишь со стандартными шаблонами, коих не так много.
В статье «Анатомия шаблонов Blogger» вопрос настройки нестандартного шаблона для работы с дизайнером шаблонов был опущен автором, поэтому я решил восполнить этот пробел.
Для того, чтобы в нестандартном шаблоне появилась поддержка этого редактора, необходимо добавить переменные, выглядящие примерно так:
Переменная для определения фона может быть использована только один раз и только для всего блога. Также, только вместе с этим типом переменных можно использовать дополнительный параметр
Переменная, определяющая какое-либо значение, не редактируется в дизайнере шаблонов. А жаль.
Переменная для определения шрифта определённого элемента. Значение задаётся набором CSS-свойств, идущих в следующем порядке: [font-weight] [font-style] [font-size/line-height] [font-family].
Переменная для определения цвета любой части элемента: фона, текста, границы, тени и пр. Значение задаётся в шестнадцатеричном формате.
Некоторые переменные можно объединять в группы по схожему селектору (напр. такими группами являются «Текст страницы», «Фон», «Ссылки» и пр. на скриншоте в начале статьи), выглядящие так:
У групп два основных параметра:
Сами переменные необходимо прописать в специально предназначенном месте шаблона.
Для того чтобы задействовать переменную, достаточно после CSS-свойства добавить
В том же дизайнере шаблонов даётся возможность изменять ширину блога и боковых колонок, однако, как это ни странно, в нестандартных шаблонах эта возможность будет утеряна. Для её возвращения нужно добавить потерявшийся раздел
В Blogger есть несколько описаний переменных, которые имеют разную локализацию. Привожу список отдельно для самих переменных и отдельно для групп.
Надеюсь, статья окажется полезной тем, кто работает с этой блоговой платформой. Справка по этому вопросу весьма скудна, так что большая часть информации почерпнута из многочисленных экспериментов с шаблонами. И всегда помните, что главное при работе в Blogger — делать бэкап шаблона перед внесением любых правок ;-)
В статье «Анатомия шаблонов Blogger» вопрос настройки нестандартного шаблона для работы с дизайнером шаблонов был опущен автором, поэтому я решил восполнить этот пробел.
Переменные
Для того, чтобы в нестандартном шаблоне появилась поддержка этого редактора, необходимо добавить переменные, выглядящие примерно так:
<Variable name="NAME" description="DESCRIPTION" type="TYPE" default="DEFAULT VALUE" value="VALUE"/>
name=''
— имя переменной, которое в дальнейшем будет использоваться в стилях. Разрешена только латиница, цифры и некоторые символы.description=''
— описание переменной, которое будет отображаться в дизайнере шаблонов. Есть значения, которые переводятся на несколько языков (список ниже).type=''
— тип переменной. Всего их 4:background
,length
,font
,color
.default=''
— значение по умолчанию. Будет установлено, если сбросить индивидуальные настройки шаблона.value=''
— значение переменной, действующее в данный момент. Изначально должно совпадать со значением по умолчанию, потом может изменяться пользователем.
Фон
<Variable name="body.background" description="Body Background" type="background" color="#ffffff" default="$(color) url(none) no-repeat fixed top left" value="#dddddd url(none) repeat fixed top center"/>
Переменная для определения фона может быть использована только один раз и только для всего блога. Также, только вместе с этим типом переменных можно использовать дополнительный параметр
color=''
— он отвечает за фоновый цвет блога при отсутствии фонового изображения. Имя и описание изменять не рекомендуется, ибо редактор может «не увидеть» переменную. Значение переменной задаётся CSS-свойствами, идущими в следующем порядке: [background-color] [background-image] [background-repeat] [background-attachment] [background-position].Значение
<Variable name="post.border.radius" description="Post Border Radius" type="length" default="10px" value="5px"/>
Переменная, определяющая какое-либо значение, не редактируется в дизайнере шаблонов. А жаль.
Шрифт
<Variable name="post.title.font" description="Post Title Font" type="font" default="normal normal 16px/1.25 Arial, sans-serif" value="bold normal 22px/1.5 Tahoma, sans-serif"/>
Переменная для определения шрифта определённого элемента. Значение задаётся набором CSS-свойств, идущих в следующем порядке: [font-weight] [font-style] [font-size/line-height] [font-family].
Цвет
<Variable name="post.text.color" description="Text Color" type="color" default="#000000" value="#222222"/>
Переменная для определения цвета любой части элемента: фона, текста, границы, тени и пр. Значение задаётся в шестнадцатеричном формате.
Группы переменных
Некоторые переменные можно объединять в группы по схожему селектору (напр. такими группами являются «Текст страницы», «Фон», «Ссылки» и пр. на скриншоте в начале статьи), выглядящие так:
<Group description="Widget Text" selector=".widget">
<Variable name="widget.text.font" description="Widget Font" type="font" default="normal normal 14px Arial, sans-serif" value="normal normal 12px Georgia, serif"/>
<Variable name="widget.text.color" description="Text Color" type="color" default="#000000" value="#000000"/>
<Variable name="widget.border" description="Border Color" type="color" default="#efefef" value="#efefef"/>
<Variable name="widget.background" description="Background Color" type="color" default="#fff" value="#fff"/>
</Group>
У групп два основных параметра:
description=''
для описания и selector=''
для выделения обводкой того элемента, к которому применяются переменные данной группы.Использование переменных
Сами переменные необходимо прописать в специально предназначенном месте шаблона.
<b:skin><![CDATA[
/* Здесь переменные и CSS-стили */
]]></b:skin>
Для того чтобы задействовать переменную, достаточно после CSS-свойства добавить
$(NAME)
, где NAME — имя нужной переменной..widget {
background-color: $(widget.background); /* background-color: #fff; */
font: $(widget.text.font); /* font: normal normal 12px Georgia, serif; */
border: 1px solid $(widget.border); /* border: 1px solid #efefef; */
color: $(widget.text.color); /* color: #000000; */
}
Ширина блога
В том же дизайнере шаблонов даётся возможность изменять ширину блога и боковых колонок, однако, как это ни странно, в нестандартных шаблонах эта возможность будет утеряна. Для её возвращения нужно добавить потерявшийся раздел
<b:template-skin>
с входящими в него переменными. В этих переменных нельзя изменять имя, иначе редактор их опять же «не увидит».<b:template-skin>
<b:variable default='900px' name='content.width' type='length' value='1000px'/>
<b:variable default='250px' name='main.column.left.width' type='length' value='200px'/>
<b:variable default='250px' name='main.column.right.width' type='length' value='300px'/>
<![CDATA[
/* Здесь CSS-стили с объявленными выше переменными */
.page {
max-width: $(content.width);
width: $(content.width);
}
.sidebar-left {
width: $(main.column.left.width);
}
.sidebar-right {
width: $(main.column.right.width);
}
]]>
</b:template-skin>
Описания переменных
В Blogger есть несколько описаний переменных, которые имеют разную локализацию. Привожу список отдельно для самих переменных и отдельно для групп.
Для переменных
Описание | Перевод |
---|---|
Main Background | Основной фон |
Outer Background | Внешний фон |
Header Background | Фон верхнего колонтитула |
Post Background | Фон сообщения |
Font | Шрифт |
Text Color | Цвет текста |
Link Color | Цвет ссылки |
Hover Color | Цвет ссылки при наведении на неё мышью |
Visited Color | Цвет посещённых ссылок |
Title Font | Шрифт заголовка |
Title Color | Цвет заголовка |
Description Color | Цвет описания |
Background Color | Цвет фона |
Border Color | Цвет рамки |
Shadow Color | Цвет тени |
Bevel Color | Цвет скоса |
Alternate Color | Дополнительный цвет |
Caption Text Color | Цвет подписи |
Separator Color | Цвет разделителя |
Separator Line Color | Цвет разделительной линии |
Blog Title Font | Шрифт названия блога |
Blog Title Color | Цвет для заголовка блога |
Blog Description Font | Шрифт описания блога |
Blog Description Color | Цвет для описания блога |
Selected Color | Цвет вкладки |
Tabs Border Color | Цвет границ вкладок |
Post Title Font | Шрифт заголовка сообщения |
Post Title Color | Цвет заголовка сообщения |
Post Footer Font | Шрифт нижнего колонтитула сообщения |
Post Footer Color | Цвет нижнего колонтитула сообщения |
Sidebar Title Font | Шрифт названия боковой панели |
Sidebar Title Color | Цвет названия боковой панели |
Sidebar Text Color | Цвет текста боковой панели |
Gadget Title Color | Цвет заголовка гаджета |
Footer Background | Фон нижнего колонтитула |
Footer Text Color | Цвет текста нижнего колонтитула |
Для групп
Описание | Перевод |
---|---|
Page | Страница |
Page Text | Текст страницы |
Accents | Цветовые акценты |
Backgrounds | Фон |
Links | Ссылки |
Images | Изображения |
Header | Заголовок |
Blog Title | Название блога |
Blog Description | Описание блога |
Tabs Text | Текст вкладок |
Tabs Background | Фон вкладок |
Date Header | Верхний колонтитул даты |
Post | Сообщение |
Post Title | Заголовок сообщения |
Post Background | Фон сообщения |
Post Footer | Нижний колонтитул сообщения |
Sidebar Background | Фон боковой панели |
Gadgets | Гаджеты |
Gadget Title | Название гаджета |
Gadget Text | Текст гаджета |
Gadget Links | Ссылки на гаджеты |
Gadget Background | Фон гаджета |
Feed | Канал |
Feed Links | Ссылки на фиды |
Footer | Нижний колонтитул |
Footer Links | Ссылки в нижнем колонтитуле |
Footer Background | Фон нижнего колонтитула |
Заключение
Надеюсь, статья окажется полезной тем, кто работает с этой блоговой платформой. Справка по этому вопросу весьма скудна, так что большая часть информации почерпнута из многочисленных экспериментов с шаблонами. И всегда помните, что главное при работе в Blogger — делать бэкап шаблона перед внесением любых правок ;-)