October 4, 2012
5ml gives you ample options to fiddle with the appearance of the widgets you drop on your project page. Dimensions, placement, colors, typefaces, borders, shadows, gradients, backgrounds, most of it is already there, available through menus and sliders and simple point and click interfaces.
There are, however, occasions where you would like to style specific things in a very detailed manner, and delve deep into advanced CSS tricks. For those of you who live by the code, or simply want greater control of how your page is styled, we are including a CSS editor in the upcoming 2.3 release.
Targeting the widgets on the page will be as straight forward as using the id of the widget (but without spaces):
Then all you’ll have to do is open the CSS editor from the “OPEN” menu (exactly as you would do with pages and your script), and write your styling code:
Notice the use of “!important” in the CSS code. Styling elements through the editor always takes precedence over custom CSS. As the rectangle widget has a default grey background color when dropped on the stage, we used “!important” to force this style rule upon the rectangle background color.
Switching back to the page, the style change is instantaneously in the editor. The rectangle’s background color is now red, despite the fact that the property is set to grey in the editor.
If you want to alter the style of multiple widgets at once, you will be able to set class names for each and every widget. Switch to the Advanced properties pane, and enter the class name (or multiple class names) you want for that particular widget.
Now let’s have some fun with the styles…
And here is the end result!
The CSS editor is one of many enhancements and improvements for the 5ml tool. Stay tuned as we’ll be revealing more goodies slated for the 2.3 release, and also a glimpse into what 5ml will do for you in the future.