views:

153

answers:

2

I'm getting my feet wet with Google's Closure Library. I've created a simple page with a Select Widget, but it clearly needs some styling (element looks like plain text, and in the example below the menu items pop up beneath the button).

I'm assuming the library supports styles -- how can I hook into them? Each example page in SVN seems to use its own CSS.

Abbreviated example follows:

<body>

<div id="inputContainer"></div>

<script src="closure-library-read-only/closure/goog/base.js"></script>
<script>
    goog.require('goog.dom');
    goog.require('goog.ui.Button');
    goog.require('goog.ui.MenuItem');
    goog.require('goog.ui.Select');
</script>
<script>
    var inputDiv = goog.dom.$("inputContainer");

    var testSelect = new goog.ui.Select("Test selector");
    testSelect.addItem(new goog.ui.MenuItem("1"));
    testSelect.addItem(new goog.ui.MenuItem("2"));
    testSelect.addItem(new goog.ui.MenuItem("3"));
    var submitButton = new goog.ui.Button("Go");

testSelect.render(inputDiv);
submitButton.render(inputDiv);
</script>

</body>
+1  A: 

I just use incantations like (for your case):

<link rel="stylesheet" href="closure-library/closure/goog/demos/css/menubutton.css"> 

There doesn't seem to be a better way, although I haven't found any explanation behind having the styles in demos/ dir...

Nickolay
+1  A: 

Closure adds a series of CSS classes to the HTML nodes and the library provides several CSS to give components a style.

I suggest you go through the source of the demos and find out the css ids and classes. Or figure out the id's / classes using Firebug (for firefox) or IE Developer Tools (for Internet Explorer 7/8) and then style them using your own CSS.