Как сделать полную кастомизацию верхней полоски сайта (customHeader)
Разметка верхней полоски задается в GetLayout SELECT 1 в параметре CustomHeader.
В разметку можно вставлять дополнительно переменные, которые при рендеринге страницы будут заменяться на следующие элементы:
- {mainLogo} - лого и название сайта
- {topSidebarToggleButton} - кнопка сворачивания мобильного меню
- {breadcrumb} - хлебные крошки
- {menuHorizontal} - горизонтальное меню
- {fastAddForms} - меню быстрых действий
- {search} - поиск
- {seachMobile} - поиск под мобильный
- {alerts} - иконка меню уведомлений
- {messages} - иконка сообщений
- {divider} - вертикальный разделитель в элементах
- {balance} - состояние баланса
- {cart} - корзина
- {lang} - переключение языков
- {user} - меню пользователя
Разметку для CustomHeader указывать лучше не прямо в GetLayout, а генерировать через HTML блок.
CustomHeader не влияет на левую колонку меню (логотип принадлежит именно левой колонке, а не верхней полоске). Если необходимо его скрыть, то используйте либо CSS либо HideLeftCol (если не нужна вся колонка).
Есть параметры topMakeup и topMakeupMobile в GetLayout. Они отличаются от CustomHeader тем, что задают только разметку внутри списка иконок после поиска (и позволяют настроить разную верстку для мобильного и настольного вида).
Пример кастомизации панели на демостенде - https://demo.web-automation.ru/list/watch/kastom-verkhney-paneli-sayta---85
Обновление Апрель 2023. Мы создали отдельный сниппет, который позволит использовать верхнюю полоску как на лендах, так и на стандартных страницах.
Как он выглядит по умолчанию на ПК версии:
Примечани: чтобы сделать светлым заголовок надо поменять всего лишь 2 класса с dark на light (navbar-dark и bg-dark).
Как выглядит по умолчанию на мобиальной версии в раскрытом виде:
В данном случае менять разметку можно практически любую.
Сам текст html блока (его можно использовать в customHeader):
<div style="height: 55px;">
<div class="navbar-container position-fixed bg-dark w-100" style="z-index:2;">
<nav class="navbar navbar-expand-md navbar-dark">
<!-- ЛОГО и НАЗВАНИЕ -->
<a class="navbar-img mr-2" href="/"><i class="fas fa-dove "></i>
</a>
<a class="navbar-brand" href="#">Falcon Space</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<!-- МЕНЮ СЛЕВА -->
<ul class="navbar-nav mr-auto">
<!-- Простые пункты меню -->
<li class="nav-item">
<a class="nav-link" href="#lnd-main3">Ссылка 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link-2">Ссылка 2</a>
</li>
<!-- Вложенные пункты меню -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<!-- Глобальный поиск -->
<li class="nav-item">
<div class="input-group" style="max-width: 150px; position:relative; top: 2px;">
<select class="form-control bg-light border-0 small asSearch as-select-search d-none" data-url="/controls/search/search" data-itemid="0">
<option value="0">Найти...</option>
</select>
</div>
</li>
<!-- УВЕДОМЛЕНИЯ -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle " href="#" id="alertsDropdown" role="button" data-toggle="dropdown">
<i class="fas fa-bell fa-fw"></i>
<span class="badge badge-danger badge-counter as-notification-count hide">0</span>
</a>
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated zoomInDown animated--grow-in" aria-labelledby="alertsDropdown">
<a href="/notifications" class="dropdown-header text-center text-decoration-none">
Все уведомления
</a>
<div class="as-notification-cont"></div>
</div>
</li>
<!-- Сообщения -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link " href="/messages" id="msgCount" role="button">
<i class="fas fa-envelope fa-fw "></i>
<span class="badge badge-danger badge-counter as-msg-count hide">0</span>
</a>
</li>
<!-- РАЗДЕЛИТЕЛЬ -->
<li class="border d-none d-sm-block"></li>
<!-- Некая кнопка с иконкой -->
<li class="nav-item dropdown no-arrow mx-1" title="">
<a class="nav-link " href="#" role="button">
<i class="fa fa-bars fa-fw"></i>
<span>1000</span>
</a>
</li>
<!-- КОРЗИНА -->
<li class="nav-item dropdown no-arrow asTopCartBar">
<a class="nav-link dropdown-toggle" href="#" id="cartDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-shopping-cart fa-fw"></i>
<span class="badge badge-danger badge-counter as-cart-productCount hide">0</span>
</a>
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in text-center" aria-labelledby="cartDropdown">
<div class="as-cart-info" data-code="supplierProduct"></div>
</div>
</li>
<!-- ЯЗЫКИ -->
<li class="nav-item dropdown no-arrow asTopLang">
<a class="nav-link dropdown-toggle" href="#" id="langDropdown" role="button" data-toggle="dropdown">
<i class="fas fa-globe fa-fw"></i><span class="as-langs-curLang hide text-uppercase"></span>
</a>
<div class="dropdown-menu dropdown-menu-right p-3 shadow text-center" aria-labelledby="langDropdown">
<div class="as-langs hide"></div>
</div>
</li>
</ul>
<!-- МЕНЮ СПРАВА -->
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="https://wa.me/+79008007060" title="Whatsapp, telegram, viber" target="_blank"><i class="fab fa-whatsapp"></i> +7 (900) 800-70-60</a>
</li>
<!-- СЛУЖЕБНОЕ МЕНЮ ПОЛЬЗОВАТЕЛЯ -->
<li class="nav-item dropdown no-arrow as-loginStatus">
<a class="nav-link dropdown-toggle animated zoomInRight delay-1s slow" href="#" id="userDropdown" role="button" data-toggle="dropdown">
<i class="fa fa-user-tie"></i>
<span class="as-userPicLabel ">user1</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
<span class="userDropdownLabel dropdown-item disabled text-center font-weight-bold">
Пользователь
</span>
<div class="dropdown-divider"></div>
<a class="dropdown-item " href="/user">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Мой профиль
</a>
<a class="dropdown-item " href="/changepass">
<i class="fas fa-key fa-sm fa-fw mr-2 text-gray-400"></i>
Сменить пароль
</a>
<a class="dropdown-item " href="/account/logoff">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Выйти
</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация, юзабилити Панели с тенью и со скруглением Добавление анимации Как стилизовать иконку Ограничения по изменению дизайна Изменение стилизации через CSS Анимация элементов. Как работать с анимацией Как сделать анимацию иконок Управление темами сайта. Как создать новую тему дизайна сайта Как сделать липкую панель сверху страницы CSS. Как внедрить свои стили CSS на каждой странице портала CSS. Кастомные CSS файлы для страницы Руководство по юзабилити сайтов на базе Falcon Space. Как улучшить свой сайт Как улучшить внешний вид личного кабинета на сайте - элементы стилизации в разметке страниц Falcon Space Как внедрить форму настроек внешнего вида сайта Как внедрять готовую верстку в страницу Верстка. Как внедрить новый шрифт в проект CSS. Как через CSS управлять стилями конкретных страниц Гид по стилям Falcon Space Кастом разметка верхней панели (TopMakeup) Как поменять степень затемнения фона у диалогового окна Верстка. Как поменять столбцы местами на смартфоне Управление анимацией для форм, таблиц Как сделать основное меню горизонтальным Как сделать основное меню белым Управление иконкой в окне alert справа вверху окна Как сделать полную кастомизацию верхней полоски сайта (customHeader) Как сделать дизайн сайта со скругленными элементами (или без скруглений) Вывод на экран денежных сумм (отображение рублей, валюты) - as-money Как увеличить картинку на странице Визуализация воронки на основе данных Создание своей темы для сайта Горячие клавиши Falcon Space Как сделать модальное окно определенной ширины
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта