Use Custom Site Logos
To make your Evolve Sites match your own corporate branding, you can change the default Evolve logos.
You can change the logos at a global level, so affecting the top-level Evolve Site which you see if you have Dynamic Sites, as well as the logos used on individual Sites you publish.
In addition, you can override the global setting on an individual Site basis to create custom logos for one or many of your Sites.
On the top-level Evolve Site, the logo is displayed on the login dialog and then in the top-left of the Site. A second, smaller logo is displayed in the top-left for smaller screen sizes, such as mobile devices.
On your own Sites, the logo is only displayed in the top-left of each page, with a smaller version when the site is viewed on a mobile device.
Create new logos
To replace either the global logos or create custom logos for your own Sites, you have to create two new images. These images must have the following details:
|
| ||||||||||||
There are different processes for changing the global logos and adding custom logos to an individual Site.
What do you want to do?
Change the global Evolve Site logos
To replace the logo on the top-level Site:
-
On the Evolve server machine, in Windows Explorer, navigate to:
<your-evolve-install-path>\Site\bin\webDesigner\images\logos
-
Replace logo.png and logo-m.png with your new images.
|
|
Next time you Publish one of your Sites, the logos will be changed. You may need to delete your browser cache in order to see the change reflected. Alternatively, if you do not want to wait until you Publish one of your Sites, you can copy the logo.png and logo-m.png files to the following location which will cause them to be changed immediately: |
|---|
<your-evolve-install-path>\Data\Common\images\logos
Use a custom logo on an individual Site
To use a custom logo on an individual Site:
-
On the Evolve server machine, in Windows Explorer, navigate to:
<your-evolve-install-path>\Site\bin\webDesigner\custom
-
If you do not already use a custom folder for your Site, create one here and name it as you wish
If you already use custom content with your Site, open the folder you already use
-
In your custom folder, create an 'images' folder, then create a 'logos' folder within it
You should now have the following structure:
<your-custom-directory>\images\logos
-
Copy your custom logo.png and logo-m.png files to the 'logos' folder
-
Create a CSS file named 'main.css' and place it in
<your-custom-directory>\css
|
|
If you already have a main.css file, do not create a new one, instead add the code detailed in the next step |
|---|
-
Copy the following code and paste it directly into main.css
/* Change the logo on evolve site */
.logo
{
background: transparent url('../images/logos/logo.png') center no-repeat;
}
/* Change the logo on the login page */
#cw-authentication-zone .cw-authentication-top
{
background: transparent url('../images/logos/logo.png') center no-repeat;
}
/* Change the logo for smartphone and tablet devices */
@media screen and (min-width: 240px) and (max-width: 1023px){
.logo
{
background: transparent url('../images/logos/logo-m.png') center no-repeat;
}
}
-
Open your Site in Evolve Designer
-
On the Deployments > [server name] > [model] node, choose your new custom folder in the Deploy Custom Site drop-down
-
Save and Publish the site by using the Dynamic Site or Static Site button on the Home menu.
If instead you use the Save & Deploy Site function, you must click Theme & Pictures first.