#774606: Move the default style to a sub directory.

README.txt

@@ -66,6 +66,19 @@ Go to "Administer" -> "Site configuration" -> "Colorbox" to find
 all the configuration options.
 
 
+Add a custom Colorbox style to your theme:
+----------------------------------------
+The easiest is to start with either the default style or one of the
+example styles from the Colorbox script. Simply copy the whole
+style folder to the theme and rename it and the files to
+something logical.
+
+Add entries in the themes info file for the Colorbox CSS/JS files.
+
+In the Colorbox settings select "None" as style. This will leave the
+styling of Colorbox up to your theme.
+
+
 Opening any form in a Colorbox:
 ------------------------------
 Check the "Enable Colorbox forms" option in Colorbox settings.
@@ -88,7 +101,7 @@ script itself.
 % drush colorbox-script
 
 The command will download the script and unpack it in "sites/all/libraries".
-It is possible to add another path as an option to the command, but not 
+It is possible to add another path as an option to the command, but not
 recommended unless you know what you are doing.
 
 

colorbox.admin.inc

@@ -114,18 +114,14 @@ function colorbox_admin_settings() {
     $colorbox_path .'/example3' => t('Example 3'),
     $colorbox_path .'/example4' => t('Example 4'),
     $colorbox_path .'/example5' => t('Example 5'),
+    'none' => t('None'),
   );
-  $theme_path = path_to_theme();
-  if (is_file($theme_path .'/colorbox.css')) {
-    $colorbox_styles[$theme_path] = t('Theme');
-  }
-  $colorbox_styles['none'] = t('None');
   $form['colorbox_custom_settings']['colorbox_style'] = array(
     '#type' => 'select',
     '#title' => t('Style'),
     '#options' => $colorbox_styles,
     '#default_value' => variable_get('colorbox_style', 'default'),
-    '#description' => t('Select the style to use for the Colorbox. The example styles are the ones that come with the Colorbox script. Tips: Place a "colorbox.css" file in your theme directory to get an option "Theme".'),
+    '#description' => t('Select the style to use for the Colorbox. The example styles are the ones that come with the Colorbox script. Select "None" if you have added Colorbox styles to your theme.'),
   );
   $form['colorbox_custom_settings']['colorbox_custom_settings_activate'] = array(
     '#type' => 'radios',

colorbox.css

-/* $Id$  */
-
-/*
-    ColorBox Core Style
-    The following rules are the styles that are consistant between themes.
-    Avoid changing this area to maintain compatability with future versions of ColorBox.
-*/
-#colorbox, #cboxOverlay, #cboxWrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  overflow: hidden;
-}
-#cboxOverlay {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-}
-#cboxMiddleLeft, #cboxBottomLeft {
-  clear: left;
-}
-#cboxContent {
-  position: relative;
-  overflow: hidden;
-}
-#cboxLoadedContent {
-  overflow: auto;
-}
-#cboxLoadedContent iframe {
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
-#cboxTitle {
-  margin: 0;
-}
-#cboxLoadingOverlay, #cboxLoadingGraphic {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
-  cursor: pointer;
-}
-
-/*
-    ColorBox example user style
-    The following rules are ordered and tabbed in a way that represents the
-    order/nesting of the generated HTML, so that the structure easier to understand.
-*/
-#cboxOverlay {
-  background: #000;
-}
-
-#colorBox {}
-  #cboxWrapper {
-    background: #fff;
-    border-radius: 5px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-  }
-    #cboxTopLeft {
-      width: 15px;
-      height: 15px;
-    }
-    #cboxTopCenter {
-      height: 15px;
-    }
-    #cboxTopRight {
-      width: 15px;
-      height: 15px;
-    }
-    #cboxBottomLeft {
-      width: 15px;
-      height: 10px;
-    }
-    #cboxBottomCenter {
-      height: 10px;
-    }
-    #cboxBottomRight {
-      width: 15px;
-      height: 10px;
-    }
-    #cboxMiddleLeft {
-      width: 15px;
-    }
-    #cboxMiddleRight {
-      width: 15px;
-    }
-    #cboxContent {
-      background: #fff;
-      font: 12px "Lucida Grande", Verdana, Arial, sans-serif;
-    }
-      #cboxLoadedContent {
-        margin-bottom: 28px;
-      }
-      #cboxTitle {
-        position: absolute;
-        background: rgba(255, 255, 255, 0.7);
-        bottom: 28px;
-        left: 0;
-        color: #535353;
-        width: 100%;
-        padding: 4px;
-      }
-      #cboxCurrent {
-        position: absolute;
-        bottom: 4px;
-        left: 60px;
-        color: #949494;
-      }
-      .cboxSlideshow_on #cboxSlideshow {
-        position: absolute;
-        bottom: 0px;
-        right: 30px;
-        background: url(images/controls.png) -75px -50px no-repeat;
-        width: 25px;
-        height: 25px;
-        text-indent: -9999px;
-      }
-      .cboxSlideshow_on #cboxSlideshow.hover {
-        background-position: -101px -50px;
-      }
-      .cboxSlideshow_off #cboxSlideshow {
-        position: absolute;
-        bottom: 0px;
-        right: 30px;
-        background: url(images/controls.png) -49px -50px no-repeat;
-        width: 25px;
-        height: 25px;
-        text-indent: -9999px;
-      }
-      .cboxSlideshow_off #cboxSlideshow.hover {
-        background-position: -25px -50px;
-      }
-      #cboxPrevious {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: url(images/controls.png) -75px 0px no-repeat;
-        width: 25px;
-        height: 25px;
-        text-indent: -9999px;
-      }
-      #cboxPrevious.hover {
-        background-position: -75px -25px;
-      }
-      #cboxNext {
-        position: absolute;
-        bottom: 0;
-        left: 27px;
-        background: url(images/controls.png) -50px 0px no-repeat;
-        width: 25px;
-        height: 25px;
-        text-indent: -9999px;
-      }
-      #cboxNext.hover {
-        background-position: -50px -25px;
-      }
-      #cboxLoadingOverlay {
-        background: #fff;
-      }
-      #cboxLoadingGraphic {
-        background: url(images/loading_animation.gif) center center no-repeat;
-      }
-      #cboxClose {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        background: url(images/controls.png) -25px 0px no-repeat;
-        width: 25px;
-        height: 25px;
-        text-indent: -9999px;
-      }
-      #cboxClose.hover {
-        background-position: -25px -25px;
-      }
-
-/* The following are fixes for IE. */
-.cboxIE #cboxTitle {
-  background: #fff;
-}

colorbox.module

@@ -130,7 +130,7 @@ function _colorbox_doheader() {
   $style = variable_get('colorbox_style', 'default');
   switch ($style) {
     case 'default':
-      drupal_add_css($path .'/colorbox.css');
+      drupal_add_css($path .'/styles/default/colorbox_default_style.css');
       break;
     case 'none':
       break;
@@ -188,7 +188,7 @@ function _colorbox_doheader() {
   drupal_add_js($path .'/js/colorbox.js');
 
   if ($style == 'default') {
-    drupal_add_js($path .'/js/colorbox_default_style.js');
+    drupal_add_js($path .'/styles/default/colorbox_default_style.js');
   }
 
   if (variable_get('colorbox_form', 0)) {

js/colorbox_default_style.js

-// $Id$
-(function ($) {
-
-Drupal.behaviors.initColorboxDefaultStyle = function (context) {
-  $(document).bind('cbox_complete', function(){
-    setTimeout(function(){ $('#cboxTitle').slideUp() }, 1500);
-    $('#cboxLoadedContent').bind('mouseover', function(){
-      $('#cboxTitle').slideDown();
-    });
-    $('#cboxOverlay').bind('mouseover', function(){
-      $('#cboxTitle').slideUp();
-    });
-  });
-};
-
-})(jQuery);