Can't use the Color Customizer all of a sudden

[fiznatty]

In the last 24 hours, when I pull up the color customizer, all of the content inside the “preview” screen begins flashing.  The text, menu, title and more appear and disappear non-stop, and I cannot use any of the functions in the left menu.

I’ve attached a screen shot to show what’s happening.

Firefox 20.0 on Mac OS 10.6.8

Any solutions?  This is happening on both my desktop and laptop.

[Cosmin – SUPPORT]

Hi,

Have you any active plugins?

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[fiznatty]

The only installed plugin additional to those included with the theme was WP Super Cache, but it doesn’t appear to be a plugin conflict.  I noticed that the trouble happens in Firefox and Safari (and not IE10, interestingly) whenever “tabs” element is added anywhere on the page.  It’s almost like the Colorizer is having trouble loading the content, but is totally fine once the tabs are removed.

Thanks for your help!

[Cosmin – SUPPORT]

I’ll shoot Ed a note on this, seems like there’s a Javascript conflict with the tabs and the Customizer.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[Swift Ideas – Ed]

Thanks for pointing this out. I’m able to replicate but am unsure of a fix yet. Just finished up with v1.2 and about to send that off, so will add this to the list for v1.3.

Thanks again,

– Ed

[fiznatty]

Incidentally, I notice that links in the tabs boxes are stripped of their styling: the linked text works, but it does not appear blue/underlined like the rest of the links throughout the site.

Is this related, and more importantly, can it be resolved somehow?  It’s problematic if users cannot see that a link is in front of them.

[Swift Ideas – Ed]

Thanks for pointing that out, it’s the jQuery UI styling overwriting it. I’ve just added it to the fix list for the update. If you want to change it now, you can use the following css to Flexform Options > General Options > Custom CSS:

.ui-widget-content a {
color: #333;
}
.ui-widget-content a:hover {
color: #222;
}

– Ed

[fiznatty]

A couple problems we ran into with this solution:

We had to use “!important” in the code, otherwise the changes didn’t work.  Also, this change caused the tab title text color to turn blue as well, so we had to add “p” to the code to specify that the color change should only occur in the text below.

End result, which is working at the moment:

.ui-widget-content p a {
color: #1E73BE !important;
}
.ui-widget-content p a:hover {
color: #333 !important;
}

(the first hexdec code is our blue link text color)

Also, we noticed while we were making these updates that the bottom Save Changes button in the General Options was not saving.  The top one did though.

We look forward to the next update.

[Swift Ideas – Ed]

Apologies, I should have advised of the !important.

Just checked the bottom save button and working fine, it might be because the save helper banner was loading when you tried to press it.

– Ed