LevelTen Web Design | Dallas, TX

Adding Customize Dashboard magic to your theme

Randall Knutson — Thu, 02 Sep 2010 18:07:21 +0000

If you haven't already tried http:/openatrium.com, 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.

  <div id="palette"><?php print $palette ?></div>
  <div id='page-tools'><div class='limiter clear-block'>
    <?php if ($context_links): ?><div class='context-links'><?php print $context_links ?></div><?php endif; ?>
  </div></div>

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.

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="block block-<?php print $block->module ?> ui-draggable">
  <div class="block-title">
    <?php print $block->subject ?>
    <span class="close"></span>
  </div>
  <div class="block-content">
    <?php print $block->content ?>
  </div>
</div>

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'] = "<span class='close'></span>{$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.

Erin Tuohy

Erin Tuohy — Thu, 26 Aug 2010 20:41:30 +0000

Erin is the Office Coordinator for LevelTen Interactive. Erin is responsible for interacting with both clients and employees, ensuring an organized work flow and developing good working relationships. Erin proactively assists with current projects and planning our company events, her responsibilities changing from day to day. Erin recently moved to Dallas from England and before that attended Colorado Christian University for a Bachelor’s degree in Business Administration with an emphasis in Marketing.

Drupal for Site Builders - Houston

superuser — Mon, 23 Aug 2010 16:45:19 +0000

Date:

Tue, 01/18/2011 - 09:00 - Wed, 01/19/2011 - 16:00

Registration Expiry:

Sun, 01/16/2011 - 17:00

$768.00

SKU: drupalforsitebuilders_houston

Price: $768.00

Drupal for Site Builders - Houston

superuser — Mon, 23 Aug 2010 16:43:34 +0000

Date: Tuesday, Jan 18th, 2011
Time: 10:00 am - 5:00 pm
Date: Wednesday, Jan 19th, 2011
Time: 10:00 am - 5:00 pm
Price: $768.00 per attendee

In two days time, participants will be brought up to speed on Drupal and be ready to tackle their own project. This course is designed both for users with no Drupal experience and those who are familiar with Drupal and want to expand their knowledge and dig deeper into their sites. The course provides in-depth discussions on Drupal’s installation process and managing users, comments, and content. Participants will also review Drupal's block system and using taxonomy to categorize their content.

On the first day, significant time will be devoted to creating new content types using the Content Construction Kit (CCK) and exploring field types, widgets, and the corresponding settings.

The second day will be dedicated entirely to CCK and Views. Views is a powerful tool used to create custom pages, blocks, and RSS feeds on your site. Participants will finish the day by creating a photo gallery using CCK, image field, and Views.

Fee includes lunch and materials.

Learning Goals

CCK and additional CCK fields
Views and views extensions
Image management and imagecache
User management and permissions

Course Format

The course is a one day course with a mixture of lecture, demonstrations, exercises and workshop time.

Intended Audience

This course is indented for those with a basic understanding of Drupal administration to expand their knowledge towards becoming efficient site builders. It is ideal for those who are seeking a deeper understanding of CCK and views.

Prerequisites

Participants should be familiar with basic Drupal content management and administrative tasks such as adding and editing content and working with blocks, menus, taxonomies, users and permissions. If you are not familiar with these concepts, it is recommended you take Drupal in a Day prior to this course.

01/18/2011 - 9:00am - 4:00pm

01/19/2011 - 9:00am - 4:00pm

Drupal for Site Builders

758.00

Drupal for Site Builders - Houston

Drupal for Site Builders - Austin

superuser — Mon, 23 Aug 2010 16:39:16 +0000

Date:

Tue, 10/26/2010 - 09:00 - Wed, 10/27/2010 - 16:00

Registration Expiry:

Sun, 10/24/2010 - 17:00

$768.00

SKU: drupalforsitebuilders_austin

Price: $768.00

Drupal for Site Builders - Austin

superuser — Mon, 23 Aug 2010 16:35:31 +0000

Date: Tuesday, Oct 26th, 2010
Time: 9:00 am - 4:00 pm
Date: Wednesday, Oct 27th, 2010
Time: 9:00 am - 4:00 pm
Price: $768.00 per attendee

On the first day, significant time will be devoted to creating new content types using the Content Construction Kit (CCK) and exploring field types, widgets, and the corresponding settings.

Fee includes lunch and materials.

Learning Goals

CCK and additional CCK fields
Views and views extensions
Image management and imagecache
User management and permissions

Course Format

The course is a one day course with a mixture of lecture, demonstrations, exercises and workshop time.

Intended Audience

Prerequisites

10/26/2010 - 9:00am - 4:00pm

10/27/2010 - 9:00am - 4:00pm

Drupal for Site Builders

$768.00

Drupal for Site Builders - Austin

ExecuTrain Austin

superuser — Mon, 23 Aug 2010 16:32:35 +0000

Javascript is required to view this map.

Drupal in a Day - Houston

superuser — Mon, 23 Aug 2010 16:30:01 +0000

Date:

Mon, 01/17/2011 - 09:00 - 16:00

Registration Expiry:

Sun, 01/16/2011 - 17:00

$379.00

SKU: drupalinaday_houston

Price: $379.00

Drupal in a Day - Houston

superuser — Mon, 23 Aug 2010 16:28:14 +0000

Date: Monday, Jan 17th, 2011
Time: 10:00 am - 5:00 pm
Price: $379.00 per attendee

Drupal in a Day will be an overview of creating a Drupal site from start to finish. Participants will start with a blank website and, already having seen the final site, will start with adding and managing users, creating user profiles, adding custom content, and managing that content (including turning on and off comments, or setting comments to read-only). Participants will then create custom content types and look at views to display this content in various parts throughout the site, including custom blocks and list pages, such as a blogroll, the last five images added, or the latest blog posts added to the site.

Because this class will be an overview and not an in-depth course, it is perfect for people who are on the fence about using Drupal or who are looking for a hands-on introduction. Those who are looking for an in-depth Drupal site-building training should additionally purchase the Drupal for Site Builders course.

Fee includes lunch and materials.

Learning Goals

Managing content, navigation and taxonomy
Extending Drupal through modules
Understanding theming and modifying page layouts
User management and permissions
Modifying and creating content types
CCK basics
Simple views

Course Format

The course is a one day course with a mixture of lecture, demonstrations, exercises and workshop time.

Intended Audience

This course is for anyone wanting to become more familiar with how Drupal works. It is an introductory course suitable for people with little to no web experience such for owners, managers, marketers and webmasters. It is also ideal for web developers or people experienced with other CMSs, but no Drupal experience, who are needed to quickly get oriented to how Drupal works.

Prerequisites

Interest in learning about content management systems, no prior web development or Drupal skills are required. Understanding Content management & Drupal are helpful.

Additional Courses

Drupal for Site Builders directly builds upon the skills taught in this class providing a more in depth look at CCK, views and other popular site building modules.

01/17/2011 - 9:00am - 4:00pm

Drupal in a Day Workshop

379.00

Drupal in a Day - Houston

Drupal in a Day - Austin

superuser — Mon, 23 Aug 2010 16:24:59 +0000

Date:

Mon, 10/25/2010 - 09:00 - 16:00

Registration Expiry:

Sun, 10/24/2010 - 17:00

$379.00

SKU: drupalinaday_austin

Price: $379.00