How do I change the background color on the Menu Bar? How do I make tabs black instead of blue? How do I change the height of the Floating Pane's title bar? ...

All these questions relate to customizing dojo's CSS. Even images, for the most part, are specified in CSS files, and thus you can change them simply by changing the CSS for the widget in question.

Look At The Widget's Template and CSS template

The first thing to do is to understand the DOM structure of the widget. In general you can do this by looking at the widget's template.

Let's say that you want to modify how the Floating Pane's looks. You would look at HtmlFloatingPane.html, which looks like this:

<div id="${this.widgetId}" dojoAttachEvent="onMouseDown" class="dojoFloatingPane">

	<div dojoAttachPoint="titleBar" class="dojoFloatingPaneTitleBar"  style="display:none">

	  	<img dojoAttachPoint="titleBarIcon"  class="dojoFloatingPaneTitleBarIcon">

		<div dojoAttachPoint="closeAction" dojoAttachEvent="onClick:closeWindow"

   	  		class="dojoFloatingPaneCloseIcon"></div>

		<div dojoAttachPoint="restoreAction" dojoAttachEvent="onClick:restoreWindow"

   	  		class="dojoFloatingPaneRestoreIcon"></div>

		<div dojoAttachPoint="maximizeAction" dojoAttachEvent="onClick:maximizeWindow"

   	  		class="dojoFloatingPaneMaximizeIcon"></div>

		<div dojoAttachPoint="minimizeAction" dojoAttachEvent="onClick:minimizeWindow"

   	  		class="dojoFloatingPaneMinimizeIcon"></div>

	  	<div dojoAttachPoint="titleBarText" class="dojoFloatingPaneTitleText">${this.title}</div>

	</div>



	<div id="${this.widgetId}_container" dojoAttachPoint="containerNode" class="dojoFloatingPaneClient"></div>



	<div dojoAttachPoint="resizeBar" class="dojoFloatingPaneResizebar" style="display:none"></div>

</div>

Notice all the class attributes...

Next, you should look at the CSS template file: src/widget/templates/HtmlFloatingPane.css - in there you will find the styles used by default. It has rules to match each of the class attributes, such as:

.dojoFloatingPaneTitleText {

	float: left;

	padding: 2px 4px 2px 2px;

	white-space: nowrap;

	color: CaptionText;

	font: small-caption;

}

Customizing CSS Globally

Let's say you want to modify the font of the title pane. Rather than modifying the dojo source code, you can override the rule above by simply specifying a stronger selector in your global stylesheet:

body .dojoFloatingPaneTitleText {

	color: blue;

	font: 20pt;

}

What about icons? Say you wanted to modify the icons used for close/open/modify, and also put the on the left rather than the right?

That too is CSS. You could modify it like this:

body .dojoFloatingPaneMinimizeIcon,

body .dojoFloatingPaneMaximizeIcon,

body .dojoFloatingPaneRestoreIcon,

body .dojoFloatingPaneCloseIcon {

	float: left;

}

body .dojoFloatingPaneMinimizeIcon {

	background-image: url(/icons/myMinimize.gif);

}

body .dojoFloatingPaneMaximizeIcon {

	background-image: url(/icons/myMaximize.gif);

}

body .dojoFloatingPaneRestoreIcon {

	background-image: url(/icons/myPaneRestore.gif);

}

.dojoFloatingPaneCloseIcon {

	background-image: url(icons/myPaneClose.gif);

}

Local CSS Customizations

This section is possibly out-of-date and needs rewriting.

But what if you want to modify only a single floating pane? Make the title bar red, where all the other panes have a blue title bar. In this case, there are a few options:



1) use id

Some widgets copy the id to the output element. Here's an example of how to make tab labels align to the right rather than to the left:

<style type="text/css">

# myTabExample .dojoTabPaneTab {

float : right;

}

<div id="myTabExample" dojoType="TabContainer">

<div dojoType="ContentPane" label="Tab 1" style="display: none">

<div dojoType="ContentPane" label="Tab 2" style="display: none">

</div>

2) specify class name

Some widgets, such as RemoteTabController, let you specify a class name upon widget creation. That makes it easy to specify alternate css:

<div dojoType="RemoteTabController" labelClass="dojoRemoteTab2">

With that extra attribute, the DOM node that's normally marked as dojoRemoteTab will be marked as class dojoRemoteTab2.

3) templateCssPath

Specify an alternate CSS file

<div dojoType="FloatingPane" templateCssPath="foo/bar.css">

It's unclear if this works or not; it might modify all the Floating Pane widgets. It is also deprecated in 0.3.1.