Редактирование шаблона Bootstrap: Футер

Автор: Антон Матвейчук


footer_1


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

Изменяем текст в футере


footer_2


Футер изначально состоит из кнопки «Наверх» и текста про авторские права. Текст можно изменить в Админ-панели сайта → Сайт → Настройки сайта → Основная информация. Изначально, особенно на сложном фоне, этот текст выглядит очень блёкло. Сделаем его поярче.


footer_3


Для этого идём в панели сайта на хостинге в «style.css». На скрине выше показано, какой код искать и что изменять. В данном случае я изменил цвет шрифта и добавил свойство «жирный».


footer_4


Смотрится совсем по-другому! Очень кстати сюда будет добавить кнопки своих аккаунтов в соцсетях, других сайтов, а также (обязательно!) RSS-потока этого сайта (RSS очень удобен для подписки и чтения новостей сайта через различные сервисы наподобие Яндекс.Подписок). Адрес RSS-потока для сайтов на LinkorCMS таков: http://ваш_сайт/rss.php


Вставка кнопок социконок


footer_5


Для этого заранее нарисованные в фотошопе или другой программе кнопки социконок загружаем через FTP в созданную нами в панели сайта на хостинге папку для них, например, ваш_сайт → uploads → socikonki

 

Теперь пишем код для размещения социконок в футере. Поскольку я новичок в сайтосоздании, то тут просто схитрил и сделал всё через визуальный редактор. Поделюсь и с вами этим способом ;-)


footer_6

 

В Админ-панели сайта идём в Сайт → Блоки → Добавить текстовый блок.


footer_7


Откроется окно визуального редактора. Вставим картинки социконок, кликнув на иконку Менеджера изображений и файлов.


footer_8


Откроется окно с папками раздела «uploads». Кликаем на папку с социконками, и затем дважды на нужную картинку.


footer_9


Картинка вставится в поле текста. Также вставляем остальные картинки. Теперь сделаем их ссылками. Для этого выделяем картинку, нажав на неё, и кликаем на иконку ссылки.


footer_10


В открывшемся окошке вставляем ссылку иконки, задаём, где открываться ссылке — в этом окне или в новой вкладке, вписываем название картинки.


footer_11


После того, как вставим все ссылки, кликаем на иконку исходного кода HTML.


footer_12


И вот он, грамотно прописанный и нужный нам код социконок! Копируем его.


footer_13


Идём в панели сайта на хостинге в www → ваш_сайт → templates → bootstrap, открываем здесь файл «footer.html» и вставляем сюда, как на скрине выше, скопированный код социконок.


footer_14


Отлично! Кнопки вставлены! Вы можете сделать код по-своему — разместить кнопки посередине или справа, оформить по-другому, — простор для творчества не ограничен!


Фон для футера


footer_15


Футер в шаблоне Bootstrap изначально прозрачен, но его можно окаймить фоном, оформив в виде блока. Для этого в «style.css» вставляем нужные изменения, как на скрине выше.


footer_16


Футер теперь имеет свой фон! С основным оформлением сайта мы закончили, теперь переходим к отдельным деталям и нюансам, не менее важным, чем шапки, фон и футер.

 

Дополнение от 23.10.2014:


На форуме LinkorCMS мне хорошую идею подкинул насчёт фона футера sinabs, а именно — сделать фон не сплошным, а переходящим из светлого в тёмный, или точнее — градиентным. Как правильно пишет sinabs, футер должен быть видным, чтобы обозначить конец сайта. Я решил сделать на своём сайте фон футера таким же, как навбар, для гармоничной композиции.


footer_17


Ищем через инспектор кода в браузере элемент футера и подставляем код цвета фона футера, попутно закругляя углы фона. На скрине выше показано, как это сделано. Также я обесцветил линию над футером, так как на фоне, думаю, она ни к чему.


Как видно на скрине, цвет задан в формате rgba, так как только в нём можно задавать нужную прозрачность. Так, первые три цифры кода цвета rgba задают сам цвет, четвёртая же — степень прозрачности. Здесь, например, верхний цвет градиента определён в прозрачности «1» (то есть, не прозрачный), нижний же цвет — в прозрачности «0.1». Здесь вообще много простора для творчества, стоит лишь «поиграться» с кодами цвета и прозрачности ;-)


footer_18


Нужный код цвета rgba можно взять из замечательной программы HTMLColors 2000 (о ней написано здесь). На скрине выше показано, откуда брать цифры.


footer_19


Учтите, при задании футеру фона также задаётся фон заголовку Комментариев.


footer_20


При появлении фона видим, что заголовок Комментариев впритык примыкает к началу фона, что смотрится очень некрасиво. Исправим это.


footer_21


На скрине выше показано, каким кодом это делается и куда вставляется.

 


В следующей статье мы с вами займёмся настройкой вида контентных модулей (новостей, статей, фото, файлов), а именно, узнаем, как вставлять в новости кнопку «Читать далее», и как вставить везде количество просмотров.

 


В предыдущей статье: Редактирование шаблона Bootstrap: Цвет навбара и блоков.


В следующей статье: Редактирование шаблона Bootstrap: Настройка вида модулей.

 


Вы можете отблагодарить меня за эту статью, положив денюжку на Яндекс.Деньги — 41001946245208; Webmoney — RUB - R228675470677, USD - Z403380463613, EUR - E114430860179; моб.тел. 8-985-301-51-80 (МТС).


Также я буду благодарен вам, если вы зарегистрируетесь в хостинге по ссылкам в моей статье — вам ничего не убудет, а я получу хоть какое, но вознаграждение ;-)

Опубликована: 11.10.2014
Просмотров 3264



Комментарии

Гости не могут добавлять комментарии, войдите или зарегистрируйтесь.