18.12.09

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

17 comments

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

Сегодня мы с вами поговорим о шрифтах нашего блога, вернее об управлении ими на вкладке Шрифты и цвета. Управлять-то ими легко и статью на эту тему я уже писала Blogger: Изменяем размер шрифта и это все работает для стандартных (рекомендованных Blogger'ом) шаблонов. Проблемы начинаются когда блоггеры устанавливают себе скаченные из интернета шаблоны для Blogger'а . Многие из них красивы, но не поддерживают всех возможностей платформы Blogger. В прошлой статье я рассказала и опубликовала маленькое видео как "вынести" управление цветом вашего шаблона на вкладку "Шрифты и цвета" раздела Дизайн на Панели инструментов (Blogger: Цвета из шаблона выносим на вкладку Цвета и шрифты). Сегодня мы продолжим улучшать управление шаблоном и сделаем на вкладке "Шрифты и цвета" возможность управления и шрифтами шаблона.

Еще раз повторюсь, что статья является продолжением предыдущей статьи Blogger: Цвета из шаблона выносим на вкладку Цвета и шрифты, поэтому всем рекомендуется сначала заглянуть туда. А мы продолжаем...

1) Как и в прошлый раз мы делаем заготовку в Блокноте:
<Variable name="f0" description="Шрифт 0"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f1" description="Шрифт 1"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f2" description="Шрифт 2"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f3" description="Шрифт 3"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f4" description="Шрифт 4"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f5" description="Шрифт 5"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f6" description="Шрифт 6"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f7" description="Шрифт 7"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f8" description="Шрифт 8"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f9" description="Шрифт 9"
type="font" default="normal normal 100% Georgia, Serif">


Про имя переменной (variable), мы с вами уже знаем, про описание переменной (description) тоже, тип переменной (type) теперь font, что и понятно, потому что описываем мы с вами переменные для шрифтов.

А вот про значение по умолчанию (default) т.к. оно стало намного сложнее придется поговорить подробно.

Все дело в том что описатель шрифта font это описатель набора свойств шрифта.

Свойства в списке располагаются в следующей последовательности: font-style font-weight font-size font-family

Для параметра font-style в значении по умолчанию Blogger допускает только 2 значения: normal (нормальный шрифт)или italic (курсив)

Для параметра font-weight в значении по умолчанию Blogger допускает только 2 значения: normal (нормальный шрифт)или bold (полужирный)

Задавать параметр font-size в значении по умолчанию можно только в процентах.

А font-family может быть только выбрана из значений Arial, Courier, Georgia, Times, Trebuchet, Verdana.

Идея "вынесения" шрифтов на вкладку Шрифты и цвета осталась таже. Не ставя галочку на Расширить шаблоны виджета ищем слово font в Html-коде нашего шаблона.

Встретиться это слово может в самых разных видах, так в шаблоне, над которым мы работали в прошлый раз я видела следующие варианты, кстати, конец описания обычно (если это не последний описатель) отделяется точкой с запятой

font: 1em/1.5em Verdana, Geneva, Arial, Helvetica, sans-serif;
font:bold 100% verdana, arial, helvetica, sans-serif;
font:3em Georgia,Times New Roman,Trebuchet;

Ну, что тут можно сказать все описатели между двоеточием и точкой с запятой мы заменим на имя очередной переменной со знаком доллара впереди $f1 например.

А в блокноте в описании значения по-умолчанию этой переменной можно поставить:
1) на первой позиции normal (если мы не встретили italic)
2) на второй позиции normal (если в коде не упоминалось bold)
3) на третьей позиции 100% (если вы не видите в описании другие цифры со знаком процент, все эти 3em, 1em/1,5 em тоже размеры, но Blogger во вкладке "Шрифты и цвета" их не поддерживает, единственное, что можно сказать, что если 1.5em - это 100%, то 3em будет 200%).
4) на четвертой позиции мы поставим семейство шрифтов его можно целиком вставить в дефолтное значений.

Итак в Html-коде у нас будет:

font: $f0;
font: $f1;
font: $f2;


А в Блокноте если мы поменяем значения по умолчанию:

<Variable name="f0" description="Шрифт 0"
type="font" default="normal normal 120% Verdana, Geneva, Arial, Helvetica, sans-serif">
<Variable name="f1" description="Шрифт 1"
type="font" default="normal bold 100% verdana, arial, helvetica, sans-serif">
<Variable name="f2" description="Шрифт 2"
type="font" default="normal normal 300% Georgia,Times New Roman,Trebuchet">

еще возможен вариант, когда внутри фигурных скобок вы встретит сразу несколько частичных описателей свойств шрифта.

Это может быть что-то одно или сразу несколько описателей font-size font-weight font-style или font-family. Бывают и другие описатели, например font-variant (их мы на имя переменной не заменяем, а оставляем как есть). А уже известные нам описатели, изменение которых на вкладке Шрифты и цвета Blogger поддерживает мы заменим на font: и имя ОДНОЙ переменной;

В одном месте Html-кода шаблона над которым я работала встретилось такое описание некоторого блока:

{
text-align:justify;
font-size:14px;
font-weight:bold;
}

я его заменила на

{
text-align:justify;
font:$f4;
}

А в Блокноте изменила значения по умолчанию только в известных позициях:
<Variable name="f4" description="Шрифт 4"
type="font" default="normal bold 120% Georgia, Serif">

Возможно, со значениями по умолчанию у переменных можно особенно и не возиться, а когда все описатели шрифтов в блоге будут заменены на переменные, и в Html-код блога вы вставите описания переменных для шрифтов. Описания переменных вставляем ПЕРЕД строчкой

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

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

Прошу прощения за скучное описание, но может быть кому-нибудь пригодится.

Всем здоровья и удачи!
Не мерзнете!


СветаBlogger: кошка.

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

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

  1. Замерзаю!!!!!!!
    Думать нечем - всё застыло.

    ОтветитьУдалить
  2. Привет, родная!

    Я, вовсе и не тебя, замерзающую при +18С имела ввиду! ;)

    Это я больше про Москву, где у нас было хорошо за -20C когда я писала это пост.

    Спасибо, что заглянула, всегда приятно увидеть тебя в комментах.

    Света
    PS Кайл передает привет.

    ОтветитьУдалить
  3. как мне сделать так что начать новый абзац в ХТМЛ?
    я хочу расположить ссылки одна под другой но они все выстраиваются в один ряд.там некий код нужен и я его знал но забыл так как сменил шаблон.он там был.вобщем нужен код для кнопки ENTER.

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

    Я думаю вы имели ввиду html-тег: <br/> (новая строка).

    Удачи!
    Света

    ОтветитьУдалить
  5. Спасибо.

    я вот понял что нужно было вставлять гаджет ТЕКСТ а не ХТМЛ код.по привычке гаджет ХТМЛ код использую.

    ОтветитьУдалить
  6. Спасибо,Вам,за все статьи. Я кое-что сделал и мне очень понравилось. Пишите ещё, особенно то, что можно делать используя русский язык. Всего хорошего.

    ОтветитьУдалить
  7. БЛАГОДАРЮ ВАС ЗА ВАШ ДОБРЫЙ И ПОЛЕЗНЫЙ БЛОГ! С НАСТУПАЮЩИМ ВАС! И ПУСТЬ УДАЧА ВАМ ВСЕГДА УЛЫБАЕТСЯ! :)))

    ОтветитьУдалить
  8. Светлана огромное спасибо за Ваш труд! Увидел эти посты очень порадовало, мне шаблон как раз не позволяет пользоватся стандартными настройками. Но как можно изменить размер шрифта? Я пробовал изменять в шаблоне, не изменяется как и ширина поста. Возможно делаю что то не то.... И у меня названия постов ПОДЧЁРКНУТЫ (как ссылка) можно ли от этой некрасивости избавится?

    ОтветитьУдалить
  9. Света,спасибо большое.Вы украшаете наш блог и нашу жизнь.

    ОтветитьУдалить
  10. Светлана,ОГРОМНОЕ вам спасибо за статьи, которые помогают мне (и не только ) украсить свой блог, сделать его более интересным.
    Спасибо еще раз! :))))))

    ОтветитьУдалить
  11. Доброго времени суток,Светлана! у меня не получилось изменить..пишет что ошибка..Недопустимое описание переменной в оболочке страницы: Недопустимое значение для цвета.

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

    У вас в шаблоне есть такая строчка:
    .post_title a{color:f00;}

    возможно поможет, если написать так:
    .post_title a{color:f00; text-decoration: none;}

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

    ОтветитьУдалить
  13. Svetlana, здравствуйте!

    Пришлите мне, пожалуйста, код, который не принимает Blogger, посмотрю, что там не так.

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

    ОтветитьУдалить
  14. Роман, Владимир, Alia и Раечка спасибо большое!

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

    ОтветитьУдалить
  15. Здравствуйте. Некоторые гости моего блога жалуются на то, что тяжело войти на блог. А я (чайник) незнаю как зделать вход доступным для всех. Помогите пожалуста.

    ОтветитьУдалить
  16. Даже не знаю, что сказать, Надежда!

    Я зашла к вам на блог абсолютно легко, блог НЕ пергружен лишними скриптами, тяжелой анимированной графикой и т.д. Все у вас в порядке... Может иногда что-то с Blogger'ом не так, но в последний год Blogger работает хорошо.

    Не берите в голову!
    Удачи во всем!
    Света

    ОтветитьУдалить
  17. Добрый день и большое спасибо!
    Пользуясь вашей добротой задам вопрос, т.к. сама понять не могу :)) Почему вставленная чин по чину ссылка (н-р, на блог Бабочки-Яночки) не работает? При вставке ссылки в пост, в всплывающем окне, при проверки ссылки - прекрасно открывается!!
    В посте - не открывается :(
    Прошу прощения, если вопрос глупый.

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

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