Control your Layout editor’s layout

Hello Readers,

I was going through the stock dots dark template when I came across a section labeled “Page structure tweaks for layout editor wireframe” just before the closing skin tag in the template head. Soon I realized that I can use this section to modify the looks of my layout editor in the following section:

Template > Page Elements > Add and Arrange Page Elements

For those of you who couldn't follow me, here is a visual of what I am referring to:


After converting to a three-column layout in my dots dark template, for many months my layout editor was in a mess. This happened because I changed my template’s outer-wrapper width such that there is no wastage of space on a typical 1024x768 resolution screen or in other words I stretched the template to fit snugly :) I did not bother my self with the layout editor and learnt to live with it.

Here’s how my layout editor looked after switching to three columns and then the widebar layout. Call it an example of a bad layout in the layout editor:


However, after the recent switch to the lighter and more legible dots template, I discovered this section of the template and found out that I can completely control the looks of the layout editor from within the template code. Here’s how the code looks:


Here’s my modified code to get the layout-editor in order:

/* Page structure tweaks for layout editor wireframe */

body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper { 
  padding: 0;
}

body#layout #outer-wrapper { 
  padding: 0;
  width: 765px;
  padding: 0 5px 0 10px;
 }

body#layout #sidebar1-wrapper { 
  padding: 0;
  width: 150px;
 }

body#layout #sidebar2-wrapper { 
  padding: 0;
  width: 170px;
 }

body#layout #widebar-wrapper { 
  width: 290px;
  padding: 5px 10px 0 5px;
 }

body#layout #widebar { 
  padding: 0;
  width: 290px;
 }

body#layout #main-wrapper { 
  padding: 0;
  width: 360px;
  padding: 5px 10px 0 5px;
 }

body#layout #header-wrapper { 
  padding: 0;
  width: 750px;
 }

body#layout #footer-wrapper { 
  padding: 0;
  width: 750px;
 }

/* End of Page structure tweaks for layout editor wireframe */

and the result is acceptable:


Just look at the code and follow its syntax and how it’s done. Play around with the width values to get the best fit (in a test blog and with backup on original). Soon you should be able to fix layout editor issues on your own. Remember that you can drop a line here in case some thing goes wrong.