Chat now with support
Chat with Support

erwin Evolve 2020.2.1.1 - User Guide

erwin Evolve 2020.2.1 User Help Guide
erwin Evolve 2020.2.1 User Help Guide
erwin Evolve 2020.2.1 User Help 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 Evolve Suite Addendum

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.

Advanced Customization

Advanced Customization

Advanced Customization Guide

Evolve
Advanced Customization Guide

Welcome to the CW Evolve Advanced Customization Guide.

Who is this guide for?

This guide is for CW consultants or advanced users of Evolve - those interested in extending the basic capabilities of Evolve by creating custom layouts or visualizations, or changing the appearance of Evolve Sites.

What do you want to do?

Getting Started

To prepare for customizing Evolve, see Get Ready For Development.

Layouts

To create custom layouts, see Creating Custom Layouts.

Visualizations

To create custom visualizations see Custom Visualizations.

CSS & JavaScript

To create custom CSS or JavaScript see Custom CSS & JavaScript.

Styles

To learn about style development, see Style Development.

Custom CSS & JavaScript

Custom CSS & JavaScript

Evolve allows you to extend its functionality and styles by creating your own CSS classes and JavaScript methods which can be used within the layouts and behaviors you create.

Creating a Custom File

Location: \webDesignerStatics\webDesigner\custom\{yourFolder}

          1. Create a folder in the location above

          2. Place the CSS and / or JavaScript files of the following files inside (See the CSS or JavaScript sections below)

          3. Open Evolve Designer for the site you’re making the changes to

          4. Expand down to the model node in the left hand tree

          5. On the right hand side Select {yourFolder} name from the list of ‘Deploy Custom Site’

          6. From the ‘Advanced’ tab select the ‘Save & Deploy Site’ button

          7. Hard refresh your browser by pressing Ctrl + F5 to pick up your changes

CSS

Language: CSS

File Extension: .css

Location: \webDesignerStatics\webDesigner\custom\{yourFolder}\css

Reference: www.w3schools.com/css/

The CSS file created should be named main.css, this file is added to the Evolve style list after the standard Evolve styles, so will overwrite any existing classes of the same name. This allows you to tweak any UI styling to suit your specific needs by simply adding a class with the same name to the main.css file.

JavaScript

Language: JavaScript

File Extension: .js

Location: \webDesignerStatics\webDesigner\custom\{yourFolder}\js

Reference: www.w3schools.com/js/

The JavaScript file created should be named main.js, any custom JavaScript you wish to be made available within Evolve should be added to this file, which will be included when Evolve is run.

Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating