diff --git a/css/panopoly-modal.css b/css/panopoly-modal.css
index 6eebae9..9520f13 100644
--- a/css/panopoly-modal.css
+++ b/css/panopoly-modal.css
@@ -206,7 +206,7 @@
   padding: 0 0 10px;
 }
 
-#modal-content fieldset.widget-preview {
+#modal-content fieldset.panopoly-magic-preview {
   margin-top: 2em;
   margin-bottom: 5em;
   -webkitborder-top-right-radius: 0;
@@ -214,12 +214,12 @@
   border-top-right-radius: 0;
 }
 
-#modal-content fieldset.widget-preview-single {
+#modal-content fieldset.panopoly-magic-preview-single {
   margin-top: 10px;
   margin-bottom: 1em;
 }
 
-#modal-content fieldset.widget-preview-single .fieldset-wrapper {
+#modal-content fieldset.panopoly-magic-preview-single .fieldset-wrapper {
   font-size: 100%;
   max-width: 100%;
   overflow-y: auto;
@@ -227,7 +227,7 @@
   max-height: 375px;
 }
 
-#modal-content fieldset.widget-preview-single .fieldset-wrapper .panopoly-spotlight img {
+#modal-content fieldset.panopoly-magic-preview-single .fieldset-wrapper .panopoly-spotlight img {
   width: 100%;
 }
   
@@ -254,7 +254,7 @@
   border-top-right-radius: 4px;
 }
   
-#modal-content fieldset.widget-preview legend {
+#modal-content fieldset.panopoly-magic-preview legend {
   -moz-border-radius-topright: 0;
   -webkit-border-top-right-radius: 0;
   border-top-right-radius: 0;
@@ -285,7 +285,7 @@
   margin-top: 2.25em;
 }
 
-#modal-content .widget-preview .fieldset-wrapper {
+#modal-content .panopoly-magic-preview .fieldset-wrapper {
   max-width: 100%;
   overflow-y: auto;
   font-size: 75%;
@@ -294,17 +294,17 @@
   overflow-x: hidden;
 }
 
-#modal-content .widget-preview .fieldset-wrapper table tr.even td, 
-#modal-content .widget-preview .fieldset-wrapper table tr.odd td {
+#modal-content .panopoly-magic-preview .fieldset-wrapper table tr.even td, 
+#modal-content .panopoly-magic-preview .fieldset-wrapper table tr.odd td {
   padding: 3px 5px;
 }
 
-#modal-content .widget-preview .fieldset-wrapper h2 {
+#modal-content .panopoly-magic-preview .fieldset-wrapper h2 {
   font-size: 150%;
   margin-top: .25em;
 }
 
-#modal-content .widget-preview-single {
+#modal-content .panopoly-magic-preview-single {
   float: right;
   margin-left: 1em;
   margin-top: 0;
@@ -454,8 +454,8 @@
   border: none;
 }
 
-#modal-content .widget-preview .fieldset-wrapper table img, 
-#modal-content .widget-preview .panopoly-image-featured {
+#modal-content .panopoly-magic-preview .fieldset-wrapper table img, 
+#modal-content .panopoly-magic-preview .panopoly-image-featured {
   width: 100%;
 }
 
diff --git a/panopoly-magic-preview.tpl.php b/panopoly-magic-preview.tpl.php
index cacd5f0..85651b5 100644
--- a/panopoly-magic-preview.tpl.php
+++ b/panopoly-magic-preview.tpl.php
@@ -4,10 +4,11 @@
  * Template for the Panopoly Magic preview.
  */
 ?>
-<fieldset <?php print $attributes; ?>>
+<fieldset class="<?php print $classes; ?>"<?php print $attributes; ?>>
   <legend>
     <?php if (!empty($add_link)): ?>
-      <div class="panopoly-magic-preview-title"><?php print $add_link; ?></div>
+      <?php // Only keeping 'widget-preview-title' for backcompat with 3rd party themes. ?>
+      <div class="panopoly-magic-preview-title widget-preview-title"><?php print $add_link; ?></div>
     <?php endif; ?>
     <span class="fieldset-legend"><?php print $title; ?></span>
   </legend>
diff --git a/panopoly-magic.js b/panopoly-magic.js
index 8aec248..1619255 100644
--- a/panopoly-magic.js
+++ b/panopoly-magic.js
@@ -168,7 +168,7 @@
       .once('ctools-auto-submit')
       .bind('keyup blur', function (e) {
         var $element;
-        $element = $('.widget-preview .pane-title', context);
+        $element = $('.panopoly-magic-preview .pane-title', context);
 
         cancelSubmit(e.target.form, timer);
 
diff --git a/panopoly_magic.module b/panopoly_magic.module
index aed0eaf..f3029d5 100644
--- a/panopoly_magic.module
+++ b/panopoly_magic.module
@@ -133,6 +133,7 @@ function panopoly_magic_theme($existing, $type, $theme, $path) {
         'title' => NULL,
         'add_link' => NULL,
         'preview' => NULL,
+        'single' => FALSE,
       ),
       'template' => 'panopoly-magic-preview',
     ),
@@ -452,6 +453,8 @@ function panopoly_magic_form_alter(&$form, &$form_state, $form_id) {
 
       $preview_attributes = array(
         'class' => array(
+          'panopoly-magic-preview-button',
+          // Keeping old class name for backcompat with 3rd party themes.
           'widget-preview-button',
         ),
       );
@@ -616,10 +619,7 @@ function panopoly_magic_form_post_render_preview($output, $form) {
   return theme('panopoly_magic_preview', array(
     'title' => t('Preview'),
     'preview' => $content,
-    'attributes_array' => array(
-      'id' => 'panopoly-form-widget-preview',
-      'class' => array('widget-preview', 'widget-preview-single', 'form-wrapper'),
-    ),
+    'single' => TRUE,
   )) . $output;
 }
 
@@ -1244,7 +1244,8 @@ function panopoly_magic_form_ctools_stylizer_edit_style_form_default_alter(&$for
 
     // Customize the settings preview button.
     $form['top box']['preview']['submit']['#attributes'] = array(
-      'class' => array('widget-preview-button', 'ctools-use-ajax', 'ctools-auto-submit-click'),
+      // Keeping 'widget-preview-button' class for backcompat with 3rd party themes.
+      'class' => array('panopoly-magic-preview-button', 'widget-preview-button', 'ctools-use-ajax', 'ctools-auto-submit-click'),
     );
 
     // Autosubmit the form.
@@ -1285,10 +1286,7 @@ function theme_panopoly_magic_stylizer_preview_form($vars) {
     return theme('panopoly_magic_preview', array(
       'title' => t('Preview'),
       'preview' => $preview($plugin, $settings) . drupal_render_children($form),
-      'attributes_array' => array(
-        'id' => 'preview',
-        'class' => array('widget-preview-single'),
-      ),
+      'single' => TRUE,
     ));
   }
 }
@@ -1513,12 +1511,42 @@ function _panopoly_magic_render_add_content_link($vars, $content_type, $title) {
   ));
 }
 
+/**
+ * Prepares variables for theme_panopoly_magic_preview().
+ */
+function template_preprocess_panopoly_magic_preview(&$vars) {
+  if (!empty($vars['single'])) {
+    // The id really should be 'panopoly-magic-preview' but don't want to
+    // break 3rd party themes or modules that depend on it.
+    $vars['attributes_array']['id'] = 'panopoly-form-widget-preview';
+    $vars['classes_array'][] = 'panopoly-magic-preview-single';
+  }
+
+  // For backcompat with themes that depend on the old class names.
+  $vars['classes_array'][] = 'widget-preview';
+  if (!empty($vars['single'])) {
+    $vars['classes_array'][] = 'widget-preview-single';
+  }
+}
+
+/**
+ * Prepares variables for theme_panopoly_magic_preview_link().
+ */
+function template_preprocess_panopoly_magic_preview_link(&$vars) {
+  $vars['classes_array'][] = 'panopoly-magic-preview-link';
+  $vars['classes_array'][] = 'clearfix';
+}
+
 /** 
  * Returns HTML for a preview link.
  */
 function theme_panopoly_magic_preview_link($vars) {
+  // Since we're a theme function and not a template, template_preprocess()
+  // won't run and we have to deal with 'classes_array' directly.
+  $classes = implode(' ', $vars['classes_array']);
+
   $html = '';
-  $html .= '<div class="panopoly-magic-preview-link clearfix">';
+  $html .= '<div class="' . $classes . '">';
   $html .= $vars['preview_link'];
   $html .= $vars['add_link'];
   $html .= '</div>';
@@ -1565,9 +1593,6 @@ function panopoly_magic_process_panels_add_content_modal(&$vars) {
         'title' => $legend_title,
         'add_link' => $add_content_link,
         'preview' => $preview,
-        'attributes_array' => array(
-          'class' => array('widget-preview'),
-        ),
       ));
     }
 
@@ -1591,9 +1616,6 @@ function panopoly_magic_process_panels_add_content_modal(&$vars) {
           'title' => $legend_title,
           'add_link' => $add_content_link,
           'preview' => $preview,
-          'attributes_array' => array(
-            'class' => array('widget-preview'),
-          ),
         ));
       }
     }