Изменяем цвет шапки шаблона вручную

четверг, 18 февраля 2010 г.

Много статей было написано по улучшению и приданию вашему блогу уникального дизайна, среди них и как сменить favicon, как убрать панель navbar, и целый цикл статей по работе с красивыми шаблонами для блоггер. Сегодня я хочу дать возможность еще большей свободы действий, теперь вы сможете делать изменения абсолютно по своему вкусу. Для начала хочу рассказать как изменить цвет шапки шаблона для блоггер на желаемый, в дальнейшем вы сможете менять цвета всех полей которые захотите, но об этом позже, сейчас о том, что посетитель вашего блога видят первым.
Существует два варианта изменения цвета шапки блога:
1. Вариант более простой. Мы заходим  в настройки нашего шаблона, а именно в Дизайн/Шрифты и цвета и видим:цвет шапки шаблона
Это стандартная настройка цветов шаблона , которая вроде бы иногда работает, но на уникальных шаблона зачастую изменения не вступают в силу, как и на моем тестовом блоге. Однако считаю, что все таки есть необходимость рассказать немного о стандартных настройках. В левой колонке вы выбираете элемент цвет которого хотите изменить, правее видите цветовую гамму из которой можно выбрать желаемый цвет, еще правее есть окошко под названием “Изменить шестнадцатеричный код цвета” , в него вы можете вставить HTML код желаемого оттенка цвета, если такового нет среди предлагаемых. Чтобы выбрать цвет вручную, можете скачать очень удобную программу , которая будет выдавать вам цвет любого элемента на рабочем столе, либо на сайте на котором вы находитесь. Например:
Колесо цветов
Вы можете видеть, что мой курсор наведен на мяч баскетболиста на рабочем столе, а маленьком окошке, которое обозначено стрелкой, отображается код цвета мяча, таким образом вы можете заполучить любой цвет который где-либо увидели, и вставить в свой блог. Скачать программу можно здесь. Если у вас работают стандартные настройки цветов блога, считайте, что вам повезло, если же нет переходим ко второму варианту.
2. Заходим в Изменить HTML , ставим галочку Расширить шаблоны виджета и при помощи поиска(CTRL+F) находим следующую строчку:
  #header-wrapper {
(Следует заметить, что в некоторых шаблонах эта строчка может быть такой:  #header-wrap    ,   либо такой:    #header     , либо:   #head)
В целом этот скрипт выглядит примерно так:
#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
В этом скрипте для изменения цвета шапки необходимо добавить строчку с кодом цвета. Например я выбрал в колесе цветов красный, это : #FF0000 . Для того, что бы изменить цвет шапки необходимо добавить вот такую строчку:
background:#FF0000;
Перед последней фигурной скобкой, выглядеть это будет так:
#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
background:#FF0000;
  }
И вот вы можете видеть результат:
Измененная шапка блога
Ну вот вроде бы и все. Импровизируйте. В следующей статье расскажу как Добавить красивую картинку в шапку блога даже если она не подходит по параметрам…

Похожие статьи

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

Вячеслав комментирует...

Программка не скачивается.Пишет - нет файла.

The Neighbour комментирует...

Сейчас перезальем файл! и можно будет скачать! Дайте знать получиось ли у Вас это сделать!

forex-strana комментирует...

Спасибо! То, что я искал!!! Все сработало только тег немного иначе был прописан

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
background:#FFFFFF;

Я хотел сделать полностью белый. Вот сайт http://forex-strana.blogspot.com/ Спасибо еще раз!!!

Отправить комментарий

Оставляйте ваши комментарии

 
 
 

Читать блог на другом языке

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified
 
Copyright ©Lagunof.com
Блога автора книги "Недвижимость: классическая, виртуальная, интеллектуальная" При перепечатке материалов с блога обратная ссылка обязательна
e4a11e6f00df223bf058f2795454739b