One Column for Dashboard

[lanetterm]

Is it possible to have the dashboard be one column with widgets stacked on top of each other? Users do not like that the widgets show up with side scrollers  -- I tried looking through the templates and I did not see where the column layout was.

Any help would be appreciated

thanks

[Dave Greenberg]

Check out comments in this template: templates/CRM/common/dashboard.tpl - looks like you can change the column setting near the top (NB - haven't tried it).

(looks like you'll also need to change stuff in packages/jquery/css/dashboard.css)

[lanetterm]

Thanks -- that did the trick -- I was looking at the wrong dashboard.tpl


thanks
Lanette

[Dave Greenberg]

Cool - make sure you're modifying a COPY of the template (placed in your configured Custom Templates Directory - see Administer > Configure > Global Settings > Directories).

[cognoscento]

Funny enough, I had a related question... why is dashboard.css hidden away in the jquery/css folder? I'm also looking to adjust the dashboard columns to fit my grid layout.

[theMusician]

Making a one-column dashboard is straightforward using the information provided here. However, where do you put the CSS so that it is not overwritten during an upgrade. If I place it in my custom_templates folder mimicking the real path it does not take effect.

This is where I tried putting my CSS. This is beneath my custom_templates folder.
sites/default/files/civicrm/custom_templates/packages/jquery/css

This is the real path
sites/all/modules/civicrm/packages/jquery/css

Can only items that live in the CRM folder exist under the custom template directory?

Thanks.

[GingerFeet]

I put my customized files in /var/www/custom and then I symlink from the civiCRM directory or Drupal module directory to the customized file.

GF

[Mark Tompsett]

If anybody wants the code, here is the code I used in dashboard.css.....

Code: [Select]

#crm-container #dashlets-header-col-0 {
    float: left;
    width: 100%; /* was 40% */
    display: none; /* to hide "Left Column" */
}

#crm-container #dashlets-header-col-1 {
    margin-left: 42%;
    width: 0%; /* was 56% */
    display: none; /* to hide "Right Column" */
}

#crm-container #existing-dashlets-col-0 {
    float: left;
    width: 100%;  /* was 40% */
}

#crm-container #existing-dashlets-col-1 {
    margin-left: 42%;
    width: 0%; /* was 56% */
}This makes the left column 100% wide (squeezing the right column to 0%) and hiding the column headers text.

[Mark Tompsett]

Alternatively, it also seems to work if you put that code into extras.css (rather than mess with dashboard.css)

Mark

[tapash]

Hi, I am using Civicrm 4.3.4 on drupal. I have tried this code above and chaged the code in dashboard.css and managed to squeezing the laft column to 100%. but when I select a dashboard item it still shows as if it would be with old setting. please find screenshot below. Thanks

[xavier]

Hi,

I did an extension to put both columns on the top of each other

https://github.com/TechToThePeople/smartbe

I'm going to rename and make it more generic soon(ish) but you can use it like that right now

X+

[tapash]

smartbe is great work. thanks 

[Tiffani Chin]

I've struggled to do this, off and on for a while.  Following the advice above has never quite done the trick for me.

When I do all of the above (change template to 1 column, change column percents for dashlets and ALSO change the #crm-container width of column 1 to 0% (in dashboard.css), then I finally get just one column.  Here's the code I used, just in case anyone else is frustrated trying to do this.

Code: [Select]

#crm-container .column {
  float: left;
  margin: 0;
  /* padding-bottom and min-height make sure that there is always a sizable drop zone. */
  min-height: 400px;
  height: 400px;
  height: auto !important;
  padding: 0 0 250px;
  list-style-type: none;
}
/*Notes to self: - I am changing the percents below to try to get just one column in the dashboard*/

#crm-container .column-0 {
  width: 100%;
}

#crm-container .column-1 {
  width: 0%;
}

[Carolyn Shannon]

Update (4.4.6 on Drupal 7):

1) modify civicrm/templates/crm/common/dashboard.tpl line 33 to columns: 1,

2) define custom css directory (directory defined in the Resource URLs page: civicrm/admin/setting/url&reset=1)

3) create/modify custom.css in your custom css directory including this:

#crm-container .column-0 {
   width: 100% !important;
}