Custom styling of input widgets (text, checkbox, radio button, etc)
Would it be possible to add the ability to customize the design of some of the Input widgets (text input, checkbox, radio button, listbox, etc)?
Text Input:
Often, it's helpful to show rounded corners and a subtle inset-shadow effect for a standard input field, but today the only way to do it is to set a transparent Text Input Widget on top of a Rectangle Widget (with rounded corners).
Checkbox and Radio Button:
Could we define, at the Prototype level, a series of images that would govern checkboxes and radio buttons? (would need active, on, off, hover, disabled states...) It would be great if they could be sized dynamically as well. Currently, we have to create several different images with lots of hide/show logic to customize check boxes and radio buttons, and need to repeat the logic separately for each radio list and check list that we create (very time-consuming when mocking up long application processes).
Select List, Multi-select, List box:
Just like the Text input, could we add rounded corners and more styling, and also a custom dropdown carrat image (or scrollbar)?
This is a great tool - just a few suggestions for efficiency. Thanks!
Right now, you can customize many properties of Input Text Fields, but unfortunately you cannot customize or change the size of checkboxes or radio buttons.
Right now, you can customize many properties of Input Text Fields, but unfortunately you cannot customize or change the size of checkboxes or radio buttons.
This option has been included in version 5.6
This option has been included in version 5.6
where can I find the documentation on how to do this?
where can I find the documentation on how to do this?
its great that its included, but where can I find the documentation to do it?
its great that its included, but where can I find the documentation to do it?
Sorry... this has not been implemented.
You can add a background image for example to a "Custom Select List", but you cannot change it's appearance...
Sorry... this has not been implemented.
You can add a background image for example to a "Custom Select List", but you cannot change it's appearance...
Right now you can change these properties:
Background: background color, background image and transparency
Text: font family, modifier, size, color, horizontal alignment and vertical alignment
Padding: top, left right and bottom
Border: color, type, size for the 4 sides and also rounded corners
Shadow: box shadow and text shadow
Right now you can change these properties:
Background: background color, background image and transparency
Text: font family, modifier, size, color, horizontal alignment and vertical alignment
Padding: top, left right and bottom
Border: color, type, size for the 4 sides and also rounded corners
Shadow: box shadow and text shadow
Indeed... but you cannot change the appearance of the the radio and checkbox buttons.
The "Custom Select List" arrow is always the same. And the drop down list as well as any "Radio Button" appearances are OS/Browser dependent.
You can change some properties. But to make (for example) the radio button look like this:
https://dribbble.com/shots/460526-VM-...
or like this:
https://dribbble.com/shots/329422-Cle...
Is just not possible. It always look like the OS/Browser Radio Button...
As the original commenter wrote, he wished to have a picture (done in Illustrator, Photoshot, etc) as the appearance of a button. This does not work for checkbox and radio button.
Hopes this clarifies... ;-)
Indeed... but you cannot change the appearance of the the radio and checkbox buttons.
The "Custom Select List" arrow is always the same. And the drop down list as well as any "Radio Button" appearances are OS/Browser dependent.
You can change some properties. But to make (for example) the radio button look like this:
https://dribbble.com/shots/460526-VM-...
or like this:
https://dribbble.com/shots/329422-Cle...
Is just not possible. It always look like the OS/Browser Radio Button...
As the original commenter wrote, he wished to have a picture (done in Illustrator, Photoshot, etc) as the appearance of a button. This does not work for checkbox and radio button.
Hopes this clarifies... ;-)
Oh, now I get it, thanks for clarifying it. There's a trick that might work in these cases. You can use a dynamic panel to 'cut' the section of the dropdown that has the arrow icon and place another icon below the drop down. Take a look at this prototype http://d2ld3he4yll0xl.cloudfront.net/...
Oh, now I get it, thanks for clarifying it. There's a trick that might work in these cases. You can use a dynamic panel to 'cut' the section of the dropdown that has the arrow icon and place another icon below the drop down. Take a look at this prototype http://d2ld3he4yll0xl.cloudfront.net/...
Hi,
Question 1: I`m trying to make my own flat ui widgets from the libraries we have available. Problem is with selects. In framework I would like to create for my project, I need selects to be green and text to be white. Everything cool, I managed to change select without problem but when I try (in simulation) change the value, the box with values is always white so white text is not visible unless highlited on mouseover. Will there be (or is) possibility to change dropdown`s values box? Lets say dropdown green/white, and values box grey/dark grey.
EDIT: Problem solved.
Another question: Do you plan to make more libraries for flat designs like FLAT UI for that instance?
Thanks
Hi,
Question 1: I`m trying to make my own flat ui widgets from the libraries we have available. Problem is with selects. In framework I would like to create for my project, I need selects to be green and text to be white. Everything cool, I managed to change select without problem but when I try (in simulation) change the value, the box with values is always white so white text is not visible unless highlited on mouseover. Will there be (or is) possibility to change dropdown`s values box? Lets say dropdown green/white, and values box grey/dark grey.
EDIT: Problem solved.
Another question: Do you plan to make more libraries for flat designs like FLAT UI for that instance?
Thanks
I agree. I want to be able to change the appearance of text fields and other widgets. I wanted to have input fields with inset shadow effect but couldn't so I had to resort to creating images to put as backgrounds of the fields. This is a rather tedious process as you also have to create other images for effects like hover and focus etc. if you want your fields to be dynamic and look like what you've designed.
I agree. I want to be able to change the appearance of text fields and other widgets. I wanted to have input fields with inset shadow effect but couldn't so I had to resort to creating images to put as backgrounds of the fields. This is a rather tedious process as you also have to create other images for effects like hover and focus etc. if you want your fields to be dynamic and look like what you've designed.
I agree too. Its really cumbersome, especially if you want to use checkboxes for conditions. You cant do that comfortably if you make your own checkboxes.
I agree too. Its really cumbersome, especially if you want to use checkboxes for conditions. You cant do that comfortably if you make your own checkboxes.
Right now, you can customize many properties of Input Text Fields, but unfortunately you cannot customize or change the size of checkboxes or radio buttons.
Right now, you can customize many properties of Input Text Fields, but unfortunately you cannot customize or change the size of checkboxes or radio buttons.
I hope so too that checkboxes and radio buttons would be customizable in the future in JIM. I've been struggling for two days trying to find a workaround for this problem but could not find any.
The internet is full of different UI platforms and thus it's not good enough that in JIM we cannot mimic those popular styles.
I hope you work hard to offer us a solution for this in the near future.
I hope so too that checkboxes and radio buttons would be customizable in the future in JIM. I've been struggling for two days trying to find a workaround for this problem but could not find any.
The internet is full of different UI platforms and thus it's not good enough that in JIM we cannot mimic those popular styles.
I hope you work hard to offer us a solution for this in the near future.
I'd like to know if I can customize the input text field to be "text wrap" so that the text that a user inputs displays like a short paragraph rather than one long sentence. Thanks!
I'd like to know if I can customize the input text field to be "text wrap" so that the text that a user inputs displays like a short paragraph rather than one long sentence. Thanks!
Replies have been locked on this page!