In the standard system design style, you can use the text logo from the site settings or replace it with an image. Replacing the logo is a safe procedure and will survive any system updates.
Text logo
The easiest and fastest option is to use the logo as text. The "Nice name" and "Short name" items from the "Control - Settings - General" section are responsible for the text of the logo. The nice name is displayed above the menu on the left and in the breadcrumb block on the right. The short name is displayed in the upper left corner when the side menu is collapsed.
You can use HTML in this field and add a couple of tags to the logo. It's best to use strong for bold text or small for capital letters.
Alter<strong>CPA</strong> AlterCPA <small>MOE</small>
An icon font Font Awesome is connected to your system. You can add its icon to the logo. To do this, use the code:
<i class="fa fa-icon-name"></i>
A logo using pasted code might look like this:
Top<i class="fa fa-fw fa-user-circle-o no-margin"></i>Partners <i class="fa fa-fw fa-bug"></i> AlterCPA
At the same time, only the Font Awesome icon can be used in a short name, it fits perfectly into the square.
Picture for the logo
Before starting work, you need to order logos from your designer. The logo format is PNG, three files are required for different locations.
- Main logo: footprint - 230x50, it is recommended to fit the logo no more than 200 pixels wide and 40-45 pixels high. The file name is
logo.png. - Малый логотип: footprint- 50x50, recommended sizes - from 40x40 to 45x45. The file name is
logo-sm.png. - Логотип страницы входа: footprint isn't limited, recommended width - 200-250px, recommended height - 50-100px. The file name is
logo-login.png.
If you want to use other filenames, change them later in the code. You can use the same file as the login page logo and the main logo.
After the images are ready, go to the "Management - Settings - Skins" section, click on the "Images" button of your skin and upload the files received from the designer here.
Logo inside the platform
Inserting the logo is done through the CSS file of your skin. When creating a skin, the file style.css was created and included with your skin automatically. If it doesn't exist or if you want to use another file, you need to:
- Go to the "CSS" section of your style.
- Use the form at the bottom of the page to specify the file name (without extension), for example:
logo, and click "Create". - Go to the "Settings" section of your style.
- In the "CSS files" field, add the line with the same name of your file (without the extension) and click "Save".
Go to the CSS section of your skin and click "Edit" on the newly created or existing style file. In the editor that opens, scroll down and add the lines:
.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;
}
You need to change this code to match your file. On the last line, in width: 200px;, change the width from 200px to the width of your main logo file.
Logo on login form
To edit the login form, you need to add the login template to your style. If you haven't already done so, go to the "Templates" section of the style, find login in the list and click "Add".
Click on "Edit" for the login template. In the editor that opens, find the following code:
<div class="login-logo">{title}</div>
Replace it with:
<div class="login-logo"><img src="{tpl:skinimg}/logo-login.png" alt="{site}" /></div>
If you use the same logo on the login page and inside the system, the replacement will look like this:
<div class="login-logo"><img src="{tpl:skinimg}/logo.png" alt="{site}" /></div>
Save the file by clicking the button at the bottom of the editor. The logo will appear on the login page.