Hello,

I was just wondering if there is a way to have my dashboard only allow block placement in two wider columns instead of three?

Thanks..

..J..

Comments

ThisIsntSparta’s picture

You'd have to edit dashboard.css and templates/dashboard-page.tpl.php

I suppose you'd have to take out the middle column in dashboard-page.tpl.php and move the php code there to one of the others.

in the css just edit the column to something like this..

#dashboard .column {
  padding: 1em 0 1em 0;
  width: 49%;
  margin: 0 2% 0 0;
  float: left;
  /* Make Empty Columns Easier to Fill */
  min-height: 100px;
}

#dashboard .column.omega { margin: 0 !important; }

jakemac53’s picture

Thanks for the post, I was also running into the same issue. I took This one step further and actually added columns. I can't link since its not live, but basically I have a layout with a sidebar on the left (1/3 width approx) and a sidebar floating to the right of it (approx 2/3 width). Below the wider sidebar are actually 2 more sidebars (both approx 1/3 width). This allows for a bit more customization by the user without making things to complicated for development. Also there is a 5th column below all of them that is 100% width so that they can add wide widgets into there.

First, you need to change the markup in dashboard-page.tpl.php like described by ThisIsntSparta. Nothing crazy here just added 2 more columns.

<div id="dashboard" class="clear-block">
  <div class="messages warning noscript"><?php print t('Enable Javascript to customize your dashboard.') ?></div>
  <div class="nav-content-dashboard"><?php print theme('links', $tabs); ?></div>
  <div class="column col1"><?php print $widgets[0]; ?></div>
  <div class="column col2"><?php print $widgets[1]; ?></div>
  <div class="column col3"><?php print $widgets[2]; ?></div>
  <div class="column col4"><?php print $widgets[3]; ?></div>
  <div class="column col5"><?php print $widgets[4]; ?></div>
  </div>

Then, you will need to open up dashboard.js, around line 24 for me you will see the following code:

jQuery.post(Drupal.settings.basePath + 'dashboard/' + Drupal.settings.dashboardPage + '/reorder-widgets', {
          token: Drupal.settings.dashboardToken,
          column_0: widgets[0],
          column_1: widgets[1],
          column_2: widgets[2]
});

Simply add the 2 additional columns here so they get sent with the ajax request and saved:

jQuery.post(Drupal.settings.basePath + 'dashboard/' + Drupal.settings.dashboardPage + '/reorder-widgets', {
          token: Drupal.settings.dashboardToken,
          column_0: widgets[0],
          column_1: widgets[1],
          column_2: widgets[2],
          column_3: widgets[3],
          column_4: widgets[4]
});

Now you will need to open up dashboard.page.inc and edit the dashboard_widget_reorder() function, which looks like the following:

<?php
function dashboard_widget_reorder($page) {
  global
$user;
 
$page_id = db_result(db_query("SELECT page_id FROM dashboard_page WHERE uid = '%d'", $user->uid));
  foreach (
range(0, 2) as $column) {
    foreach (
explode(',', $_POST['column_'. $column]) as $weight => $widget_id) {
     
$widget = array(
       
'widget_id' => $widget_id,
       
'page_id' => $page_id,
       
'col' => $column,
       
'weight' => $weight,
      );
     
drupal_write_record('dashboard_widget', $widget, array('widget_id', 'page_id'));
    }
  }
}
?>

Simply change the range in the foreach statement to be 0-4 (for all 5 columns):

<?php
function dashboard_widget_reorder($page) {
  global
$user;
 
$page_id = db_result(db_query("SELECT page_id FROM dashboard_page WHERE uid = '%d'", $user->uid));
  foreach (
range(0, 4) as $column) {
    foreach (
explode(',', $_POST['column_'. $column]) as $weight => $widget_id) {
     
$widget = array(
       
'widget_id' => $widget_id,
       
'page_id' => $page_id,
       
'col' => $column,
       
'weight' => $weight,
      );
     
drupal_write_record('dashboard_widget', $widget, array('widget_id', 'page_id'));
    }
  }
}
?>

Now you will have 5 columns, simply style them with css to make it look nice, I did the following which also styles the add widget page a bit:

#dashboard .col1{width:30%;float: left;margin-right: 10px !important;}
#dashboard .col2{width:66%;float: left;}
#dashboard .col3{width:32%;float: right;}
#dashboard .col4{width:32%;float: right;margin-right: 10px !important;}
#dashboard .col5{width:99%;float: left;}
.dashboard-widget{float: left;width: 30%;margin-right: 10px;height: 120px;background: #F6F6F2;border: solid 1px #ccc;}
.clear{clear: both;}
.dashboard-widget .widget-content{padding: 10px;}
.dashboard-widget .widget-content h3{margin-top: 0px;}
#dashboard .widget{border: solid 1px #ccc;}
#dashboard .column{margin: 10px 0 0;padding: 5px 5px;border: solid 1px #ccc;min-height: inherit;}

And you are done! You can use this technique to add as many columns as you want.