• Do not register here on develop.twiki.org, login with your twiki.org account.
• Use View topic Item7848 for generic doc work for TWiki-6.1.1. Use View topic 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

Item Form Data

AppliesTo: Component: Priority: CurrentState: WaitingFor: TargetRelease ReleasedIn
Extension PatternSkin Normal No Action Required   minor  

Edit Form Data

Summary:
Reported By:
Codebase:
Applies To:
Component:
Priority:
Current State:
Waiting For:
Target Release:
Released In:
 

Detail

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.

Topic name: BugReport2019x08x21x021023
Title Short Title
Description:
Verbatim Text:
Note: Be descriptive; the SupportGuidelines tell you what to include. You can expand on it in the next screen if necessary
Motion version: Example: %MOTIONVERSION%
ffmpeg version: Example: 0.4.8 or 0.4.9pre1
Libraries installed: curl, xmlrpc, ffmpeg, mysql, postgresql
Server OS: Fedora Core 2, kernel 2.6.8
Submitted By Use the prefix Main. in front of your TWiki name.
  Note: Question is submitted after you Create and Save the following page

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

.patternContent input[type=text]:active,
.patternContent input[type=password]:active,
.patternContent input[type=file]:active,
.patternContent input[type=text]:focus,
.patternContent input[type=password]:focus,
.patternContent input[type=file]:focus,
.patternContent textarea:active,
.patternContent textarea:focus {
   background-color:#ffffe0;
}
.patternContent input[type=text],
.patternContent input[type=password],
.patternContent input[type=file],
.patternContent textarea {
  border-color:#BBBBBB rgb(242, 242, 242) rgb(242, 242, 242) rgb(187, 187, 187);
}

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:

styled.png

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

textarea,
input,
select {
   border-color:#bbb #f2f2f2 #f2f2f2 #bbb;
}

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 smile

With this

textarea,
input,
select {
    border-color:#bbb #f2f2f2 #f2f2f2 #bbb;
    border-width:2px;
    border-style:solid;
}

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 smile - 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

ItemTemplate
Summary PatternSkin CSS should make textareas and text fields nice by default
ReportedBy TWiki:Main.KennethLavrsen
Codebase 4.2.0, ~twiki4
SVN Range TWiki-4.3.0, Tue, 18 Dec 2007, build 16029
AppliesTo Extension
Component PatternSkin
Priority Normal
CurrentState No Action Required
WaitingFor

Checkins

TargetRelease minor
ReleasedIn

Topic attachments
I Attachment History Action Size Date Who Comment
PNGpng styled.png r1 manage 19.3 K 2007-12-29 - 19:02 ArthurClemens  
Edit | Attach | Watch | Print version | History: r17 < r16 < r15 < r14 < r13 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r17 - 2008-01-06 - SteffenPoulsen
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback