12.12.09

Blogger: Цвета из шаблона выносим на вкладку Шрифты и цвета!

25 comments

Здравствуйте!

Как вы поняли из картинки сегодня мы будем строить Цветное Счастье своими руками!

Все началось с маленького поста про Цвета и шрифты в шаблоне Blogger: Изменяем размер шрифта где я хотела рассказать для новичков как работать с вкладкой Шрифты и цвета в разделе Дизайн на Панели инструментов, после которого я получила множество писем с просьбой помочь изменить шаблон, чтобы изменение цветов стало доступно с вкладки Цвета и шрифты.

Да я знаю, что у многих шаблонов, найденных на просторах интернета изменить Цвета и Шрифты на этой вкладке невозможно или они даже просто отсутствуют. Я вообще-то не очень высокого мнения об этих шаблонах обычно красивого дизайна, но очень слабого технического исполнения. (Лично нам с Кайлом пришлось дорабатывать несколько десятков самых разнообразны шаблонов.)

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

Это совсем не сложно, даже если вы ничего не знаете об Html/Xml и CSS, это все равно очень просто сделать. Единственное, что от вас потребуется это определенное усердие. Давайте я сначала расскажу вам как это сделать, а потом наиболее робкие смогут посмотреть 10-минутный ролик где я произвожу все описанные мной процедуры "в прямом эфире".

Открываем Блокнот (или любой другой текстовый редактор) и копируем туда этот код:
/* Определяем переменные для цветов и шрифтов
<Variable name="a0" description="Цвет 0"
type="color" default="#FFFFFF">
<Variable name="a1" description="Цвет 1"
type="color" default="#FFFFFF">
<Variable name="a2" description="Цвет 2"
type="color" default="#FFFFFF">
<Variable name="a3" description="Цвет 3"
type="color" default="#FFFFFF">
<Variable name="a4" description="Цвет 4"
type="color" default="#FFFFFF">
<Variable name="a5" description="Цвет 5"
type="color" default="#FFFFFF">
<Variable name="a6" description="Цвет 6"
type="color" default="#FFFFFF">
<Variable name="a7" description="Цвет 7"
type="color" default="#FFFFFF">
<Variable name="a8" description="Цвет 8"
type="color" default="#FFFFFF">
<Variable name="a9" description="Цвет 9"
type="color" default="#FFFFFF">
<Variable name="a10" description="Цвет 10"
type="color" default="#FFFFFF">
<Variable name="a11" description="Цвет 11"
type="color" default="#FFFFFF">
<Variable name="a12" description="Цвет 12"
type="color" default="#FFFFFF">
<Variable name="a13" description="Цвет 13"
type="color" default="#FFFFFF">
<Variable name="a14" description="Цвет 14"
type="color" default="#FFFFFF">
<Variable name="a15" description="Цвет 15"
type="color" default="#FFFFFF">
<Variable name="a16" description="Цвет 16"
type="color" default="#FFFFFF">
<Variable name="a17" description="Цвет 17"
type="color" default="#FFFFFF">
<Variable name="a18" description="Цвет 18"
type="color" default="#FFFFFF">
<Variable name="a19" description="Цвет 19"
type="color" default="#FFFFFF">

<Variable name="a20" description="Фон 20"
type="color" default="#FFFFFF">
<Variable name="a21" description="Фон 21"
type="color" default="#FFFFFF">
<Variable name="a22" description="Фон 22"
type="color" default="#FFFFFF">
<Variable name="a23" description="Фон 23"
type="color" default="#FFFFFF">
<Variable name="a24" description="Фон 24"
type="color" default="#FFFFFF">
<Variable name="a25" description="Фон 25"
type="color" default="#FFFFFF">
<Variable name="a26" description="Фон 26"
type="color" default="#FFFFFF">
<Variable name="a27" description="Фон 27"
type="color" default="#FFFFFF">
<Variable name="a28" description="Фон 28"
type="color" default="#FFFFFF">
<Variable name="a29" description="Фон 29"
type="color" default="#FFFFFF">

Конец определения переменных ------- */


Justify FullНичего сложного в этом коде нет, здесь я описала 20 переменных для цветов шрифта и 10 переменных для цвета фона.

Описатель переменной берется в угловые скобочки, т.е. значки меньше и больше < > а внутри определяется имя переменной (Variable name). Имена переменных должны быть уникальны и я за отсутствием богатой фантазии дала им имена от a0 до a29, далее идет описание переменной (description) это та текстовая строка, которую вы видете напротив цвета на вкладке Цвета и шрифты. Далее идет тип переменной (type) в настоящий момент Blogger допускает только два типа переменных color (что значит цвет) и font (что значит шрифт). Сегодня мы с вами работаем только с цветами. И наконец, так сказать цвет по умолчанию (default) я пока поставила белый #FFFFFF.

Теперь открываем на Панели инструментов в разделе Дизайн вкладку Изменить Html. Галочку расширить шаблоны виджета НЕ СТАВИМ.

0) Делаем резервную копию нашего шаблона: Сохраняем и восстанавливаем шаблон на Blogger(е)!

1) Если в вашем шаблоне уже есть описатели цветов, но они не работают: Ищем (CtrlF) строчки начинающиеся с <Variable и удаляем их чтобы не мешали нашей работе.

2) Ищем описатели цвета color в нашем шаблоне.

Это будет выглядеть примерно так:
color: #cccccc;
или значение цвета может быть записано в сокращенном трехсимвольном виде:
color: #ccc;

меняем значение цвета вместе с символом # на имя очередной переменной, а вот перед именем переменной надо будет поставить знак $

т.е. вместо color: #cccccc; мы получим color: $a0; а чтобы не потерять значение цвета, мы в описании переменной a0 (в Блокноте) поставим #cccccc как значение цвета по умолчанию.

Итак, в шаблоне вместо строчки color: #cccccc;
У нас будет строчка color: $a0;

А в Блокноте вместо такого описания переменной a0
<Variable name="a0" description="Цвет 0"
type="color" default="#FFFFFF">
У нас будет такое описание
<Variable name="a0" description="Цвет 0"
type="color" default="#cccccc">

Так и будем продолжать, только не забывайте последовательно менять имена переменных $a1, $a2, $a3 и т.д.

3) Далее проделываем ту же процедуру с описателем фона background, т.е. ищем в нашем шаблоне вхождение описателя background и точно так же меняем числовое значение цвета на имя очередной переменной желательно с описателем "Фон nn" (чисто из эстетических соображения чтобы отделить переменные описывающие цвет шрифта, от переменных описывающих шрифт фона, хотя это не так уж важно).

4) Из блокнота удаляем лишние (не использованные нами) описатели переменных.

5) Теперь в Html-коде нашего шаблона ищем такую строчку
<b:skin><![CDATA[

И сразу после неё вставляем из Блокнота получившийся у нас код с описаниями переменных. Нажимаем ПРОСМОТР и если ничего плохого не случилось нажимаем СОХРАНИТЬ.

6) Идем на вкладку Шрифты и цвета в разделе Дизайн и пытаемся понять какой цвет чему в нашем шаблоне соответствует. Меняем описания переменных в нашем Блокноте с Цвет 1, Цвет 2,... на осмысленные.

7) Заменяем описатели переменных цветов в нашем шаблоне, на новые с осмысленными описаниями из блокнота или просто правим описания (description) переменных. Опять же ПРОСМОТР и СОХРАНИТЬ.

А теперь видео - немного нудное... но что сделать это вот такая нудная работа вытаскивать цвета на вкладку Шрифты и цвета, зато потом становится очень удобно.

Смотрим видео, а я с вами прощаюсь!


Всем хороших выходных!
Света

ПРОДОЛЖЕНИЕ: Blogger: Шрифты из шаблона выносим на вкладку Шрифты и цвета!


PS Источник: http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=46871Blogger: кошка.

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

25 комментариев:

  1. Полистал видео немного. Заметил, что у тебя панель управления с кнопкой "Start" находится вверху экрана, а не внизу :) Так удобней работать?

    ОтветитьУдалить
  2. Большое Вам спасибо, как раз столкнулась с этой проблемой. Не все цвета готового шаблона меня устраивали, а теперь всё в порядке! :)

    ОтветитьУдалить
  3. Спасибо! Но как же все-таки поменять шрифт??? В моем шаблоне (скачан из инета), в закладке "шрифты и цвета" именно шрифтов и нет:(((, а хотелось бы немного увеличить, да вот знаний ну совсем в обрез:(... Спасибо:)

    ОтветитьУдалить
  4. Hotela poblagodarit za snejinki. Moi chitateli byutsya v vostorge. :)))

    ОтветитьУдалить
  5. Большое спасибо за такой подробный и детальный показ. Попробую выполнить, так как в управлении моим блогом как раз этот функционал отсутствует.

    ОтветитьУдалить
  6. Всё получилось,сработало.я так понимаю что теперь эти дела можно копировать и вставить в другой код шаблона если шаблоны одинаковые.удобная штука этот переключатель цветов.

    у меня вот проблема возникла как раз когда вы уехали.решил монетезировать блог разными конторами,они требуют вставки кода в шаблон но при вставке и сохранении вылазит ошибка.только что решил поставить контекст ЗОРЬКА и не могу.и конторы вроде хорошие и никак.не в первый раз уже сталкиваюсь с этой проблемой.это решаемо?

    ОтветитьУдалить
  7. Света, а у меня не получается. Сделала всё как Вы описали, проверила, всё правильно, а как иду на просмотр он мне пишет: Недопустимое описание переменной в оболочке страницы: Переменная используется, но не определена. Ввод: a0, потом Ввод а1 и т.д. Что тут может быть не в порядке?

    ОтветитьУдалить
  8. короче у меня проблема возникла.внизу есть кнопка для переключения предыдущих страниц под названием "Предыдущие".кнопки не видно.вчера щёлкал в настройках и ничего,сегодня посерьёзней и никак.кнопка нужная очень.

    ОтветитьУдалить
  9. Интересный пост, часто замечал в шаблонах отсутствие цветовой настройки, приходилось в ручную менять цвета, а так конечно удобней.

    ОтветитьУдалить
  10. Анна, судя по по всему Вы вместо нуля пишите просто букву "О" :) Проверьте внимательно

    ОтветитьУдалить
  11. Фотографии... здравствуйте!

    Про ЗОРЬКУ пишите на email может быть разберемся. Нет я ни в каких программах не участвую, вот разве что есть Adsence на англоязычных блогах...

    А на вопрос с цветами ответить могу прямо здесь:

    У вас в Html-коде блога есть следующие описания:

    #blog-pager-newer-link {
    float: left;
    }
    #blog-pager-older-link {
    float: right;
    }
    #blog-pager {
    text-align: center;
    }

    А мы с вами под ними добавляем вот такой блок описания:

    #blog-pager-older-link a,
    #blog-pager-newer-link a,
    #blog-pager a {
    color: $NN;
    }

    Что значит, цвет ссылки в этих блоках будет определяться переменной NN, а теперь добавми описание этой переменной, там где мы описывали другие переменные для цвета. Описание простое:

    <Variable name="NN" description="Цвет Следующие-Предыдущие"
    type="color" default="#FFFFFFF"">

    Сохраняем шаблон и настраиваем цвет ссылок Следующие - Предыдущие из вкладки Шрифты и цвета.

    Удачи во всем!
    Света

    ОтветитьУдалить
  12. Привет, John!

    Все так - Панель управления у меня сверху - мне, кажется, так удобнее, но началось все с Кайла, у него на всех компьютерах было так настроено и я к этому быстро привыкла. Теперь на своих компьютерах я тоже настраиваю расположение панели именно так.

    Спасибо, что заглянули!
    Света

    ОтветитьУдалить
  13. Спасибо, Yamazakura!

    Для вас старалась!

    Света
    :)))

    ОтветитьУдалить
  14. Здравствуйте, Hellen!

    Шрифты меняются немного сложнее - первоначально, я задумывала написать об их изменении в этой статье, но пришлось написать отдельно: Blogger: Шрифты из шаблона выносим на вкладку Шрифты и цвета. Пост получился немного сложноватым на мой взгляд. Разберетесь - будете Героем!

    А будут вопросы, возникнут проблемы - спрашивайте!

    Всегда ваша Света!

    ОтветитьУдалить
  15. Спасибо, Scaryazeri!

    А я вас поздравляю с вашим 100-тым постом!

    Света

    ОтветитьУдалить
  16. Вам спасибо, Татьяна Вячеславовна!

    Как результаты? ;)

    Света

    ОтветитьУдалить
  17. Анна, если все еще не получается - присылайте html-код шаблона.

    Света

    ОтветитьУдалить
  18. BTemplate (Виталий), здравствуйте!

    Для вас, человека коллекционирующего и распространяющего шаблоны Blogger'а в РуНете, этот и следующий пост - прямое руководство к действию... Ведь шаблон, на примере которого я производила манипуляции был прислан мне девушкой, скачавшей его с вашего сайта. Очень надеюсь, что читатели с вашего блога теперь будут скачивать по-настоящему качественные шаблоны - лучше, чем то что предлагалось в оригинале на аналогичных англо-испано язычных сайтах.

    Удачи во всем, а главное в доработке шаблонов... Ведь наши с вами читатели заслуживают САМОГО ЛУЧШЕГО, потому что они пришли к нам! ;)

    Света

    ОтветитьУдалить
  19. скажите,что у вас за фишка такая стоит что вы набираете нужное слово и таким образом ищите нужные коды в шаблоне ХТМЛ?

    ОтветитьУдалить
  20. Здравствуйте, фотографии..!

    Фишка очень простая: называется сочетанием клавиш Ctrl и F, а там в зависимости от браузера либо всплывающее окошко появится куда можно ввести искомое слово или внизу у браузера будет поисковая панелька. Попрбоуйте.

    Не получится или если вы что-то другое имели ввиду, то пишите.

    Света

    ОтветитьУдалить
  21. всё получилось!и цвета и поиск всё работает.Спасибо!

    ОтветитьУдалить
  22. Спасибо,Светлана,за видео!Попробую с новым шаблоном!Потом отпишусь,что вышло.

    ОтветитьУдалить
  23. Спасибо, Светлана, Вам большое)) Все ответы на мои вопросы я нашла у Вас. И думаю, что найду опять. Спасибо за то, что Вы есть!

    ОтветитьУдалить

Популярные сообщения