As it is essential that users do not edit the WebMaker webapp css, javascript and image files, this FAQ discusses suggested approaches to either override styles, images, etc. or to use "cloned" versions.
This will ensure that styling details are not lost when upgrading to new versions of WebMaker.
Best Practice Look & Feel Work
Users should create "project.css" specific CSS files when they want their own specific styling overrides. This file can be created by going to the Application Map screen and opening up the Advanced options. In this secition add a new entry of "css/project.css". The filename can be whatever the user requires if "project" is not a desirable name. The user can then go to the "Field Details" panel for a page, and the CSS file will be available at the top of the screen for viewing or editing.
The "project" CSS files can also have classes defined that already exist in the demo.css, which will override style details found in the demo.css. The user can define the identical class names as found in the demo.css, but change styling elements that they would like to take precedent.
Note: In some situations it may be necessary to add !important just before the semi-colon e.g. Padding 0px !important;
This approach allows users to override simple aspects such colours, fonts, images, etc.
If there is radical redesign work required then the users should setup their own CSS file, and use that rather than the demo.css file.
The same approach described above for CSS files, can also be adopted for Javascript and image files.
This will ensure that styling details are not lost when upgrading to new versions of WebMaker.
Best Practice Look & Feel Work
Users should create "project.css" specific CSS files when they want their own specific styling overrides. This file can be created by going to the Application Map screen and opening up the Advanced options. In this secition add a new entry of "css/project.css". The filename can be whatever the user requires if "project" is not a desirable name. The user can then go to the "Field Details" panel for a page, and the CSS file will be available at the top of the screen for viewing or editing.
The "project" CSS files can also have classes defined that already exist in the demo.css, which will override style details found in the demo.css. The user can define the identical class names as found in the demo.css, but change styling elements that they would like to take precedent.
Note: In some situations it may be necessary to add !important just before the semi-colon e.g. Padding 0px !important;
This approach allows users to override simple aspects such colours, fonts, images, etc.
If there is radical redesign work required then the users should setup their own CSS file, and use that rather than the demo.css file.
The same approach described above for CSS files, can also be adopted for Javascript and image files.