Подключаем свой css к своему блогу

Сообщений - как подключить css файл к своему блогу - очень и очень много. Поэтому ещё одно погоды не сделает. Единственное отличие - тут будет сообщено ещё и про настройки, которые я сделал для своего блога.

Если почитать кучу всяких полезных и не очень статей по оптимизации, то можно сильно изуродовать свой сайт. Есть такая даже поговорка - с дуру можно и х*й сломать.  

Это я к чему. Можно делать много всяких ништяков. Но для себя я решил что файл стилей должен быть один. И файл с JavaScript один. Их нужно упаковать и не трогать - что бы пользователь зайдя раз к тебе сайт, скачал их и пользовался до конца второго пришествия (ребрендинга например)))).

Поэтому крайне важно где будет размещён этот файл со стилями. Если вы положите у себя на компьютере, а компьютер по диалапу будет вечно в сети... ну можете попробовать, но поверьте на слово. Работать будет очень и очень медленно!

Так вернёмся к нашим баранам. Что бы подключить css файл к своему блогу, необходимо сделать следующее.

1. В панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
2. Делаем резервную копию текущего шаблона. Для этого выбираем пункт "Загрузить весь шаблон". Называем файл удобным именем. Лично я в качестве имени файла выбираю такой шаблон [имя блога]-template-[ddMMyyyyHHmm].xml. Например sedegoff-template-200420110859.xml
3. Ищем конструкцию </head> и над ней вставляем код:
4. Сохраняем шаблон
   

   <!-- Описание подключаемого файл BEGIN -->
   <link rel="stylesheet" href="Путь к файлу">
   <!-- Описание подключаемого файл  END-->

5. Наслаждаемся!

Так - очередной рассказ как подключить файл я рассказал. А! Если не знаете где разместить файл - почитайте сообщение Где разместить файлы в сети для blogger или как изменить mime type в хранилище кода Google.


Теперь опишу что я размещу в этом файле. Но для начала я его создам. Где его размещать и как создавать - выше ссылку уже дал. В результате у меня файл подключается так

<!-- Файл стилей для блога sedegoff.com BEGIN -->
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/sedegoff.com.css"/>
<!-- Файл стилей для блога sedegoff.com  END-->

Отмечу то, что файл пока будет не упакованный. Пока идёт разработка - будет в общем виде. А как закончу, так и упакую.


Что я буду туда помещать. Ну начну с того, что изменю стиль заголовка сообщения - сейчас он выглядит как ссылка. А мне это не нравится. Для этого я добавил вот такую вот строчку

h3.post-title a{
  color: #444;  
}

Теперь что касается панели вверху. Может кому то и удобно, но лично мне это всё напоминает панельку на сайтах народру. Этакая напоминалка что блоги не нам принадлежат. В общем кому как - мне не нравится!


А раз мне не нравиться, значит я её уберу. Google пока не пришёл к тому, что бы её вывод сделать настраиваемым (во всяком случае я в данный момент об этом не знаю), а раз так - будем её прятать.


Что бы избавиться от панельки сверху блога в файл со стилями добавим следующий код

#navbar{
  display: none;
}

Кого то может сказать - но там же были удобные кнопки! Об этом попозже - я расскажу как сделать что бы эти кнопки были и никому не мешали!
Обновление от 23.08.2011: Делаем панельку


Ну и последнее на сегодня. Если зайти в текст шаблона, то можно увидеть примерно следующее

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

Это не что иное, как шаблон для стиля. Иными словами эти переменные заполняет генератор страницы. А так как с шаблоном я уже определился - то смысла в нём уже и нет. Поэтому выношу его в свой файл.


Для этого мне надо как бы заполнить переменные. Но сделаю проще - открываю свой блог, затем открываю на просмотр текст страницы и вижу

body {
font: normal normal 14px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
color: #444444;
background: #ffffff none repeat scroll top left;
padding: 0 0 0 0;
}

Всё прекрасно заполнено.


Теперь надо это всё убрать из шаблона и поместить в моём файле.

1. В панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
2. Делаем резервную копию текущего шаблона. Для этого выбираем пункт "Загрузить весь шаблон". Называем файл удобным именем. Лично я в качестве имени файла выбираю такой шаблон [имя блога]-template-[ddMMyyyyHHmm].xml. Например sedegoff-template-200420110859.xml
3. Далее открываем блог на просмотр и затем открываем исходный код страницы. В файл со стилями нужно перенести содержимое представленных ниже тегов. По хорошему надо ещё объединить одинаковые значения.  Например в обеих этих секциях идёт настройка для тега body
   

   <style id='page-skin-1' type='text/css'>
   ....
   </style>
   
   <style id='template-skin-1' type='text/css'>
   ....
   </style>

4. Теперь надо убрать это всё в шаблоне. Для этого в панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
5. Теперь внимательно. Нужно в тексте шаблона конструкцию
   

   <b:skin>
   ...
   </b:skin>
   
   <b:template-skin>
   ...
   </b:template-skin>

   заменить на конструкцию
   

   <b:skin></b:skin>

   Внимание! Троеточие - это всё что угодно между этими тегами.
   
6. Сохраните шаблон
7. Проверяйте. Возможно понадобиться обновит страницу через Ctrl+R (Ctrl+F5). Если после этого страница выглядит криво, значит в файл  Вы не перенесли всё что нужно. Восстановите шаблон из файла. И попробуйте ещё. Если будет время, то и я могу посмотреть и помочь.

Собственно всё что новое буду в файл добавлять - буду писать тут