The road less taken
On how to alter a jMaki widget
I've been playing with jMaki recently. Now that I've become more familiar how to write simple applications, I want to be more ambitious and see if I can alter an existing widget to suit my style.
If you are working with Ajax widgets, you would know that each of the widgets has a style sheet associated with it.
In an earlier blog, I talked about creating an application with a menubar. The glue code for this already exists that make life simpler. But this blog is not about glue code, it's about altering the existing widget.
The things I am interested in altering in my jMaki.menu application are:
- I want the font of the menubar to change
- I want to remove the scrollbar that appears on the right side page when a menu item is clicked
How can I do this? I need to learn a little bit of CSS. Don't believe me? Here's CSS in Action.
CSS stands for Cascading Style Sheets and is used to control the style and layout of multiple Web pages all at once. Since each widget has a css file associated with it, if we alter the css, it should immediately show up in the widget. With that clear in mind, lets try to alter the font of the menu options.
Look under your webapplication's web->resources-> this has a set of widgets available to the webapplication. Now since we're working with the menu application, we need to go to jmaki->menu directory.
Here we should see the following: component.css, component.html, and component.js.
Open component.css because this is where we need to make the changes.
-
To alter the font of the menu options to arial, we add the font-family: arial; property-value pair to the .jmakiMenuBar Selector. We can even add comments to css as below!
.jmakiMenuBar { width: 100%; font-size:12px; /* change font to arial */ font-family: arial; height: 20px; background:#3399FF; text-align:bottom; } - To remove the auto overflow scrollbar that appears if your element list is too long, we need to edit the jmaki->dContainer's component.css, simply remove the overflow property-value pair. Here is what the final css code looks like-
.jmakiDContainer { }
Want to make more changes? CSS-on....
Posted at 03:48PM May 21, 2007 by Manveen Kaur in Sun | Comments[0]