Свой логотип

В стандартном стиле оформления системы вы можете использовать текстовый логотип из настроек сайта или заменить его на картинку. Замена логотипа - процедура безопасная и переживёт любые обновления системы.

Текстовый логотип

Самый простой и быстрый вариант - использовать лого в виде текста. За текст логотипа отвечают пункты "Милое название" и "Короткое название" из раздела "Управление - Настройки - Основные". Милое название отображается над меню слева и в блоке "хлебных крошек" справа. Короткое название отображается в левом верхнем углу при сворачивании бокового меню.

Вы можете использовать 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:pathimg}/logo-login.png" alt="{site}" /></div>

Если вы используете одинаковые лого на странице входа и внутри системы, замена будет выглядеть так:

<div class="login-logo"><img src="{tpl:pathimg}/logo.png" alt="{site}" /></div>

Сохраните файл по кнопке внизу редактора. Логотип появится на странице входа.