Sunday, June 1, 2008

Changing the Appearance of a Widget

When you are adding a dynamic widget javascript to a web environment you may have the opportunity to use what is called an "inline style" in order to customize the appearance of the widget. For example, in Desire2Learn, if you want to control the width of your widget, the only way to do that effectively is with inline styling. So, in response to a friend's question about how to control the width of her widget in Desire2Learn, here is a simple way to do that.

Let's assume you have already created the widget and inserted your javascript. For example, here is a simple script that displays a Hindu God of the week:

Yet when this script is run, you can see that it has no width controls itself and simply expands to fill the available space:

What I can do, however, is use "div" tags in order to force the content to be center-aligned, and I can also control the width, and add a border and padding. Here is how that can work:

Here is the result you will see:

Being able to use "div" tags to do some inline styling can come in very handy when you are working in a web environment, like Desire2Learn, where you do not have full control over how the page is formatted. For more information about inline styling, just Google "Css inline style" and you will find all kinds of great resources online!

Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.