Adding Customize Dashboard Magic to Your Drupal Theme
If you haven't already tried Open Atrium, you should immediately do so. Once you do, you'll want to put all their cool customize stuff into your website. While the documentation says that it uses context, spaces and features to accomplish their "whiz bang" features, they also use a few theme tricks to bind it all together.
I'm going to show you what is necessary to get your theme ready for the "Customize dashboard" functionality in openatrium.
As a high level, you will need to create a palette region to store the spaces_dashboard "Dashboard" block in, add context_links to your theme template and add the necessary css and javascript to make it all work.
If you start with one of the themes from openatrium, it should just work for you. If you really want to add it to a different theme, keep reading.
First off, be sure you have the jquery_ui module and have downloaded the source for jquery.ui and put in in that module.
Add a palette region to your theme.
You will need to add in the default regions if you don't already have them. While you are in there, add in the ginkgo.js file as well.
regions[header] = Header
regions[palette] = Palette
regions[footer] = Footer
regions[left] = Left sidebar
regions[right] = Right sidebar
scripts[] = js/ginkgo.js
Copy the gingko.js file from the gingko theme
Get openatrium and copy the profiles/openatrium/themes/ginkgo/js/ginkgo.js file into [theme]/js/ginkgo.js
Add region and links to your page template
Edit your page.tpl.php file.
Add in the following somewhere above your content. I like to put it above or below the primary links.
Override blocks theming in the palette region
We are going to need a different theme for the blocks that render in the palette region. This conforms more closely to what the ginkgo theme does. You can also replace much of your rendering with the templates/object.tpl.php in the ginkgo theme but that is much more advanced. This is more of a brute force method.
create a block-palette.tpl.php file in your theme directory and put the following in it.
Configuring your template.php file
Next, add the following function to your template.php file within your theme.
/**
* Preprocessor for theme_block().
*/
function phptemplate_preprocess_block(&$vars) {
// If block is in a toggleable region and does not have a subject, mark it as a "widget,"
// i.e. show its contents rather than a toggle trigger label.
if (in_array($vars['block']->region, array('header', 'page_tools', 'space_tools'))) {
$vars['attr']['class'] .= empty($vars['block']->subject) ? ' block-widget' : ' block-toggle';
}
if ($vars['block']->region === 'palette') {
// Palette region requires module-level jQuery UI, Cookie, JSON includes.
// Note that drupal_add_js() only works here because blocks are rendered
// prior to the retrieval of javascript files in template_preprocess_page().
module_exists('admin') ? drupal_add_js(drupal_get_path('module', 'admin') .'/includes/jquery.cookie.js') : '';
module_exists('jquery_ui') ? jquery_ui_add(array('ui.draggable')) : '';
module_exists('context_ui') ? drupal_add_js(drupal_get_path('module', 'context_ui') .'/json2.js') : '';
// Add close button to palette region blocks.
$vars['title'] = "{$vars['title']}";
}
$vars['attr']['class'] .= empty($vars['block']->subject) ? ' block-notitle' : '';
}
Add some css
In your style.css (or [theme].css) add the following.
/**
* Palette blocks =====================================================
*/
#palette {
position:fixed;
height:0px;
top:0px;
left:0px;
z-index:1000;
overflow:visible;
}
#palette,
#palette select,
#palette input.form-text,
#palette input.form-submit { font-size:16px; }
#palette .block {
position:absolute;
top:120px;
left:120px;
width:400px;
-moz-box-shadow:#666 0px 0px 10px;
-webkit-box-shadow:#666 0px 0px 10px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border:0px;
margin:0px;
padding:0px;
background:transparent;
display:none;
}
#palette .block .block-title {
cursor:move;
position:relative;
background:#ccc url(images/sprite_bleeds.png) 0px -400px repeat-x;
color:#666;
text-shadow:#fff 0px 1px 0px;
font-size:16px;
padding:5px 5px 5px 10px;
}
div.messages span.close,
#palette .block .block-title span.close {
position:absolute;
right:5px;
top:5px;
display:block;
width:20px;
height:20px;
text-indent:-999px;
overflow:hidden;
cursor:pointer;
background:#666 url(images/sprite_base.png) -20px -30px no-repeat;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#palette .block .block-content { background:#eee; }
#palette .buttons {
background:transparent;
margin:0px;
border:0px;
padding:0px;
}
#palette .more-link { float:right; }
#palette .item-list ul li { padding-left:0px; padding-right:0px; }
/* Context editor specific */
#palette .context-editor-block-layouts .form-item {
padding:0px;
display:inline;
}
#palette form.context-editor .item-list { display:none; }
#palette form.context-editor .buttons { display:block; }
#palette .context-editable { padding:0px; }
#palette .draggable-placeholder,
#palette .context-block-addable {
float:left;
width:167px;
margin:0px 5px 5px 0px;
}
#palette .context-block-browser .category { padding:5px 0px 0px 5px; }
#palette .context-block-browser {
margin:5px 0px;
padding:5px;
background:#ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
/**
* Togglable blocks ===================================================
*/
.toggle-blocks .block { float:left; position:relative; }
.toggle-blocks .block-title { cursor:pointer; }
.toggle-blocks .block-widget,
.toggle-blocks .block-toggle {
background:transparent;
margin:0px;
padding:0px;
border:0px;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
.toggle-blocks .block-toggle .block-content {
z-index:499;
position:absolute;
display:none;
}
.toggle-blocks .block-widget .block-content {
display:block;
position:static;
}
/**
* Page tools ========================================================
*/
#page-tools {
height:39px;
position:relative;
z-index:1;
}
#page-tools .page-title,
#page-tools .tabs {
padding-top:5px;
position:absolute;
left:20px;
}
#page-tools .context-links,
#page-tools .dropdown-blocks { float:right; }
#page-tools .page-title {
font-size:16px;
font-weight:normal;
line-height:30px;
text-shadow:#fff 0px 1px 0px;
}
#page-tools .page-title-hidden {
text-indent:-999px;
overflow:hidden;
}
#page-tools .page-title a.username {
color:inherit;
font-size:inherit;
text-transform:none;
}
#page-tools .dropdown-blocks { height:39px; }
#page-tools .dropdown-blocks .block { padding:0px; }
#page-tools .dropdown-blocks .block-toggle .block-title {
-moz-border-radius:0px;
-webkit-border-radius:0px;
border:0px;
border-left:1px solid #ccc;
text-shadow:#fff 0px 1px 0px;
padding:5px 10px;
line-height:30px;
background:transparent;
}
#page-tools .dropdown-blocks .block-toggle .toggle-active {
color:#fff;
text-shadow:#444 0px 1px 0px;
background:#666 url(images/sprite_bleeds.png) 0px 100% repeat-x;
}
#page-tools .context-links {
padding:7px 0px 7px 5px;
height:25px;
line-height:15px;
overflow:hidden;
}
.buttons a,
#page-tools .context-links a {
font-size:11px;
font-weight:bold;
color:#fff;
background:#666 url(images/sprite_bleeds.png) 0px -400px repeat-x;
text-shadow:#444 0px 1px 0px;
border:1px solid #555;
border-color:#555 #555 #333;
margin-left:5px;
padding:4px 9px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.buttons a { margin-right:5px; }
.buttons a:active,
#page-tools .context-links a:active { background-position:0px 100%; }
#page-tools #help-toggler {
background:url(images/sprite_base.png) 0px -30px no-repeat;
height:20px;
width:20px;
text-indent:-999px;
overflow:hidden;
margin: 10px 0px 0px 10px;
position:static;
float:right;
}
#page-tools #help-toggler.toggle-active { background-position:-20px -30px; }
This should enable your theme for context_links and the palette used by the spaces_dashboard module. You'll also want to create a global context that puts the spaces dashboard block in the palette region and add any spaces_dashboard-custom_1 default contexts that you want. Finally, go to admin/settings/dashboard and set which blocks and regions you want to use in the spaces_dashboard.
