В стандартном стиле оформления системы вы можете использовать текстовый логотип из настроек сайта или заменить его на картинку. Замена логотипа - процедура безопасная и переживёт любые обновления системы.
Текстовый логотип
Самый простой и быстрый вариант - использовать лого в виде текста. За текст логотипа отвечают пункты "Милое название" и "Короткое название" из раздела "Управление - Настройки - Основные". Милое название отображается над меню слева и в блоке "хлебных крошек" справа. Короткое название отображается в левом верхнем углу при сворачивании бокового меню.
Вы можете использовать HTML в этом поле и добавить к логотипу пару тегов. Оптимальнее всего использовать strong для жирного текста или small с заглавными буквами.
Alter<strong>CPA</strong> AlterCPA <small>MOE</small>
К вашей системе подключен шрифт с иконками Font Awesome. Вы можете добавить его иконку в логотип. Для этого используйте код:
<i class="fa fa-icon-name"></i>
Логотип с использованием вставки кода может выглядеть вот так:
Top<i class="fa fa-fw fa-user-circle-o no-margin"></i>Partners <i class="fa fa-fw fa-bug"></i> AlterCPA
При этом в коротком названии можно использовать только иконку Font Awesome, она идеально вписывается в квардат.
Картинка для логотипа
Перед началом работы вам необходимо заказать логотипы у своего дизайнера. Формат логотипа - PNG, потребуются три файла для различных мест.
- Основной логотип: посадочное место - 230x50, рекомендуется уместить логотип не более чем в 200 пикселей ширины и 40-45 пикселей высоты. Название файла -
logo.png. - Малый логотип: посадочное место - 50x50, рекомендуемые размеры - от 40x40 до 45x45. Название файла -
logo-sm.png. - Логотип страницы входа: посадочное место не ограничено, рекомендуемая ширина - 200-250 пикселей, рекомендуемая высота: 50-100 пикселей. Название файла -
logo-login.png.
Если вы хотите использовать другие названия файлов, замените их далее в коде. В качестве логотипа страницы входа и основной логотипа можно использовать один и тот же файл.
После готовности картинок, перейдите в раздел "Управление - Настройки - Стили", нажмите на кнопку "Картинки" вашего стиля и загрузите сюда полученные от дизайнера файлы.
Логотип внутри платформы
Вставка логотипа производится через CSS-файл вашего стиля. При создании стиля, файл style.css был создан и подключен к вашему стилю автоматически. Если его нет или вы хотите использовать другой файл, вам необходимо:
- Перейдите в раздел "CSS" своего стиля.
- С помощью формы внизу страницы укажите название файла (без расширения), например:
logo, и нажмите "Создать". - Перейдите в раздел "Настройки" своего стиля.
- В поле "CSS-файлы" добавьте ту же строку с названием вашего файла (без расширения) и нажмите "Сохранить".
Перейдите в раздел CSS своего стиля и нажмите "Правка" у только что созданного или уже существующего файла стиля. В открывшемся редакторе перейдите вниз и добавьте строки:
.sidebar-mini.sidebar-collapse .main-header .logo>.logo-mini {
color: transparent;
background: url('../img/logo-mini.png') center center no-repeat;
}
.main-header .logo .logo-lg {
color: transparent;
background: url('../img/logo.png') center center no-repeat;
}
.main-header .navbar-brand {
color: transparent !important;
background: url('../img/logo.png') center center no-repeat;
content: " ";
width: 200px;
}
Вам необходимо поменять этот код в соответствии с вашим файлом. В последней строке в width: 200px; вместо ширины в 200 пикселей укажите ширину вашего файла основного логотипа.
Логотип на форме входа
Для замены формы входа, вам необходимо добавить шаблон login в свой стиль. Если это ещё не сделано, перейдите в раздел "Шаблоны" стиля, найдите в списке login и нажмите "Добавить".
Нажмите на "Правка" для шаблона login. В открывшемся редакторе найдите следующий код:
<div class="login-logo">{title}</div>
Замените его на:
<div class="login-logo"><img src="{tpl:skinimg}/logo-login.png" alt="{site}" /></div>
Если вы используете одинаковые лого на странице входа и внутри системы, замена будет выглядеть так:
<div class="login-logo"><img src="{tpl:skinimg}/logo.png" alt="{site}" /></div>
Сохраните файл по кнопке внизу редактора. Логотип появится на странице входа.