Редагування шаблону Bootstrap Логотип перед назвою сайту навбарі
Спочатку в навбарі сайту, створеного на LinkorCMS у шаблоні Bootstrap, відображається лише назва сайту. У цій статті я докладно покажу, як вставити логотип сайту перед його назвою, і як зробити цей логотип змінним при наведенні курсору.
Спочатку заготовимо логотип сайту. Його ширина може бути різною, а ось висота має бути не більше 35 px, інакше логотип не впишеться у смужку навбару. Логотип має бути намальований у форматі png на прозорому фоні. Я, наприклад, заготовив логотип із фотографії своєї пасочниці.
Заливаємо файл логотипу на сайт через FTP (за допомогою, наприклад, FileZilla), і йдемо на хостингу сайту у/templates/bootstrap/style/style.css.
У коді знаходимо клас.navbar .brand і змінюємо код. Я, наприклад, змінив відступи навколо логотипу в рядкуpadding : 10px (від верхнього краю навбару) 20px (від правого краю) 10px (від нижнього краю) 90px (від лівого краю - цифра дорівнює ширині логотипу плюс 15px для пробілу між логотипом та назвою сайту).
Також я вставив рядок background: url('/templates/bootstrap/images/logo.png') no-repeat 10px 2px; - Цей код виводить сам логотип (за допомогою url), і задає його розташування.
Готово – перед назвою сайту відображається логотип!
Ходімо далі — можна зробити так, щоб логотип змінювався під час наведення на нього курсору. Варіантів для творчості сила-силенна, аж до вставки інших картинок, але, мені здається, красивіше і логічніше виділити той же логотип, наприклад, висвітливши його, або трохи зменшивши, або змінивши забарвлення, щоб логотип просто виділявся при наведенні.
Я вирішив просто зробити логотип яскравішим. Для цього той же логотип з'ясував у фотошопі, також зберіг у PNG і залив на сайт через FTP.
Потім на хостингу вstyle.css вставив під класом.navbar .brand новий клас.navbar .brand: hover :
.navbar .brand:hover background: url('/templates/bootstrap/images/logo2.png') no-repeat 10px 2px; >
У ньому я поставив висновок другого логотипу при наведенні та розташування логотипу.
Готово – тепер при наведенні курсору на логотип він стає яскравішим, що виглядає дуже красиво.
Зауважу, що варіант із двома логотипами на одному місці не найкращий, тому що при повільному інтернеті другий логотип підвантажується секунду-дві, утворюючи порожнє місце, і це помітно. Набагато краще зробити один логотип за допомогою CSS-спрайтів.
У цьому випадку на сайт вставляється одна картинка з двох логотипів - звичайного та підсвічуваного, і логотип змінюється при наведенні миттєво. Але моїх знань CSS на цю операцію мені поки що не вистачило, і з цим варіантом у мене поки що нічого не вийшло. Вивести в навбарі два логотипи мені виявилося набагато простіше та швидше. Хто знає, може, саме ви, дорогий читачу, підкажете мені правильне рішення? ;-)
Отже, тепер ви знаєте, як вставити свій логотип у навбарі сайту, і як змусити змінюватися логотип при наведенні курсору!
Ви можете віддячити мені за цю статтю, поклавши денюжку на Яндекс.Гроші - 41001946245208; Webmoney - RUB - R228675470677, USD - Z403380463613, EUR - E114430860179; моб.тел. 8-985-301-51-80 (МТС).