setup-config.php CSS issues

[SergeyBiryukov]

See the screenshots.

[SergeyBiryukov]

Related: #18180

[ocean90]

Related: #16112

[dd32]

That code styling is annoying, I'm all for dropping it. Out of curiosity, What browser is ignoring the CSS for the textarea? The CSS width declaration should override the cols attribute.

[ramiy]

And chenge the password text from "... and MYSQL password." -> "Your MYSQL password."

[SergeyBiryukov]

Replying to dd32:

Out of curiosity, What browser is ignoring the CSS for the textarea? The CSS width declaration should override the cols attribute.

I've checked in Firefox 7, Chrome 13, Opera 11, IE 8, and they all display the same.

Currently there's no width set for textarea:
​http://core.trac.wordpress.org/browser/trunk/wp-admin/css/install.dev.css#L108

JJJ's patch in #16112 adds it, so this ticket is partially a duplicate of that one (though the screenshots here make the issue more obvious).

Replying to ramiy:

And chenge the password text from "... and MYSQL password." -> "Your MYSQL password."

Not sure about that change, current string seems fine to me.

[dd32]

I've checked in Firefox 7, Chrome 13, Opera 11, IE 8, and they all display the same.

Hm, Strange, Oddly enough 98 columns is a perfect width for Opera 12 (Alpha's) and I've never noticed that before.. I'd rather add a CSS width here instead of a column width just for that reason, it'll be a bit inconsistent between browsers/platforms/fonts loaded otherwise.

Not sure about that change, current string seems fine to me.

To someone who's first language isn't English, it might not read completely right, but translated versions translate it differently. The string in English is fine to me, It's a laid back "This is a quick 5 minute install, 'oh and we need this detail too...'" type of string, which works well.

[ocean90]

+1 for CSS width like #16112.

Sergey can you change your patch, then you can close #16112 as a dup.

String change should be a new ticket. But I think the string is fine too. When there is problem you can translated it as Your MYSQL password..

[SergeyBiryukov]

Replying to dd32:

I'd rather add a CSS width here instead of a column width

Done in 18576.2.patch​. I left out white-space: pre and overflow: scroll from JJJ's patch, since they only add inactive horizontal scrollbar in all of the four browsers I've tested this in.

As for <code>, it came to my attention that large font was probably meant for the final screen with username and password (see two more screenshots).

I've added 18576.3.patch​ in case we still want current font size there.

[chexee]

I took a look at this and wrote a patch that:
1) modifies some of the style to better match the current UI
2) makes it more mobile/responsive friendly
3) Modified the code style.

Specifically, here's everything the patch does:

• Changes 11px border-radius to 3px
• Adds more vendor prefixes for CSS3 attributes
• On error pages, updated old Lucida font stack to sans-serif and updated link styles to match core.
• removed the #f3f3f3 background color on table rows, so the styles match our form styles better.
• Added a "Privacy" label next to the "Allow my website to appear in search engines" checkbox for better alignment and flow to the form.
• Added a "install-success" class to the form and styled that screen to show the password larger.
• Removed the <code> from the username an the final screen. Its not a filename or a password.
• Changed "MySQL password" to "your MySQL password."
• Removed explicit width and added max-width:700px to body.
• Changes default font-size from 12px to 14px. These pages are short and should be read quickly.

Aaand screenshots:

All the affected screens: ​http://cl.ly/3v1u3b0O2z3o2i1O1Z3J

5-minute install responsive: ​http://cl.ly/0R0I0m1r3n0x3V0Z1w1R

Database info responsive: ​http://cl.ly/081F0Z2h1J05192s3P2M

[ramiy]

looks good.

[SergeyBiryukov]

Related: #18866 (has a patch for the "no configuration file exists" screen)

[azaozz]

In [19297]:

Fix styling for the installation screens, props chexee, fixes #18576

[azaozz]

Replying to chexee:

Looks real good. Just one thing: we've removed most vendor prefixes for border-radius in core. FF doesn't need them any more and khtml is.. no more. The only one still needed is the -webkit for some mobile versions.

[nacin]

[19297] added <p> tags into a translated string, when wp_die() already echoed <p> tags. This caused unnecessary nesting (and broke the string for translators). See #20511.