CSS
The default wavemaker css styles and the numeric definitions for the colors in the style properties can be found in: WaveMaker\lib\wm\base\styles\wavemaker.css DO NOT edit the wavemaker.css file. This will affect both Studio AND your project. Instead use the CSS tab in Source to specify your own CSS classes to override the default theme or use the common.css file in the common folder (next to projects), e.g. \my documents\wavemaker\common.
In this document we hope to provide insightful resources beyond the product documentation to help you achieve your goal styling your application.
CSS is the most widely used language to style the web and Wavemaker brings it at your disposal so you are able to be up to date with the latest trend. Prior we go right into the Wavemaker way of it, let's have a few basics clear about CSS's power.
To get through the basics we recommend that you walk through the tutorial created by the w3schools which will get you rolling in no time. If you have already done so or feel comfortable with your css skills move on.
http://www.w3schools.com/css/css_intro.asp
CSS in Wavemaker
Wavemaker provides visual aids to get you rolling without putting in a line of code and more advance options as well for the most demanding user.. Most of the components built in the app provide a "styles" panel with predefined attributes that you can easily click and adjust as desired being able to tell the changes immediately as they happen in the canvas.
The Custom dialog allow to put your own CSS rules,
but if your customizations keeps growing or you would like to add a complete file, you are better using the convinience that the "CSS" tab provides for this matter, which is accesible under
"Source > CSS"
Tips
Something that will get you up and running with your CSS is practice. For this extend, we highly recommend that you add the firebug extension to your internet browser. Firebug will empower you to study the code that is rendered by your browser and also allow to use useful tools to do so. Next, we have added some useful links to get started:
http://getfirebug.com/layout.html
http://www.evotech.net/blog/2007/06/introduction-to-firebug/#fb_css
Through out the wiki are plenty of examples that you could either visit the links to the live application or download the code to your computer for you to explore.
Examples
HOWTO: Multi-skin and advanced css styling
How do I import my CSS definitions into WaveMaker?
How do I customize the look of tabs?
The default wavemaker css styles and the numeric definitions for the colors in the style properties can be found in: WaveMaker\lib\wm\base\styles\wavemaker.css DO NOT edit the wavemaker.css file. This will affect both Studio AND your project. Instead use the CSS tab in Source to specify your own CSS classes to override the default theme or use the common.css file in the common folder (next to projects), e.g. \my documents\wavemaker\common.
In this document we hope to provide insightful resources beyond the product documentation to help you achieve your goal styling your application.
CSS is the most widely used language to style the web and Wavemaker brings it at your disposal so you are able to be up to date with the latest trend. Prior we go right into the Wavemaker way of it, let's have a few basics clear about CSS's power.
To get through the basics we recommend that you walk through the tutorial created by the w3schools which will get you rolling in no time. If you have already done so or feel comfortable with your css skills move on.
http://www.w3schools.com/css/css_intro.asp
CSS in Wavemaker
Wavemaker provides visual aids to get you rolling without putting in a line of code and more advance options as well for the most demanding user.. Most of the components built in the app provide a "styles" panel with predefined attributes that you can easily click and adjust as desired being able to tell the changes immediately as they happen in the canvas.
The Custom dialog allow to put your own CSS rules,
but if your customizations keeps growing or you would like to add a complete file, you are better using the convinience that the "CSS" tab provides for this matter, which is accesible under
"Source > CSS"
Tips
Something that will get you up and running with your CSS is practice. For this extend, we highly recommend that you add the firebug extension to your internet browser. Firebug will empower you to study the code that is rendered by your browser and also allow to use useful tools to do so. Next, we have added some useful links to get started:
http://getfirebug.com/layout.html
http://www.evotech.net/blog/2007/06/introduction-to-firebug/#fb_css
Through out the wiki are plenty of examples that you could either visit the links to the live application or download the code to your computer for you to explore.
Examples
HOWTO: Multi-skin and advanced css styling
How do I import my CSS definitions into WaveMaker?
How do I customize the look of tabs?
Version 9.1 last modified by Lenny Ramirez on 01/01/2009 at 07:42
Comments: 0