You are probably missing the Theme CSS file. Dijit is themed entirely in CSS using unique class names located in the templates themselves.
To use a Dijit theme, you must import the themename.css file. The Dijit default theme is Tundra,
and the CSS lives in toolkit_root/dijit/themes/tundra/tundra.css. Import that file using a LINK tag or style tag with an @import call:
<link rel="stylesheet" href="js/dijit/themes/tundra/tundra.css" />
<!-- OR -->
<style type="text/css">
@import "js/dijit/themes/tundra/tundra.css";
/* your custom styles here */
</style>
In order for the theme to take effect, you need to utilize the cascading nature of CSS. All the rules in tundra.css are prefixed with a ".tundra" selector to prevent them from affecting other rules. You will need a class="tundra" on a parent node for the rules to apply.
The most common "parent node" is the markup parent, or <body> tag. Placing the class="tundra" on the body element applies the tundra theme to all widgets in the page.
<html>
<head>
<link rel="stylesheet" href="js/dijit/themes/tundra/tundra.css" />
<script src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.TitlePane");
dojo.addOnLoad(function(){
new dijit.TitlePane({ title: "My First Widget" },"box");
});
</script>
</head>
<body class="tundra">
<div id="box">I am TitlePane
</div>
</body>
Some widgets require the theme-class to be set on the body tag, as they append themselves there to be able to position freely. These widgets include: dijit.Dialog, dijit.TooltipDialog, dijit.Tooltip, dojox.layout.FloatingPane, among others.
