The "success" class is ugly on form validations #456

Closed
arjan opened this Issue Nov 13, 2012 · 9 comments

4 participants

@arjan
Zotonic member

Ugly green

The green color stands out and I don't think it is very common to have form fields like this change when everything is OK.

What do we do about it?
I'd say, let's not add the success class every time a validator succeeds.

cc @mworrell @kaos

@arjan arjan was assigned Nov 13, 2012
@mmzeeman
Zotonic member
@kaos
Zotonic member

why not change the css?
I'm just thinking of a possible future where we might want a class added on validator success...

@arjan
Zotonic member

I'm trying but it's not easy, as the success class is buried deep inside bootstrap.
I'm tempted to change the class name just to get rid of the green...

@mworrell
Zotonic member

I am all for not too many configurations, so better to have something easy that works on most of the cases well.

I like the word "success", and in a way it is good that it is already part of Bootstrap. That it is ugly is a Bootstrap problem, as is the problem with customization and later updates.

Other Bootstrap plugins (like jQuery form validation) also use the same error and success classes. That makes me lean more to adapting the Bootstrap definition than to change the class name being used.

Is there an easy way to generate the css from the .less file without installing Node and the kitchen sink?

@kaos
Zotonic member

OK, I've got this nudge for a while now (think last time it was Marc fiddling with modifying the bootstrap.css rules)...

I added this to a css file (tested it on a blog site, added last to the project.css file and tested it on the contact form):

.control-group.success,
.control-group.success > label,
.control-group.success input,
.control-group.success textarea {
  color: #333 !important;
  border-color: #ccc !important;
}

And voila, no green (after leaving the form field, at least). It's not complete, and the drawback is that the colors has to be specified in yet another spot, but it's rather doable compared to editing the bootstrap.css file. :)

Noticed a bug where the css class wasn't removed for the control-group around the message field upon entry... hmm.

Note: it doesn't matter which order the css files are given, which is rather nice, I think.

@arjan
Zotonic member

rather ugly CSS hack (!important is considered harmful..) but if it works...

I'll test it and see if indeed all the green is gone. If so I'll commit it to the admin css

@arjan
Zotonic member

I think bootstrap css modification is needed. I'll create a zotonic/bootstrap repo and will push the changes to a zotonic-admin branch there.

@kaos
Zotonic member

Hmm... seems I didn't need the !important after all... but then the order does matter. You need to have the "override" rules defined after the ones to be overridden. That is, the last defined will be used.

Baha, just closed... :p

@arjan arjan closed this in 3a1b203 Nov 19, 2012
@kaos
Zotonic member

+1 for the added flexibility though :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment