New Widget Styles

[iobridge]

We have created a platform for new widget styles that works over different browser types both old and new. We will continue build upon it to create new styles for our widgets.

Thanks to ioBridge user "zerogx", we release the first new widget on the platform. It's a variation of the variable position servo widget. You now have the choice of an input box or a slider. You can flip back and forth as needed.

Give them a try and if you all have any more suggestions on new widgets, let us know.

Thanks!

[zero*gx]

oh... thanks for the shoutout!

[iobridge]

We have implemented the first version of being able to customize the widgets via CSS.

The first go around allows you to change any of the standard I/O monitor widgets. Anything you can control via CSS you can control on the wdiget output - underlines, cursurs, backgrounds, font size, etc.

All you have to do is create a widget and select "Plain Text" as the style. If you already have a monitor widget, you can just select "Plain Text" as the style. The other option is "Default Text" which is the default ioBridge "green theme".

"Plain Text" just gives you the text inside of a span element.

There are two classes you can add anywhere in the page or a CSS attachment. One for the default / load up state and one for the Mouse Over state.

The id's are as follows:

ioData_(widgetID)
ioData_(widgetID)_over

Replace (widgetID) with the widgetID of the widget you want to stylize.

Here is an example of the styles you can add to your page:

Code: [Select]

<style type="text/css">
             
    .ioData_xGTjqVMJvp {
   
        background-color: blue;
        font-size: 100px;   
       
    }
   
    .ioData_xGTjqVMJvp_over {
       
        background-color: green;
        font-size: 100px;     
    }
     
</style>

Code: [Select]

<script type="text/javascript">document.write(unescape("%3Cscript src='" + "http://www.iobridge.com/widgets/io.js?XGTjqVMJvp' type='text/javascript'%3E%3C/script%3E"));</script>

[iobridge]

Added some more detail to the Wiki:

http://www.iobridge.net/wiki/widgets#customizing-widgets-with-css

[zero*gx]

Awesome! I noticed the meter widget type... that is AWESOME! Exactly what i have had in mind.