View Admin Area Full Width

[sparky]

I finally got sick of all the wasted space on the right hand side of the admin area, so I had to do something about it.

 

In your admin/templates folder, open topmenu.tpl and insert this line at the top of the file.

{php}echo "\n<style type=\"text/css\" media=screen>";echo "\n<!--";echo "\nhtml body table tbody tr td table {    width: 100%; }";echo "\n-->";echo "\n</style>";{/php}

 

No more wasted space!!

[striddy]

No more wasted space!!

 

Thanks Sparky.

[redrat]

Thanks sparky.

[Pima]

Sparky & all,

 

Why crap it up with a table where a table is not called for???

 

Find in the style.css and change the highlighted entry

.wrapper {
[color="red"]width: 100%;[/color]
border: 0px;
padding: 5px;
border-collapse: collapse;
background-color: #ffffff;
margin-left: auto; 
margin-right: auto;
}

 

My Bad!!! Missed "Admin"

Edited February 13, 2009 by Pima

[sgrayban]

Nice one ! Not sure why this wouldn't even be the default in the first place ?

[WebWorker]

You can make the entries into style.css file found in the /admin/templates directory

 

html body table tbody tr td table { width: 100%; }
.navbar { width:150px; }

[redrat]

I just changed mine back because I didn't like it much on the 22" wide screen monitor I'm using.

 

It would actually be good to center the admin area if anyone knows how that might be possible.

[merlinpa1969]

we noticed that it breaks the dropdown buttons if you usi IE

[WebWorker]

I am not experiencing this with my CSS additions in IE7 or FF3. Can you provide more info?

[merlinpa1969]

in IE7 on an employees machine ( verified by me using IE8 ) the full width looks kool but you lose the dropdowns

[sparky]

May not suit all, depending on screen resolution, but it works on mine fine with no problems with the dropdowns at all in both Firefox3.0.7 and IE7

[Blazr]

Yeah, this addon looks ugly on a wide screen.

1920x1080 resolution. It stretches everything.

[flip]

I think this is a little unneccesary:

 

{php}
echo "\n<style type=\"text/css\" media=screen>";
echo "\n<!--";
echo "\nhtml body table tbody tr td table {    width: 100%; }";
echo "\n-->";
echo "\n</style>";
{/php}

 

The 2nd method by WEBWORKER is the best.

 

This is the top of the style.css file. note the "html body table tbody tr td table" added to the CSS style.

Also note the modification of the NAVBAR style.

 [color="#FF0000"]html body table tbody tr td table {
 width: 100%; }[/color]

[b]AND:[/b]

.navbar {
 background-color: #EFF2F9;
 padding:15px;
 font-size: 10px;
 [color="#FF0000"]width:150px;[/color]}

 

I also found it easier to modify this file (topmenu.tpl), by giving the correct formatting. (:

<div align="center">
   <span class="navbutton" onMouseOver="this.className='navbuttonover';dropdownmenu(this, event, menu1, '');" onMouseOut="this.className='navbutton';delayhidemenu();" onClick="window.location='index.php'">
       <a href="index.php">Home</a>
   </span>

   <span class="navbutton" onMouseOver="this.className='navbuttonover';dropdownmenu(this, event, menu2, '');" onMouseOut="this.className='navbutton';delayhidemenu();" onClick="window.location='clients.php'">
       <a href="clients.php">Clients</a>
   </span>

   <span class="navbutton" onMouseOver="this.className='navbuttonover';dropdownmenu(this, event, menu3, '');" onMouseOut="this.className='navbutton';delayhidemenu();" onClick="window.location='orders.php'">
       <a href="orders.php">Orders</a>
   </span>

   <span class="navbutton" onMouseOver="this.className='navbuttonover';dropdownmenu(this, event, menu4, '');" onMouseOut="this.className='navbutton';delayhidemenu();" onClick="window.location='transactions.php'">
       <a href="transactions.php">Transactions</a>
   </span>

   <span class="navbutton" onMouseOver="this.className='navbuttonover';dropdownmenu(this, event, menu5, '');" onMouseOut="this.className='navbutton';delayhidemenu();" onClick="window.location='supportcenter.php'">
       <a href="supportcenter.php">Support</a>
   </span>

   <span class="navbutton" onMouseOver="this.className='navbuttonover';" onMouseOut="this.className='navbutton';" onClick="window.location='reports.php'">
       <a href="reports.php">Reports</a>
   </span>

   <span class="navbutton" onMouseOver="this.className='navbuttonover';dropdownmenu(this, event, menu7, '');" onMouseOut="this.className='navbutton';delayhidemenu();">Utilities
   </span>

   <span class="navbutton" onMouseOver="this.className='navbuttonover';dropdownmenu(this, event, menu8, '');" onMouseOut="this.className='navbutton';delayhidemenu();">Configuration
   </span>

   <span class="navbutton" onMouseOver="this.className='navbuttonover';dropdownmenu(this, event, menu9, '');" onMouseOut="this.className='navbutton';delayhidemenu();">Help
   </span>
</div>

 

However i find at max resolution on a 19" LCD that the left column, extends larger than 150px, and then when it is made smaller, stops resizing once it reaches 150px.

Seems as though it can grow larger than 150, but not less.

Anyone know how to keep the left column static, and right column (body) to grow with browser size.

 

Thanks!