CSS

CSS

Last modified by superadmin on 2014/07/02 11:25

CSS



Themes

Themes enable you to manage the overall look and feel of a project and save it for use with other applications. The easiest way to style an app is to copy a WM theme and customize it.
Themes are new to WM6.2. Documentation for Themes is in the documentation.

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

firebug01.png

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

stylesPredefined.png

The Custom dialog allow to put your own CSS rules,

stylesClasses.png

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"

markup.png

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


How CSS works in WM

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.

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

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

See also:
Themes.css and Styles


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>

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


Related Documentation

Designing Pages In WaveMaker

Commonly Used Utilities

Working with Widgets


Related Forum posts

Tabs

How do I customize the look of tabs?

DataGrid

Hide DataGrid column headers
CSS on the Data Grid
Grid display issues
Remove Grid scrollbars

LayoutBox

Set Background Image

Alignment

How to right-align numeric input editors

More Forum posts

Label link style in the main Page

Styling globally

Strange behaviour of background color

VerticalAlign does not play nice with content sized by percent

Is there a way to add pictures alongside caption text?

Button animation

WM4: "this._page.root is undefined" error

changing styles in javascript

Print button for a dialog Page

Drop down Menu

Divs on two Panels

Manipulate CSS on WM is really dangerous for our application

Dojo Tooltip in CSS

Two CSS tips to take into account

Tags:
Created by Ed Callahan on 2008/09/18 15:44

2012-2014 WaveMaker Inc. All Rights Reserved.
Share/Bookmark