[PLUGIN]FlatUi Button + 7 Theme + 50 Icons ** Update V1.4 **

If you like the PLUGIN , a little help is always welcome! Donate

Download Link : https://www.dropbox.com/sh/efq61n3whboblce/AADXSpVjyeBjKLkAEXB0KdSza?dl=0

Other HMMG Plugins : https://www.dropbox.com/sh/eyld20nrw3ersuy/AABNz84T_KdQGoYjHFsj2Y-8a?dl=0

Hey guys , i had many times a probleme to find Button's design or exactly Theme , so i decied to create a little plugin that Have multiple FlatUi Theme A -> G

Functionality

It works as a normal Button (The Standart one of Scirra) but I just added a function to change the Button Design that is loaded from a .css external File , i used the FlatUi Jquery Mobile css file https://github.com/ququplay/jquery-mobile-flat-ui-theme

How to Use and Preview

in Propreties :

Theme : Select your Theme From A to G or set it To Default (The Standard Webbrowser Button's Theme) "Icons wont work with the Default Theme"

Icon:Select you Icon of 50 Icons or set it to none if you don't want Icon in the Button

Icon Position : Set Your Icon's position , Default is Left "If there is no text in the Icon please set it to Without Text"

Just choose your Theme in the Theme Proprite as in the Image below

http://img11.hostingpics.net/pics/499711testFlatUi.png

and here is the Preview

http://img11.hostingpics.net/pics/771843previewFlatui.png

List of Icons :

http://demos.jquerymobile.com/1.4.5/icons/

How to install :

Copy/Paste the Folder in the zip file to your plugin's directory

Close and re-open Construct 2 if it's opened

Update

***************** V1.1 *****************

Added : 50 Icons Added : Icons Position Changed : the button balise changed -> Input to Button

***************** V1.2 *****************

Bug Fix

***************** V1.3 *****************

Added : Round Corners Yes/No "Set if the button Corners are rounded or not"

***************** V1.4 *****************

Added : Condition IsEnabled Return true when the Button is Enabled

Added : Condition IsVisible Return true when the Button is Visible

Added : Propriete "Text Align" Left|Center|Right This one was added For kmsravindra

Added : Propriete "CSS" Write some CSS , Use it to add padding to your button

Important !!!!!!!!!!!!!!

Again If there is no text in the Button please select *Without Text* in Icon Position

If you like the PLUGIN , a little help is always welcome! Donate

hope it's gonna be usefull for others

If any one have a probleme with the PLUGIN email me "hsmouadh@gmail.com" , i will reply at max 5 - 6 hours

thanks,

You are welcome (y)

Thanks for sharing!

Just awesome! Thank you very much <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

If you want you can place this plugin on our website here: http://shatter-box.com/downloads/category/construct-2/

Let me know if you are interessted <img src="{SMILIES_PATH}/icon_e_wink.gif" alt=";)" title="Wink">

AndreasR

You can share it , No probleme , but it must be free

All

A real big bug , was fixed try the new version

Plugin is nice. I am having some trouble setting the text of the buttons in events.

Not sure why. It only uses the text set in the property.

As buttons they work great.

hmott

Send me a screenshot on "hsmouadh@gmail.com" , will try to help you

—, This looks good...Is there anyway we can customize the icon size as well? Also, I think it will be great if the text placement can be controlled too..The button text is centered and usually overlaps with the icon at the right...This is requiring the button size to be unusually large especially when the text is like two words or so and leaving lot of free space towards the left of the button...

kmsravindra

Yea sure , will add those functions by this night ,i am in the university now :p

All

Please update the plugin to the last Version

kmsravindra

I added a propertie "Text Align" You can set it to *** Left|Center|Right ***

and i added propertie "CSS" you can add padding to your button , because , when you align the text button right , the text will be so close to the right border , for this exemple just write "padding-right:5px;" in CSS propertie , it will add a 5 pixels space between your text and the right border , same thing for other directions

"padding-right:5px;"

"padding-left:5px;"

"padding-top:5px;"

"padding-bottom:5px;"

hope it's ok now , and let me know if you want some other changes

—, Thanks a lot for these changes. I hope the icon size can also be changed? Let me try them and will let you know.

kmsravindra

Nop icon's height and width are static , they are related to the icon size , but i am trying to add a an Action to add custom Icons to the buttons , but it's gonna be a challenge