White Beauty validation formatting error

Tagged: , , ,

Author Posts

Kivharo January 15, 2014 at 6:44 am

Heads up! this post was created when Microthemer was at version 2. The current version is 7. Some references to the interface may be out of date.

Hey there, I installed both Microloader and Microthemer lite to try resolve the issue I am having.
When I add the White Beauty theme to my contact form, all the formatting looks good and accurate when the form is loaded. However whenever there are errors with validating input in the fields. The theme incurs some formatting issues.
In the “required” fields, the validation overlay doesn’t stay clean and inline with the original fields rather it hangs oddly off the input field. It also does not respond to mouseover to allow for the user to correct the error.

I really would love to hear back about the issue I’m having, as I would love to get this theme running on my form.
I am currently using:
WP 3.8
Contact form 7 3.6
Microthemer Lite 2.5.7 (and I’ve tried Microloader 2.4.5)
And the theme White Beauty 1.1

Lastly here’s an image to illustrate the issue I’m having:

View post on imgur.com

Sebastian January 15, 2014 at 12:14 pm

Hi Kivharo,

I think I’ll need to look at the form in action in order to troubleshoot this. Would you be able to provide me with a to your website?

Cheers,

Sebastian

Kivharo January 15, 2014 at 1:10 pm

Not a problem at all.

http://www.caspdev.com

Sebastian January 15, 2014 at 4:34 pm

Hey,

Microthemer Lite will limit the number of selectors you can edit and unfortunately the selector you want to edit ( Form Field Error Highlight (if Ajax) ) will be off bounds. However, you can use Microthemer’s custom CSS area as a workaround. Click the spanner and hammer icon in the visual view and then the curly braces icon {}. Then paste the following code:

body span.wpcf7-not-valid-tip {
left: 34% !important;
right: 0% !important;
top: 0% !important;
width: 65% !important;
}

Play around with the percentage values until it looks neater.

I’m not sure why the mouse over doesn’t vanquish the red error overlays. Does this functionality work OK when you’re not using the white beauty skin?

Cheers,

Seb

Kivharo January 16, 2014 at 1:44 am

I’ve tried a couple of other of the x beauty themes, and they all have the same issue with the mouse over.
Obviously when I don’t run a theme I don’t have this issue since my contact forms displays a text only validation error.

It’s a strange problem hence why I’m here. Thanks for your help.

Sebastian January 16, 2014 at 11:15 am

Ah, I forgot that the overlays weren’t there at all with the default contact form 7 styling. The author must have tweaked the javascript controlling the error messages a bit, resulting in the current mouseover problem.

I’ll work on a CSS solution and get back to you soon.

Cheers,

Seb

Sebastian January 20, 2014 at 1:31 pm

Hey,

I’ve released a new version of CF7 white beauty that fixes the problem you identified. You can download it here: https://themeover.com/cf7-white-beauty/

The problems affects all contact form 7 skins so I will release updates for each skin at some point today.

Thanks for reporting this bug.

Sebastian

You must login or register to reply to this topic.