Ticket #1365 (assigned enhancement)

Opened 13 years ago

Last modified 9 years ago

Form elements have hardcoded CSS properties

Reported by: jmorliaguet Owned by: jmorliaguet
Priority: P2 Milestone: CPS 3.4.10
Component: CPSSkins Version: unspecified
Severity: normal Keywords: customization cps4dsg
Cc:

Description

The new default CPSDefault theme introduces visual changes on form elements (input, buttons). They have a bigger padding, the background color of buttons is white. Currently the changes are hardcoded in CSS.

It makes it difficult for web designers to customize themes since the style information is located in two different places (CSS, CPSSkins form styles)

The style of form elements could be managed via CPSSkins and stored in themes. There are only a few properties to add.

Change History

comment:1 Changed 13 years ago by jmorliaguet

  • Status changed from new to assigned
  • Summary changed from Form elements to Form elements have hardcoded CSS properties

comment:2 Changed 13 years ago by tsoulcie

  • Keywords cps4dsg added
  • 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 ?

comment:3 Changed 13 years ago by tsoulcie

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

comment:4 Changed 13 years ago by jmorliaguet

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

comment:5 Changed 13 years ago by jmorliaguet

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" />

comment:6 Changed 13 years ago by tsoulcie

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

comment:7 Changed 13 years ago by jmorliaguet

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

comment:8 Changed 13 years ago by jmorliaguet

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)

comment:9 Changed 13 years ago by jmorliaguet

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.

comment:10 Changed 13 years ago by jmorliaguet

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

comment:11 Changed 13 years ago by sfermigier

  • Milestone changed from CPS 3.4.1 to CPS 3.4.3

comment:12 Changed 9 years ago by gracinet

  • Milestone changed from CPS 3.5.0 to CPS 3.4.10

The default theme system in trunk is CPSDesignerThemes now

Note: See TracTickets for help on using tickets.