Increase/decrease the width of pentaho CDE dashboad & increase/decrese spans

Hello Guys,

With the help of a community buddy, today(12th March 2014) I have given a trail on increasing/decreasing the size of the CDE dashboard width & the increase/decrease the width of the spans.

For doing this you need to change the screen.css file
Location of the file :
G:\Pentaho\biserver-ce-4.8.0-stable\biserver-ce\pentaho-solutions\system\pentaho-cdf\js\blueprint

Look for the below code :
/* grid.css */
.container {width:950px;margin:0 auto;}
.showgrid {background:url(src/grid.png);}

Change it as per your dashboard width requirement 
For example:
Increasing the size from 950px to 1600px
/* grid.css */
.container {width:1600px;margin:0 auto;}
.showgrid {background:url(src/grid.png);}
Sample output

In the same way you can increase/decrease the spans sizes listed in this file
For example
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px}

Change the above as per your requirement and perform  UNIT testing.

NOTE:
Pentaho CDE/CDF layouts follows blueprint css frame work 

References :
Change dashboard total width
http://redmine.webdetails.org/issues/1744

http://ianli.com/blueprinter/?cw=30&gw=20&cc=24

http://forums.pentaho.com/showthread.php?84254-CDE-Dashboard-width

http://www.blueprintcss.org/