Author Topic: Widening Dashboard Widget (Read 1154 times)

adizo · April 19, 2012, 07:12:02 am

How can one widen the Dashboard widget and re-arrange the right and left column to be on top of each other instead of by the side.
I find that the widgets do not fill up the space and so cant dispay the information in full. Will really appreciate a feedback on this.

thanks

Mark Tompsett · December 04, 2012, 01:00:17 am

Put this code into your extras.css (located in /sites/all/modules/civicrm/css)

Code: [Select]

/*	single column dashboard.... */
#crm-container .column-0 {
    width: 100%;
}
#crm-container .column-1 {
    width: 0%;
}
#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% */
}
/*	..... single column dashboard */

It will expand the left column to 100%, and shrink the right to 0%, ie there will only be one dashboard column.
In any case, you can put multiple dashlets in the same column so they will render one below another.

HTH
Mark

Mark Tompsett · April 16, 2013, 07:41:24 am

In case anyone tries this technique and cannot get it to work with a more recent version of CiviCRM (eg 4.3) then I have found that this wil work....

Code: [Select]

/*	single column dashboard.... */
#crm-container .column-0 {
    width: 100% !important;
}
#crm-container .column-1 {
    width: 0% !important;
}
#crm-container #dashlets-header-col-0 { 
    float: left; 
    width: 100% !important; 	/* was 40% */
    display: none !important;	/* to hide "Left Column" */
}
#crm-container #dashlets-header-col-1 { 
    margin-left: 42%;
    width: 0% !important; 		/* was 56% */
    display: none !important;	/* to hide "Right Column" */
}
#crm-container #existing-dashlets-col-0 { 
    float: left; 
    width: 100% !important;  	/* was 40% */
}
#crm-container #existing-dashlets-col-1 { 
    margin-left: 42%;
    width: 0% !important; 		/* was 56% */
}
/*	..... single column dashboard */

The only difference is that the " !important" qualifier is included for certain CSS selectors, which overrides other values set elsewhere.

Mark

xavier · April 16, 2013, 08:01:45 am

you can use this extension that will do it directly:

https://github.com/TechToThePeople/smartbe

X+

CiviCRM Community Forums (archive)

News:

Author Topic: Widening Dashboard Widget (Read 1154 times)

adizo

Widening Dashboard Widget

Mark Tompsett

Re: Widening Dashboard Widget

Mark Tompsett

Re: Widening Dashboard Widget

xavier

Re: Widening Dashboard Widget