Tuesday, December 05, 2006

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.

14 comments:

Anonymous said...

Thanks man, I was facing a lot of problems after I increased my blog's width.

Vivek Sanghi said...

Manas, I am glad this tutorial was helpful to you. Cheers!

The Chicas said...

I can't figure it out. I think it's because my blog's layout is different than yours. I have my main section on the left, and 1 sidebar on the right. If I send you a copy of my blog, can you help me figure it out? thechicas@gmail.com

The Chicas said...

I can't seem to get it right. I think it's because the layout of my blog is different from yours. I have my main section on the left with one sidebar on the right. If I email you a copy of my template, do you think you could help me? thechicas@gmail.com

Anonymous said...

ur rocking vivek, thank you so much

Vivek Sanghi said...

@Welcome = أﻫﻼ ﻭﺴﻬﻼ:
I have replied to your mail. Please check and let me know.
@chaitanya:
Thanks! :)

LOUI$$ said...

Bro,

now i have something to ask,how do you did the "links" part peekaboo?And by the way do you wanna exchange links with me?

Vivek Sanghi said...

I got it from PurpleMoggy. I don't have the exact link now but will let you know. Sure I can exchange link. I probably forgo about it. Just send in your blog URL (as you want it) and the name via e-mail so that I remember to add you. cheers!

Anonymous said...

Can you help me Vivek? I have changed to Beta, but my template remains the same. I would like to change it to Beta, with the features of Beta. Could you help me?

Vivek Sanghi said...

Hello Leon. I checked out the blog named "My Thoughts" as it seems to be on the classic platform. Well you seem to be using a custom template and it will not work in Blogger beta. If you switch to blogger beta you will have to use one of the stock templates that Beta has to offer. The template switch can be made easily by going to the layout section of your blog and selecting the option to choose a different template. You can check out custom templates here:

1. Some that I know
2. Han's Custom templates
3. Ramani's modded templates
4. Hoctro's templates
5. Fluid (by hans) and modded by me

Just pick a template for your self and your are ready to roll in Blogger Beta. Be sure to read help pages at beta.blogger.com and let me know if there are any problems.

LOUI$$ said...

Thanks bro,i have email you,then i will hear some good news from you soon!lol!

Volker said...

hi,

i am just about to set up a FEED page, meaning i collect good beta hack feeds on one page for a better overview (mainly for me..) you can see it here:

http://hemdenmeister.de/betafeeds/

i added your feed as well, since i like your page very much. i hope this is fine with you. otherwise please let me know and i will remove it!

thx and have a nice weekend,

volker

Vivek Sanghi said...

@Loui$$:
Done :)

@Volker:

It's absolutely fine with me. Thanks for subscribing to my feed.

phydeaux3 said...

Very nice Vivek. Used this information to immediately solve the problem I had finally run into. Thanks!

Other posts @ Stubborn Fanatic

Click here to view all my posts.

Creative Commons License
This work is licensed under a
Creative Commons Attribution-ShareAlike 2.5 License.

However, prior permission is required before you can display any content from this blog on your site. The author reserves the right to demand removal of such content at any time for any reason. (Not applicable for back-linking)
Note: The author is not responsible for any loss of data or damages to your homepage as a result of using the hacks suggested here. Please observe all necessary precautions while modifying template code.

© 2006 Vivek Sanghi a.k.a Stubborn-Fanatic