In Modern themes, the panels within which your data is displayed are constrained to a width of 1000px. (The various elements within the page are formatted so that they fit comfortably within the typical width of today’s browsers, preventing unnecessary horizontal scrolling.) However, there may be circumstances under which you’d like to adjust that default width. Here’s how you do it.
/* existing definition in BaseStyles.css */
.pageBackground, .pBack { /* body */
background: fixed;
background-color: #9bb82c;
background-image: url(../../Images/pBack.gif);
background-position: center top;
background-repeat: no-repeat;
font-family: Arial, Verdana, sans-serif;
margin-left: auto;
margin-right: auto;
padding-top: 76px;
width: 1000px;
}
.logoBG { /* inner header container */
margin-left: auto;
margin-right: auto;
width: 1000px;
}
.MLMmenuAlign { /* horizontal menu container alignment */
margin-left: auto;
margin-right: auto;
position: relative;
width: 1000px;
}
.dialog_view, .dv, .panelC { /* panel container (includes panel header) */
box-shadow: 0px 0px 2px #666666;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
text-align: left;
vertical-align: top;
width: 1000px;
}
.pageButtonsContainer { /* page buttons container */
margin-left: auto;
margin-right: auto;
width: 1000px;
}
First, let’s make the panels a little wider (1300px):
/* new definitions in Styles.css */
.dialog_view, .dv, .panelC { /* panel container (includes panel header) */
…
width: 1300px; /* override default attribute */
}
After this first change, you’ll notice that the panel in indeed wider, but it is not centered within the full browser width, but rather offset slightly to the right. In order to have it centered, we need to assign this same (new) width to the “body” container of the page:
/* new definitions in Styles.css */
.pageBackground, .pBack { /* body */
…
width: 1300px; /* override default attribute */
}
Also, the logo and horizontal menu are not quite left-aligned with this new wider panel. To correct this, we need to increase the widths of the respective containers of the logo, menu, and page-level buttons (e.g., “Save” and “Cancel” buttons towards the bottom of the page):
/* new definitions in Styles.css */
.logoBG { /* inner header container */
…
width: 1300px; /* override default attribute */
}
.MLMmenuAlign { /* horizontal menu container alignment */
…
width: 1300px; /* override default attribute */
}
.pageButtonsContainer { /* page buttons container */
…
width: 1300px; /* override default attribute */
}
The resultant wider panel appears as shown below, with the other elements of the page (logo, menu, page-level buttons) appropriately left-aligned with the panel:
