1

This used to be achieved with the code linked but since the dashboard code was heavily revised in Civi 5.33+? the old code doesn't work. Ref: https://forum.civicrm.org/index.php%3Ftopic=24355.0.html

My admittedly hacky solution is to add this CSS, which does work cosmetically but if a user doesn't already have a dashlet in your dashboard, they won't be able to add one.

.crm-container .crm-flex-box {display: inherit;}

How can I make this work better?

I don't particularly find the 2 columns useful to viewing many dashlets, but this would be a good feature improvement that could be a setting per site? Maybe per user?

Related: Getting a two-column dashboard in CiviCRM 5.33+

2

Alternatively, use the custom CSS option.

At Administer > System Settings > Resource URLs > Custom CSS URL enter eg [civicrm.files]/css/tweaks.css

Create tweaks.css with content:

/* Make dashboard a single column */
#civicrm-dashboard > .crm-flex-box > .crm-flex-2 {
  min-width: 100% !important;
}
2
  • Perfect! Nice and simple. In this case I'm only loading my custom CSS file on the front-end of the site courtesy of WP Admin Utilities so I'm using this simple extension to add styling to the dashboard: github.com/andyburnsco/smartbe.
    – Andy Burns
    Aug 12 at 23:32
  • 1
    Credit to Coleman for a version of this when I asked the same question previously!
    – Aidan
    Aug 16 at 11:18
2

Edit: this solution was to support the 2-columns for those who still wanted it. To force 1-column, Aidan's answer is much simpler indeed.

You probably don't want to install this extension, because it also does questionable tweaks to contributions forms, but there is a JavaScript snippet that you might find useful:

https://github.com/coopsymbiotic/coop.symbiotic.symbioticux/blob/master/js/dashboard.js

It's loaded from the main php file:


/**
 * Implements hook_civicrm_dashboard().
 */
function symbioticux_civicrm_dashboard($contactID, &$contentPlacement) {
  Civi::resources()
    ->addStyleFile('coop.symbiotic.symbioticux', 'css/dashboard.css')
    ->addScriptFile('coop.symbiotic.symbioticux', 'js/dashboard.js');
}

Although I'm pretty sure the CSS is not required. It's to hide things like the repeating pager in report dashlets, and other small tweaks.

This dashboard bug has been a long time annoyance for me - the dashboard rarely looks good with two columns - but I'm not sure what a good fix might be.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.