Как настроить цвета карты сайта по ярлыкам

В предыдущей статье Карта сайта для Blogger по ярлыкам я Вам рассказывала - как установить такую карту в свой блог, а также предложила несколько вариантов ее цветового оформления с моими настройками. Сейчас покажу, как можно самому настроить цвета карты сайта по ярлыкам под Ваш блог.


Вот код карты сайта, с которым мы будем работать:



Если вдруг код не будет отображаться - пишите в комментариях.

Так она выглядит с моими настройками:

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

Скриншоты даю с номерами строк кода, чтобы удобнее было искать. Я пользуюсь программой Notepad++, где также видны №№ строк, а сам код в статью вставляла при помощи сервиса.

О том, как выбрать цвета для блога, я писала в нескольких статьях. 
В коде карты менять будем только 6 символов после знака #, обозначающие код того или иного цвета.

Итак, поехали.

В строке 48 настраивается цвет узкой верхней горизонтальной полосы.

В строке 49 Вы можете настроить цвет фона под текстом "Загрузка, подождите...", который появляется при загрузке карты сайта. Также цвет в этой строке отвечает за фон всего левого столбца с ярлыками.

Если сделать цвет прямоугольного блока под выбранным ярлыком (который меняется в строке 87) более светлым, чем весь столбец слева, то эта полоса даже кажется немного объемной.

И еще можно настроить цвет прямоугольного блока под заголовком статьи при наведении курсора (скриншот карты с другого блога). В строке 162.

Вот так всего за 4 шага меняется внешний вид карты сайта для Blogger по ярлыкам. 

Конечно, вы можете пойти дальше - поменять шрифты, цвет текста и др., даже если Вы не изучали CSS также, как и я. Просто опытным путем меняем цвет, обновляем страницу и проверяем результат...

Вот, например, пока писала эту статью, настроила карту в зеленых тонах:

И даже кодом такой карты сайта с моими настройками могу поделиться :)
(Как установить карту смотрите в предыдущей статье).




Ну и пожелаем, чтобы эта карта устанавливалась и работала нормально еще долго-долго.