В стандартном стиле оформления системы вы можете использовать текстовый логотип из настроек сайта или заменить его на картинку. Замена логотипа — процедура безопасная и переживёт любые обновления системы.
Текстовый логотип
Самый простой и быстрый вариант — использовать лого в виде текста. За текст логотипа отвечают пункты «Милое название» и «Короткое название» из раздела «Управление — Настройки — Основные». Милое название отображается над меню слева и в блоке «хлебных крошек» справа. Короткое название отображается в левом верхнем углу при сворачивании бокового меню.
Вы можете использовать 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>
Сохраните файл по кнопке внизу редактора. Логотип появится на странице входа.