• Do not register here on develop.twiki.org, login with your twiki.org account. • Use Item7848 for generic doc work for TWiki-6.1.1. Use Item7851 for doc work on extensions that are not part of a release. More...Close • Anything you create or change in standard webs (Main, TWiki, Sandbox etc) will be automatically reverted on every SVN update. • Does this site look broken?. Use the LitterTray web for test cases.
Item5180: PatternSkin CSS should make textareas and text fields nice by default
In PatternSkin it seems that textareas and textinput fields are only defined with a nice soft look that match the rest of the design if you manually add a style class to everything.
This was not required before. And it should not be required.
Take look at a typical homemade twiki application submit page like 1000s have made them based on existing examples.
The textarea borders are not very nice. They are drawn too sharp.
Compare this with a comment text area we have in the bottom
What I see now that I have upgraded my production TWikis is that default comment templates and text input fields all look very nice. But all my own textareas and test input fields look hard and ugly.
I know I can add some class setting to all areas but I should not have to. It is a pain to upgrade. It is not really very user friendly that you have to know names of style sheet classes to make a simple form. It would be better if the PatternSkin stylesheet made all text areas and text fields look nice.
-- TWiki:Main/KennethLavrsen - 29 Dec 2007
There are limitations. Unfortunately html does not discern a button input from a text field input. Although with javascript styling is possible to add 'automatically'.
What I can do is make the borders soft. That will leave the buttons less discernible though.
-- TWiki:Main.ArthurClemens - 29 Dec 2007
How about something like
I know that [type...]= is not supported by IE6. But hey.
-- TWiki:Main.MichaelDaum - 29 Dec 2007
Well. My users all use IE6 so a solution that does not work with IE6 will not help me much.
I would just soften the borders of the standard textarea and textfields.
It is the sharp borders as they are defined in the default textarea that makes it look sharp and ugly compared to the rest.
I think we are 100% OK if we just soften the border a little so it does not look so sharp and dark.
-- TWiki:Main.KennethLavrsen - 29 Dec 2007
It can't be done. If I use a general color scheme for all input elements, the submit button will look like an input field as well (indented). I could remove the 3d coloring and use a general border color. This is the result:
But usability will suffer. I don't think it is worth it.
-- TWiki:Main.ArthurClemens - 29 Dec 2007
Kenneth, another solution is to use the classes
twikiInputField
twikiTextarea
twikiSelect
twikiButton
twikiSubmit
etc
explicitly in your markup to please IE6.
-- TWiki:Main.MichaelDaum - 30 Dec 2007
Ahm. The original bug report was that the default looks of input fields that people typically make in plain HTML do not look as good as they did in 4.1.2.
I know I can add classes to my HTML. But that is pretty geeky and you have to be pretty into the internals of how TWiki works and how the Pattern skin CSS are done to even know that you can do this.
From a usability point of view that is not a good solution.
Arthur today the buttons and text fields look the same except those that you have made. We already have a usability problem.
Can't just make the upper and left shadow of text boxes a little more grey instead of being almost black? I think that is all it takes. I understand that the issue is that text fields are supposed to look like they are inside and buttons sticking out of the screen. That we can still have by using two shades of grey.
Which CSS is it I have to experiment with to try to improve it? I cannot overview those complex CSS files.
-- TWiki:Main.KennethLavrsen - 31 Dec 2007
today the buttons and text fields look the same - How can they look the same? Don't the buttons have a shadow at the right and bottom?
You can style the input element (and textarea). But input field and input button are the same. So if the input field border becomes lighter, so will the button border.
The colors are set in pub/TWiki/PatternSkin/colors.css. Look for input, line 133.
-- TWiki:Main.ArthurClemens - 31 Dec 2007
I have added this to a user.css
But the border-color:#bbb #f2f2f2 #f2f2f2 #bbb; setting is just ignored. Both in IE and FF. The border colours are 5E5E5E and E5E5E5. I cannot see where those colours are defined.
I do not understand what is going on here. If I put in some other setting like background-color then I can change that to black or green so I have the right element and my user.css is loaded. I need help understanding this.
-- TWiki:Main.KennethLavrsen - 06 Jan 2008
You need to set a border width (in style.css).
-- TWiki:Main.ArthurClemens - 06 Jan 2008
That did the trick
With this
I think the default input fields and textareas look perfect and in perfect allignment with the other Pattern elements.
But I see the issue now that buttons sort of look like text fields.
It is a bit odd that the default colours in both IE and FF makes the inout fields and buttons appear different and the minute you define a style for them they look the same. We can not be the first that have run into that problem.
The textarea can be defined with no problem. It is the input style which seems to change the looks of buttons and text fields because they are both input fields just with the type being text vs submit. I see this is a tricky one to solve.
-- TWiki:Main.KennethLavrsen - 06 Jan 2008
I have seen others go for using a submit input type of "image" and having a graphic framework like imagemagick generate a button runtime.
Another alternative appears to be going for a button submit, as in http://www.digital-web.com/articles/push_my_button/.
Absolutely no knowledge in this area though ...
-- TWiki:Main.SteffenPoulsen - 06 Jan 2008
I went for the button road some time ago. But a form with multiple buttons did not work on IE. Moreover, button is not part of the official HTML spec (or so I learned). It is also not available on all browsers: some mobile browsers do not support it.
You should be able to style the submit button with javascript.
-- TWiki:Main.ArthurClemens - 06 Jan 2008
Thanks Steffen.
There are plenty of known ways to control how a button looks like. We already have that by using the existing pattern style classes.
This bug item only relates to getting the default non styled simple forms that people define either as comment plugin templates or input data pages in their twiki applications where only plain html is used. It was my hope that it was possible to define a nicer looking default for this by making the borders lighter. But the issue is that the minute you define a lighter border style for the input field both text inputs and submit inputs get the exact same look. Ie. they both get a darker upper and left border so both input fields with text and submit buttons look the same.
If at the end of the day there is no solution to this and we have to choose between looking nice and usability then we'd better stick to usability and leave things as they are.
-- TWiki:Main.KennethLavrsen - 06 Jan 2008
To clarify Steffen: we use input for buttons, not button.
-- TWiki:Main.ArthurClemens - 06 Jan 2008
I have been reading in a book about CSS about this and this exact probleb is described. Book is "The CSS Anthology - 101 Essential tips, tricks" & Hacks by Rachel Andrew issued on SitePoint. In section six and especially figure 6.4 she shows this exact problem and her statement is that you have to add classes to the input elements. So I No Action this. Usability is better than some lighter borders at the expense that you cannot see the difference between fields and buttons.
-- TWiki:Main.KennethLavrsen - 06 Jan 2008
Happy to stir up waters - I agree it is best to leave this no action.
Just for reference there is a mini-example of on-the-fly imagemagick button generation at http://www.stonehenge.com/merlyn/LinuxMag/col33.html.
-- TWiki:Main.SteffenPoulsen - 06 Jan 2008