Commit 07965510 authored by frjo's avatar frjo
Browse files

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

parent 4cbf035b
......@@ -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.
......
......@@ -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',
......
/* $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;
}
......@@ -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)) {
......
// $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);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment