Home of:

5ml, Developer Resources

Do It With Style

0
Sotiris Frontend Developer | 5ml
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.

 

 

Leave a Reply

 

See What People
Are Saying

tmobile-logo

“T-Mobile was able to delight customers with a fun game that could work across virtually any phone, with Velti making it possible. Velti was great to work with & their commitment to the success of the program was excellent.” - Chad Hodge, T-Mobile USA

Pic Stitch_logo

“The thing I love about Mobclix is its simplicity--sign up & you have instant access to over 35 ad networks. Not only that, but I’ve already seen a 400% increase in revenue from March, and 12M impressions a week!” - Alex Keim, Creator of Pic Stitch, Big Blue Clip  

Halfbrick

"Mobclix greatly helps manage & control the quality of our ads, and as a result, our Fruit Ninja app made over $400,000 in April 2012 alone off of ad-network sales." - Jared Oats, Advertising Manager, Halfbrick

tinyco

“TinyCo is thrilled to be working with the Velti Exchange—we’ve seen great results from the campaigns we’ve run so far and are excited about the future of our relationship!” - Growth & User Acquisition Team, Tinyco

mtc_logo_n

“We strongly believe that mobile marketing and advertising is here and we have already taken the first successful steps in partnering with Velti in this new era for the mobile industry.” - MTC Russia

mbcgroup

“Velti has shown consistent respect for policies and procedures, in addition to designing and implementing the campaigns. We look forward to continuing this fruitful cooperation in the future.” - MBC Group

Follow us

 

Who is Velti?

Subscribe to Newsletter