Tchater maintenant avec le support
Tchattez avec un ingénieur du support

erwin Evolve 2023.1.0 - General

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:

Image 1

Name

logo.png

Dimensions

146 x 30 px

Image 2

Name

logo-m.png

Dimensions

112 x 30 px

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:

  1. On the Evolve server machine, in Windows Explorer, navigate to:

<your-evolve-install-path>\Site\bin\webDesigner\images\logos

  1. Replace logo.png and logo-m.png with your new images.

Icon

Description automatically generated

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:

  1. On the Evolve server machine, in Windows Explorer, navigate to:

<your-evolve-install-path>\Site\bin\webDesigner\custom

  1. 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

  1. 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

  1. Copy your custom logo.png and logo-m.png files to the 'logos' folder

  2. Create a CSS file named 'main.css' and place it in

<your-custom-directory>\css

Icon

Description automatically generated

If you already have a main.css file, do not create a new one, instead add the code detailed in the next step

  1. 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;

    }

}

  1. Open your Site in Evolve Designer

  2. On the Deployments > [server name] > [model] node, choose your new custom folder in the Deploy Custom Site drop-down

  3. 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.

Documents connexes

The document was helpful.

Sélectionner une évaluation

I easily found the information I needed.

Sélectionner une évaluation