Form elements have hardcoded CSS properties

* in Area Color Style : Remove text color and put in Font Color Style

* in Font Shape Style :

• SMALL
• A, a:pseudo : background and border (for border-style)

* in Box Corners Style : border (for border-style)

* in Box Shape Style : margin for H1

* For the Forms you certainly know that the hardcoded changes have been made in cpsskins_common-css2.css, default.css and Stylesheetproperties (which is annoying with properties such as standaloneButtonBackgroundHover). So I guess Form Style should have tabs such as Form/Elements/Tools where Tools are the specific buttons of folder_contents defined in Stylesheetproperties. In Elements we should get : input, button, text field, textarea and for each : padding, margin, border, font, color and background. Do you think it is fair ?

I would also need to get to .documentFields from document.css in Form Style I would also need to get to .group from default.css in Form Style

quoting from mail: """

ceux-là sont hyper-spécifiques à CPS3 il vaudrait mieux dans ce cas utiliser des tags standards (par ex: <legend> ou <fieldset>)

http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.10 :

The FIELDSET <http://www.w3.org/TR/REC-html40/interact/forms.html#edef-FIELDSET> element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.

The LEGEND <http://www.w3.org/TR/REC-html40/interact/forms.html#edef-LEGEND> element allows authors to assign a caption to a FIELDSET <http://www.w3.org/TR/REC-html40/interact/forms.html#edef-FIELDSET>. The legend improves accessibility when the FIELDSET <http://www.w3.org/TR/REC-html40/interact/forms.html#edef-FIELDSET> is rendered non-visually.

/JM """

tsoulcie: "In Elements we should get : input, button, text field, textarea and for each : padding, margin, border, font, color and background. Do you think it is fair ?"

yes, I'm starting to add them tomorrow (Friday 10)

the specific buttons of folder_contents should be managed in default.css however. As far as I know they are only variations from the default buttons, so the basic style can be defined in CPSSkins and the arrow icons found in the background can be placed in the theme's icon folder, so that users can at least change the icon.

However I agree that it's not a perfect solution, but form styles will at least be much easier to customize.

Stylesheetproperties (e.g. standaloneButtonBackgroundHover) should really go away IMO (the property value might just as well be written directly in css). It takes a lot of energy to figure out which property to modify to get the right results, and it adds yet another indirection.

note that elements can also combine css classes such as:

<input class="standalone important" />

instead of:

<input class="standaloneImportant" />

* in FontShape? Style (General) : letter-spacing and line-height.

font shape: added "small", link, a:pseudo border width & style in [32845]

font color style: added border color and background color for <a> and a:pseudo in [32848]

note that the text color is set in Area Color to respect the contrast with the area's background color (some combinations such as white text against white background would not work)

concerning form elements, the inputBorder specified in default.css can be defined in cpsskins already (Element_border_color, Element_border_style. Element_border_width) which applies to textarea, input, and select (look under the "Element" tab)

what is missing is the element's padding (which I'm adding now)

textarea {

border: <dtml-var inputBorder>; padding: 0.1em;

} input {

border: <dtml-var inputBorder>; margin-bottom: 1px; /* IE bug fix */ padding: 0.1em;

} select {

font: <dtml-var inputFont>; border: <dtml-var inputBorder>; vertical-align: top;

}

same thing about font and font color (FormStyle? has an 'Element_font_color' for elements) the background color can be defined in CPSSkins already (Element_bg_color) and the font style can be set in FontShape?.

textarea {

color: <dtml-var mainFontColor>; background-color: white; font: <dtml-var inputFont>;

} input {

font: <dtml-var inputFont>; color: <dtml-var mainFontColor>; background-color: white; vertical-align: middle;

}

so basically these properties be removed already, try and remove them and see what happens.

I'm adding a tab called "buttons" to make it possible to change the style of buttons (border style, border color, border width, bg color, padding, bg image, bg image hover).

buttons should use the <button> tag (not <input> otherwise it won't work) but this is already the case I think in CPS.

PS: note that default.css has lots of properties that are already overriden in CPSSkins.

form buttons: added padding, border style, width, color, bg color, bg color hover, bg image, bg image hover [32854]