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