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
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.
Using Custom Images
Using Custom Images
To use custom images in Evolve:
1. Go to Site/bin/webDesigner/custom (if it doesn’t exist, create it)
2. Create a folder inside there with the name of your customization
3. Inside the customization folder create a folder named 'images'
4. Inside 'images' you must add the new image files in the same position and the same name as the file you want to replace in Content/images
If you want to replace Content/images/logos/logo.png you must name your file logo.png and put it in Site/bin/webDesigner/custom/images/logo/logo.png
5. Run Evolve Designer and select the Model Deployment Node
6. In the drop down next to Deploy Custom Site select the name you set in step 1
7. You must run Themes & Pictures then Save & Deploy for changes to take effect.