Further style Bartik's contact form

Looks good to me!

contact form -- http://img.skitch.com/20100422-r8qf5xjnees57ng96kda1xfde7.png

@ #1, you need to add categories to trigger the display of the select list, for cross browser testing.

Here's a screenshot of the form with a select in the following browsers

Safari -- http://img.skitch.com/20100423-ma7sm3gcdbadi6xk36a21hj79u.png

Firefox -- http://img.skitch.com/20100423-fs7axu6cp7wpxkm43fgg6ydegs.png

Unfortunately my virtualbox needs help and I can't do IE right now. Let me know if there's anything else, this is my first experience doing the issue queue. :-P

Below is a screen-shot of the patch I did, along with the patch. I had to note each field directly, as just changing general classes didn't change only the text portion of the fields. It feels like it needs more love. Thoughts?

Max OSX Snow Leopard - Firefox 3.6.3, Safari 4.0.5

Screenshot of Contact Form - http://img.skitch.com/20100520-rjubccnfqnsbx6djwi35ehq2nh.pdf

Looks pretty good, sarah_p, I like the subtle rounded corners. Just a few comments though. Is making all the forms wider the approach we should take here? I personally think think gives the form a more 'daunting' appearance. Also I did find one small bug, the right border of the drop down category box gets cut off when selected. See screenshot attached.

I made the width smaller by 20%, and added 2px of padding to make it space a little more from the text. Making the width smaller fixed the drop-down issue. Here is a screen-shot of it in Mac 10.6 - Firefox 3.6.3. and a patch with the changes.

http://img.skitch.com/20100520-87knxppqga8ykp8ib8rt4tcqb4.png

I like the size of this more. But I am still getting the problems with the border being cut off in Ff 3.6 (Vista), although, this bug is not present in IE6-8, Chrome, or Safari.

Since it doesn't really break the flow of the page to just leave the width off the drop-down selector, for simplicty's sake I just removed the width entirely. It's still showing the rounded corners and padding nicely.

If this still has problems let me know, although I can't recreate the issue as I'm still working on connecting my localhost to my virtualbox. So more details (id, line #) would be good.

Mac 10.6 - Firefox 3.6.3

http://img.skitch.com/20100521-k5y9eihrhg2w3utg3ynm33rctq.png

Sorry if my last comment wasn't very clear. This patch looks good, no issue with the border being cut off with the drop down category box.

edit: Tested in Ff, Chrome, Safari, and IE6-8.

Thanks for reviewing this and for your suggestions! Your last comment was fine, I just don't have a way of testing Bartik in windows right now. :-P

Rerolled this for HEAD, although based on my cursory look, I will be changing this anyway to match the new comment styling. If you have something specific in mind to include with the contact form let me know.

Updated the patch to match the styling and code of the comment styles. I didn't float the labels to be inline with the form for clarity when reading, and because without comments above it, the extra width and justified alignment didn't look right to me, but I would be willing re-roll this with floats if necessary.

firefox on OSX Snow Leopard

screenshot -- http://img.skitch.com/20100724-kcyqj1wghcj6fidrcpiwfxd8t5.png

Rerolled with square corners on the message box.

Let's try that again.

Third time's the charm

This themes the site-wide contact form - shouldn't these styles also apply to the user contact form (#contact-personal-form)?

Rerolled patch to include #contact-personal-form

+++ themes/bartik/css/styleNew.css	2010-08-01 07:27:28.095288312 -0400
@@ -1038,7 +1038,40 @@ fieldset .description {
+#contact-site-form #edit-name, #contact-personal-form #edit-name {

Each selector should be on a new line - applies to all the instances where selectors have been placed on the same line.

Powered by Dreditor.

Rerolled patch from #27 to add a line for each selector.

+++ themes/bartik/css/style.css	2010-08-01 11:14:32.555286091 -0400
@@ -1038,7 +1038,67 @@ fieldset .description {
+#contact-site-form #edit-name {
+  width: 75%;
+  -khtml-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+#contact-personal-form #edit-name {
+  width: 75%;
+  -khtml-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}

Why duplicate the styles like this when we can group them (like the previous patch)? We should always group multiple selectors, just not stick them all on the same line - please see http://drupal.org/node/302199

+++ themes/bartik/css/style.css	2010-08-01 11:14:32.555286091 -0400
@@ -1038,7 +1038,67 @@ fieldset .description {
+#contact-site-form .form-item-mail label {
+}

Empty selectors?

Powered by Dreditor.

Rerolled to adhere to the CSS standards.

+++ themes/bartik/css/styleNew.css	2010-08-01 15:17:21.675285627 -0400
@@ -1038,7 +1038,39 @@ fieldset .description {
+  border-radius: 4px;
+  width: 75%;
+  -khtml-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;

Sorry, I realize this looks right according to the alphabetical CSS standard proposal, but for various other reasons the border-radius property must come after the browser extensions, e.g.

  -khtml-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;

You're doing a great job btw - thanks for all the patches, nearly there!

Powered by Dreditor.

Rerolled to put border-radius below the browser specifics. And thanks, just having fun contributing back.

There's a tiny discrepancy between the width of the text area and the grippie - I think if the textarea is 76.3% it should work.

Rerolled previous patch to fix the grippie discrepancy.

Rerolled to fix the previous fail.

Looks like the CSS reordering from #33 didn't make it into #37.

Also OMM the textarea is one pixel narrower than the inputs, not sure how much we care about that. It's possible to make them match by using 76.4% for #edit-message and 76.1% for the grippie, but the alignment goes away when the view is zoomed. So, maybe too fragile to be this picky about.

Can we get an update screenshot of this, in a couple of browsers, looks like its very close to RTBC.

Here ya go, sitewide and personal contact forms in IE7, IE8, Firefox, and Safari. I couldn't get the personal contact form to show for anonymous regardless of permissions, so those are from a logged-in state. The sitewide screenshots are from anon.

@ markabur - Nice eye on catching the CSS ordering. And thanks a ton for those screenshots!
@ Jeff Burnz - Let me know if you want to address any of the issues marakbur brought up and I can reroll.

Otherwise, rerolled to fix CSS ordering.

And I missed the #edit-message width increase. Rerolled to include.

OK, so now I'm going to suggest one more thing - and first I'd like to say sorry this has been such an epic patch to develop! But...

@ Jeff Burnz - comment #19 suggested we not round the corners, but either way, I rerolled to reflect rounded corners. So a patch is available for either way we decide to go.

Got a little overzealous with that patch. Rerolled to properly style grippie and text area the way the screenshot indicates.

Not really regarding #19 - I think Jen was concerned the rounded corners would be only on the textarea and not the grippie (rounded textarea but square grippie - which would look weird).

Hey I spotted an issue in IE7, rerolled with a quick fix, if we can confirm this OK in IE7 its good to go!

@Jeff Burnz - looks OK to me in IE7 and according to the last comment, that was all we were lacking, so marking Reviewed & Tested.

I want to briefly postpone this and see what happens here: #925954: Add class to contact forms to make theming easier

Did a quick re-roll to incorporate the changes in #925954: Add class to contact forms to make theming easier for when/if it gets committed.
Will remark postponed after the test bot rolls through.

#925954: Add class to contact forms to make theming easier was marked RTBC and the above patch covers that. It just needs a quick review and is identical to the one above that was marked RTBC except swapping out the new selectors.

back to #46, sun bumped the class request off to D8 which is probably right.

#49: bartik-contact-form-styling.patch queued for re-testing.

Given the simplicity and the absolute benign nature of #925954: Add class to contact forms to make theming easier and the fact that it creates a more elagent solution for this issues (not to mention all other d7 themes in core and contrib) I dont see any reason why it can't be included & reviewed as part of this patch.

This is a straight re-roll of #49 with the patch from #925954: Add class to contact forms to make theming easier included.

Well, at least one of these is ready. #53 seems fine, or if the class addition really is a no-no for d7 then #46 should still be good.

Based on #54 .... just need Webchick/Dries to decide which patch is RTBC {cough} #53 {/cough} :)

Since that patch is adding a class, and not changing the existing markup, I think it is ok. I guess I'll find out if someone re-opens this with nasty words. :P Still learning my way around beta land.

Committed #53 to HEAD. Thanks!