CSS

Overview

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"

App CSS specificity

In order to override the default theme.css styling your application level classes will often need to use 'body'

body .wmeditor-caption {
	font-weight: normal;
	color: #294473;
}

This often eliminates the need for !important

Examples

CSS Multi-Skin

HOWTO: Multi-skin and advanced css styling

Dynamic style changes

Javascript and CSS Examples - Flex, Layout, Dynamic CSS

Styles Explorer

CSS Example by Lenny
Running Application

Exports

Tabs
- tabsFB.zip
- TabsCNN.zip
Accoridans
- accLightGrey.zip
- accLightBlue.zip

Changing default characteristics of an object

Most app wide changes can be made using CSS on the app level.

Margin, padding and border

Since WM 5.0, margin, padding and border are properties of the widget class and can not be set. They are written into the widgets file. However, if you have not set the properties and are using defaults, there is no property written as the defined default is used. That provides an opportunity to redefine the class default using dojo.extend. Example: set default margin to 15 dojo.extend(wm.Button, {margin: 15});

This extend needs to be placed such that it eval'd before the widgets are created. The best place to do this is outside of the page definitions, example for main.js below.

If you have a login page, you will need this on both login.js and main.js (or whatever your home page is), presuming you want all buttons to get the margin. Any top level page will require this. Contained pages should be ok, especially if using the new load parent first property on page containers.

//begin main.js
dojo.extend(wm.Button, {margin: 15});

dojo.declare("Main", wm.Page, {
  start: function() {

//rest of Main.js follows

Tool Tips

Form post (see bottom)

Styling Divs

You can also provide styling directly for a particular property, such as a caption. This is especially valuable for styling the layer heading in an accordian widget. For example, to set a caption to have a font-size of 20px, set the value for the caption property to:

<div style="font-size:20px">Foo</div>

Getting Started with CSS

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.

PreWM61 Styles

WM619 introduced new styles. Pre61 Styles can easily be used. See preWM61Styles

Importing CSS

You can apply complex css in WaveMaker by cutting and pasting the css you want to use into the Source->Markup sub-tab. Next, drop a content widget onto a page and select the content property drop-down. In this drop-down you will see tags for all the divs you defined in your markup. Apply the div you want to the content widget.

How do I import my CSS definitions into WaveMaker?

Related Wiki pages

Third Party Resources - CSS

CSS

Top Menu

CSS

Overview

CSS in Wavemaker

App CSS specificity

Examples

CSS Multi-Skin

Dynamic style changes

Styles Explorer

Exports

Changing default characteristics of an object

Margin, padding and border

Tool Tips

Styling Divs

Getting Started with CSS

PreWM61 Styles

Importing CSS

Related Wiki pages

Related Documentation

Related Forum posts

Tabs

DataGrid

LayoutBox

Alignment

More Forum posts

Search

Main Menu