Chat now with support
Chat with Support

erwin Evolve 2020.1.1 - User Guide

erwin_Evolve_User_Guide
erwin_Evolve_User_Guide
Getting Started Creating Sites and Pages Data Layout Options Filtering Data Property Groups Data Visualizations Displaying Diagrams Using Web Modeler Automatic Diagrams (Diagram Designer) Navigating your Site Workflow Explained Social Interaction Features Questionnaires Reference Configuration and Administration Customizing Your Site Troubleshooting Upgrading

Use Custom Site Logos

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

          2. 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:

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

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

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

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

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

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

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

    }

}

          7. Open your Site in Evolve Designer

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

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

 

Use Custom Site Images on the Multi-Sites Page

Use Custom Site Images on the Multi-Sites Page

If you publish Dynamic Sites, you can use the top-level Multi-Sites page which lists all the Model Sites you have access to.

By default, these Sites are shown with an Evolve logo, but you can change it to an image of your choice.

To use your own custom image for a Site on the Multi-Sites page:

          1. Create a new PNG image file

          Ideally the dimensions should be 200 x 130 pixels, however if the image is larger, it will be scaled down automatically in the page

          2. Name the image file with the same name as the Site URL Name used for your Site

          You can find this value on the Deployments > [server-name] > [model] node in Evolve Designer

          For example: m48yxeuv.png

          3. Place the image at the following location on your Evolve web server machine

          <evolve-install-path>\Data\Common\images\sites

          Usually <evolve-install-path> is: C:\Casewise\Evolve\

          4. Publish your Site, ensuring you choose the Theme & Pictures option if you do not do a full Dynamic Site generation.

You may need to clear your browser cache in order to see the new image immediately.

 

Use Custom Icons for Pages

Use Custom Icons for Pages

When you create an Index Page or a Create Object Page in your Site, you can choose an image for that page which is used as an icon in the menu.

While Evolve ships with a set of default images for this purpose, you can also use your own icons if you wish.

Any custom images you add are available to be used on any Site you create in Evolve.

Custom icons must be .png files and the recommended size is 128px x 128px.

The easiest way to create a custom image is to copy and edit an existing one. This ensures it is the correct size and format and will fit neatly into your Evolve Site.

To use a custom icon:

          1. In Windows Explorer, navigate to <your-evolve-install-path>\Site\bin\webDesigner\images\views\sources\custom
                    NB: If the custom folder does not exist, you can create a folder of this name in the sources folder

          2. Create a copy of one of the existing images from the path \Site\bin\webDesigner\images\views\sources\CW
                    into the custom folder. Then rename the file - e.g. mytest.png

          3. Open the image in an image editing application to change it

          If you want to use color transformation with the image, you must make sure the parts you want to change are kept in black, and you should keep the circle and only edit the middle of the graphic

          4. Save the image.

          Your icon will now be available in the Custom Image field on your pages.

 

Style Development

Style Development

Style information should always be contained in a file separate to the functioning code. In Evolve this can be produced in one of two ways.

Each new visualization / layout should have its own stylesheet with the filename the same as it’s matching JavaScript file, this file should be placed in the same folder as the JavaScript file.

CSS

Language: CSS

File Extension: .css

Reference: www.w3schools.com/css/

CSS is the most common format for producing stylesheets in web development, this method requires no building of the code but does not give you access to the global style variables that are available through Evolve.

For more information on CSS development see the reference linked above.

LESS

Language: LESS

File Extension: .less

Reference: lesscss.org

Tools: winless.org/

LESS lets you to be more flexible with the styles you write and allows the use of methods & variables (amongst other things) when developing a style file. This LESS file is then compiled to a CSS output.

Through less you can gain access to global theme variables by adding the following to the top of your style file. See LESS: Global Variables for a full list of variables available.

@import "../variables";

LESS files are automatically compiled by Evolve when they are placed in the correct location and ‘Apply Themes’ is run through Evolve Designer. To compile LESS files outside of Evolve and learn more about LESS and its development take a look at the tools and references above.

Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating