How to apply wordpress css styles to a jQueryUi dialog?

Question

Im devloping a wordpress plugin, and I succeded in showing a modal dialog using jQuery.

Problem is that I also show a list and buttons into that dialog, and i would like that those buttons and list look like the ones in wordpress. In other words I would like my dialog to 'inherit' WP styles so buttons and list look nice.

I would appreciate a LOT your help cause(call me stupid if you want) I have already spent 3 days with this.

Thanks

Answer 1

You can do it in two ways:

1. Apply the same IDs, classes and general DOM element identification that you have on your website, to the content being shown in the modal dialog. This way, they'll read from the same css directives you already have in place.

OR

1. If the styles you want to copy are on your theme's style.css then find out their existing counterparts on the markup generated by the modal dialog and then add them to the file.

If the css you want to apply is the one WP uses on the dashboard, then you also have to enqueue it to use on the front-end.

Answer 2

WordPress doesn't use a jQuery UI theme - but there is talk of including one (two actually - one for each colour scheme). See this trac.

Helen Hou-Sandi has made a plug-in to demonstrate these jQuery-UI themes here.

You can include those styles in your plug-in's folder, register and then enqueue them when necessary (load conditionally inside the admin_enqueue_scripts hook). See the Codex on loading scripts and styles. As demonstrated in Helen's plug-in you can load the appropriate jQuery-UI styles depending on the user's colour scheme settings.