[Из песочницы] Дизайнер шаблонов Blogger

Как вы, может быть, знаете, у компании Google есть собственная блоговая платформа под названием Blogger. Её отличительной особенностью среди подобных сервисов является доступ к редактированию шаблона, где с внешним видом и компоновкой блога можно делать всё что угодно. У тех, кто не знает HTML/CSS/JS, возможность создать свой стиль появилась лишь после анонса дизайнера шаблонов. Однако корректно этот редактор работает лишь со стандартными шаблонами, коих не так много.11b8de3f2b7e81eebeea36d703700e39.png В статье «Анатомия шаблонов Blogger» вопрос настройки нестандартного шаблона для работы с дизайнером шаблонов был опущен автором, поэтому я решил восполнить этот пробел.

Переменные Для того, чтобы в нестандартном шаблоне появилась поддержка этого редактора, необходимо добавить переменные, выглядящие примерно так: name='' — имя переменной, которое в дальнейшем будет использоваться в стилях. Разрешена только латиница, цифры и некоторые символы. description='' — описание переменной, которое будет отображаться в дизайнере шаблонов. Есть значения, которые переводятся на несколько языков (список ниже). type='' — тип переменной. Всего их 4: background, length, font, color. default='' — значение по умолчанию. Будет установлено, если сбросить индивидуальные настройки шаблона. value='' — значение переменной, действующее в данный момент. Изначально должно совпадать со значением по умолчанию, потом может изменяться пользователем. Фон Переменная для определения фона может быть использована только один раз и только для всего блога. Также, только вместе с этим типом переменных можно использовать дополнительный параметр color='' — он отвечает за фоновый цвет блога при отсутствии фонового изображения. Имя и описание изменять не рекомендуется, ибо редактор может «не увидеть» переменную. Значение переменной задаётся CSS-свойствами, идущими в следующем порядке: [background-color] [background-image] [background-repeat] [background-attachment] [background-position].Значение Переменная, определяющая какое-либо значение, не редактируется в дизайнере шаблонов. А жаль.Шрифт Переменная для определения шрифта определённого элемента. Значение задаётся набором CSS-свойств, идущих в следующем порядке: [font-weight] [font-style] [font-size/line-height] [font-family].Цвет Переменная для определения цвета любой части элемента: фона, текста, границы, тени и пр. Значение задаётся в шестнадцатеричном формате.Группы переменных Некоторые переменные можно объединять в группы по схожему селектору (напр. такими группами являются «Текст страницы», «Фон», «Ссылки» и пр. на скриншоте в начале статьи), выглядящие так: У групп два основных параметра: description='' для описания и selector='' для выделения обводкой того элемента, к которому применяются переменные данной группы.Использование переменных Сами переменные необходимо прописать в специально предназначенном месте шаблона. Для того чтобы задействовать переменную, достаточно после CSS-свойства добавить $(NAME), где NAME — имя нужной переменной. .widget { background-color: $(widget.background); /* background-color: #fff; */ font: $(widget.text.font); /* font: normal normal 12 px Georgia, serif; */ border: 1 px solid $(widget.border); /* border: 1 px solid #efefef; */ color: $(widget.text.color); /* color: #000000; */ } Ширина блога В том же дизайнере шаблонов даётся возможность изменять ширину блога и боковых колонок, однако, как это ни странно, в нестандартных шаблонах эта возможность будет утеряна. Для её возвращения нужно добавить потерявшийся раздел с входящими в него переменными. В этих переменных нельзя изменять имя, иначе редактор их опять же «не увидит». Описания переменных В 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 — делать бэкап шаблона перед внесением любых правок;-)

© Habrahabr.ru