Редактирование шаблона Bootstrap: Шапки и тексты в них

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


В прошлой статье я рассказал вам про настройку шрифта на сайте. Теперь займёмся творчеством — заменим шапки сайта на свои и вставим в них свой текст.


«Засветка» текста в шапке


shapki_1


Первое, что мне бросилось в глаза — черезчур тёмная, на мой взгляд, «засветка» текста в шапке. Сделаю эту «засветку» посветлее.


shapki_2


Для этого в «style.css» вставляю код из «bootstrap.min.css» (как искать нужные элементы в этом коде, я писал подробно в предыдущих статьях). В скопированном коде (он выделен на скрине выше) меняю цифру «засветки» в элементе «background:rgba(0,0,0,0.30)». Сохраняю изменения.


shapki_3


«Засветка» теперь не такая чёрная, а скорее неназойливо-серая. Теперь меняю картинки-слайды.


Замена картинок-слайдов


shapki_4


Они находятся в панели сайта на хостинге в папке www → ваш_сайт → templates → bootstrap → images → slides.


shapki_5


Создаём в фотошопе или другой программе свои картинки с такими же размерами, даём этим картинкам такие же имена, как у стандартных. И заливаем, предварительно удалив прежние, в папку слайдов через FTP. Картинки лучше оптимизировать, чтобы они не весили слишком много, и из-за этого долго бы загружались на сайте.


shapki_6


После загрузки картинок в папку меняем их права с 644 на 666.


shapki_7


Готово — в шапках выводятся наши картинки! Приступаем к текстам.


Вставка текста в шапки


shapki_8


Открываем «header.html».


shapki_9


На скрине выше видно, что искомые фразы легко найти в коде шапки. Заменяем тексты на свои.


shapki_10


Любо-дорого смотреть! Но можно нанести ещё один, заключительный штришок. Скорость пролистывания слайдов такова, что я не успеваю прочесть и вдуматься в выведенные фразы. Установлю интервал смены картинок помедленнее.


Настройка интервала пролистывания слайдера


shapki_11


Для этого в том же коде «header.html» вставляю, как на скрине выше, после кода скрипта карусели (слайдера Carousel) код интервала пролистывания шапок. Здесь задана цифра «10000», конечно, вы можете задать свой вариант интервала.

 

<script type="text/javascript">
      $('.carousel').carousel({
      interval: 10000,
      })
</script>


Вот теперь с шапками всё! Можно любоваться на свои картинки, читать вставленные фразы, и получать удовольствие от того, как сменяются слайды один за другим, а то и перелистывать их самому, кликая на стрелочки ;-)

 

 

В предыдущей статье: Редактирование шаблона Bootstrap: Шрифт, его размер и цвет.


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

 


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


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

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



Комментарии

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