Hide the sidebar, footer and all widgets on Blogger pages-create a simple page

This tutorials explains how to hide the sidebar, footer, even the header if you like, with all their widgets, on specific static pages. The given code will be inserted directly in the static page and will affect only the page it is inserted in. No template editing is needed.

This way you can create a clean, simple page, let's say for a gallery or whatever purpose you need one.
Blogger's flexibility and permission to design your page as you like it is one of the main features for which so many people prefer this platform.

The implementation of the code in this tutorial is much easier and clearer (I hope) but it will change only one single page.
To hide the sidebar and other elements on all pages/posts please go to my two previous tutorials about hiding the sidebar on both layout and designer templates.

With this tweak it is also much easier to create a different design for each of you static pages, with just a few lines of code.

Here we go but first things first:Demo

Hide all widgets contained in header, sidebar and footer

Step 1. Identify your template:
  • Go to Design | Edit Html and look for this word in your template with the search feature of your browser (Edit menu | Find or Ctrl+F) "fauxcolumns"

  • if you find it, you have a new (designer) template,

  • if not, you probably but not necessarily have an older (layout) template.
You will find the code for both template types bellow in differently colored boxes.
Step 2. The basic code:Now that you know your template type, you can select the code that is right for you.
We will hide all widgets in one step by hiding the container they are situated in, like header, sidebars, footer etc.

2.1. Open a static page in the editor or create a new page; work in HTML mode,
2.2. Select from the following two codes the one that is right for your template; the two codes do the same job but the one in the white box is for older (layout) templates and in the yellow box is the code for newer (designer) templates.
If there is only one code than it is the same for both template types.
2.3. Copy and insert one of the following codes directly at the top of your static page, before the content, not in the template, exactly as you see it.

Code for older, layout templates:
<style type="text/css">
/*<![CDATA[*/
#header-wrapper,#crosscol-wrapper,#sidebar-wrapper,#footer {height: 0; visibility: hidden; display:none;}
#main-wrapper{float: none; width: 100%; margin 0; padding: 0;}
/*]]>*/
</style>

Code for new templates:
<style type="text/css">
/*<![CDATA[*/
.header,#crosscol,.main-inner .column-right-outer,.main-inner .column-left-outer,.footer-outer, {height: 0; visibility: hidden; display: none;}
.main-inner .columns {padding-left: 0px; padding-right: 0px;}
/*]]>*/
</style>


Now write your page content if it is a new page, preview and publish or update your page.
The code will produce different results according to your own template but it will affect only the specific page it is inserted in, nothing else. Experiment on a newly created page or on an existing one and customize it to your liking. I've included a few customization ideas in the final code, down the page.  Try them, nothing can go wrong.

We're done here, unless you have widgets to hide in the main area too.

Step 3. Hide all widgets in the main section

What else we may want to hide? In case you have any widgets in the main section that you would like to hide, like ads in widgets or Linkwithin widget, just insert the specific widget id in the same line as the other hidden elements. First you have to find out the id of that widget. These widgets usually don't have a title, so

How to find out the widget id?

To keep it short and easy, open your widget for edit from the quick edit wrench and give the widget a title, let's say "My ads" (temporary). Now save the widget and go to Design |Edit Html. Don't click the expend widget template but find with your browser the new title you just gave the widget. It will look something like this:
<b:widget id="HTML39" locked="false" title="My ads" type="HTML">
There you have your widget id highlighted in red, with its own numbering, of course (not 39). See bellow how to insert it near the rest of hidden elements.

Customize the look of the page - Layout fine-tuning

See how the page looks like and read along for customizing it, if needed, like:
  1. Restrict the main area, as now it spreads over the entire width of the page (code for both template types):
    .post {width: 80%; margin: 0 auto; padding: 0;}

  2. Change the background of the content area and the text color, also add some space around the top of the content:
    #main-wrapper{background: #ffffff; color: #000000; margin-top: 100px;}
    .content-inner {background: #ffffff; color: #000000; margin-top: 100px;}
  3. Align the title to the center:
    .post h3 a {text-align:center; padding:15px;}
    .post-title {text-align:center; padding:15px;}

  4. Hide Linkwithin widget: #lws_0

  5. In case you see some vertical or horizontal lines crossing the page, those are left over borders from the sidebar or some other element. Check which element has borders and hide them. The example bellow is for the sidebar:

    #sidebar-wrapper {border: 0;}

    .fauxcolumn-left-outer .fauxcolumn-inner { border-right: none; }
    .fauxcolumn-right-outer .fauxcolumn-inner { border-left: none; }
All these customizations are optional and I've included them in the final code, in case your page needs a facelift.

Final code:

<style type="text/css">
/*<![CDATA[*/
#header-wrapper,#crosscol-wrapper,#sidebar-wrapper,#footer,HTML19,#lws_0 {height: 0; visibility; hidden; display:none;}
#main-wrapper{float: none; width: 100%; margin-left: 0; margin-right: 0; margin-top:100px; padding-left: 0; padding-right: 0; background: #ffffff; color: #000000;}
.post {width: 80%; margin: 0 auto; padding: 0;} .post h3 a { text-align: center; padding:15px;}
/*]]>*/
</style>

<style type="text/css"> /*<![CDATA[*/
.header,#crosscol,.main-inner .column-right-outer,.main-inner .column-left-outer,.footer-outer,HTML19,#lws_0 {display: none;}
.main-inner .columns {padding-left: 0px; padding-right: 0px; background:none;} .content-inner {background: #ffffff; color: #000000; margin-top: 100px;}
.post {width: 80%; margin: 0 auto;}
.post-title {text-align:center; padding:15px;}
/*]]>*/
</style>

Select the customizations you like and delete the rest from this final code. All values can be changed (color codes, width, etc.), I highlighted a few of them in blue, you find the rest.

Step 4. Add a menu to this page

But what if you still want a menu somewhere on the page, with a few links?
I added this last optional step as an answer to a reader's question. A very good question indeed!
Please read the next tutorial if you would like to have a few links in a menu, on this simple page.

This would be all for a normal Blogger template.
See also the other two tutorial, mentioned in the first part of this one, you will find many examples, demo pages and also answers to your questions.
If you still have questions, please ask.

Sometimes you want to hide the main widget itself (main section) in order to create a separate archive page or label (category) page.
"The best angle from which to approach a problem is the Try-angle."
~unknown author

20 comments:

Theresa Tandoc said...

Hi. I've been meaning to do this for my blog and your solution was so easy to follow! Thank you so much.

One thing I'd like to ask is how do I show links to my pages in the static page itself with your code integrated in it?

My pages are shown as sidelinks and I'd like to retain them in the custom static pages.

Again, thanks for a great solution.

maiaT said...

Theresa, there are so many possibilities and it is not allowed to write code in the comment.
So, I wrote a new tutorial on this, click on the post "Create a menu for a simple static page", in the sidebar.

Ask if something is unclear.

Theresa Tandoc said...

Thanks! You're an angel.

maiaT said...

You're welcome!

EngineeringBuds.com said...

Thank you very ...for sharing good tips and tricks ..1

The Queen said...

I'm not really understanding this one. Normally I can follow right along with you.. but this one totally confuses me. Where do I put what code?

maiaT said...

The queen,

Forget everything you've read before and just follow these steps:
1. Open your static page in the editor just like when you create or edit a page.
2. At the top of the static page in question, before the page content, insert one of the above codes (2.1. or 2.2.), according to your template type.
After the code write your content (if it's a new page) and publish it.
That's all.
3. Note that this code will affect only this one page; this way you can style each of your pages individually and make them all different from the rest of your pages.

This link takes you to the explains in the post.

GROM said...

brilliant! finally something that works for me! The only thing I couldnt do was using widget/gadet ID in the main code - it did nothing.

However I was able to do that by simply adding new separate #HTML1 display: none codes below for each gadget.

Tahnks again

Akash Maharjan said...

I can see a vertical line.. but i cannot figure out the element of which it is the border.. :( help!

maiaT said...

Akash Maharjan,

The blue border on your pages comes from here:

}
.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid #eeeeee;
}
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid #eeeeee;
}

correct these to 0, like so:
border-right: 0;.......................

You don't say what do you want to achieve but if you want to hide the sidebar on your pages, use this tutorial with your template.
1. First delete whatever changes you have made to your template;
2.Then apply the changes from the tutorial mentioned at 1;
3. If you still see the blue border, add the code with the corrected borders to those found in the mentioned tutorial.

I hope, this will fix the problem.
Let me know......!

Hobart LeSnide said...

How would one go about adding a simple "Home" link to a static archive page that has everything else hidden?

I left the tabs, as a measure for a place for visitors to "click" their way out, but I'd prefer a simple link back to the main content. Hopefully this makes sense… and cheers for the tutorial!

Maia Tamas said...

Hobart LeSnide

Please have a look at this demo page, it has a Home link at the top.
If this is what you want, you can copy the code from the page source.

We could save some time if I could see the page but you have no blog linked to your profile.

Hope this helps.

Jessica Brooks (coffeelvnmom) said...

I've tried this many times and continue to receive this message: Your HTML cannot be accepted; Tag is broken: BR

I've tried to paste it right on my own page, above my content, in draft mode. It will not accept it. :(

Maia Tamas said...

Jessica,

There is no HTML here, these are CSS codes.
You probably inserted the code in "compose mode".

My mistake, I should have mention to
switch the editor in HTML mode.

I hope it works now for you too.

Evi Ou said...

perfect post. Thank you!!

Miss Cassandra said...

Does this code still work? It's not doing anything on my blog.

Maia T said...

Miss Cassandra,

It works for Blogger, not for Weebly.
Have a look at this tutorial too.

Johnny Bigfoot said...

Where in the code would I put "#sidebar-wrapper (border: 0;}" or "#lws_0"

Maia T said...

Please read the first part of the tutorial carefully, then under
Step 2. The basic code:
2.3. Copy and insert one of the following codes directly at the top of your static page, before the content, not in the template,

The #lws_0 is the Linkedin widget, if you don't use it, you don't need to include it in the code.
Under the "Final code" I've included many changes but you may not need all of them, so delete what you don't need.

You may use #sidebar-wrapper {border: 0;} only when that is your case explained at e., like this:

"Final code"

#header-wrapper,#crosscol-wrapper,#sidebar-wrapper,#footer,HTML19,#lws_0 {height: 0; visibility; hidden; display:none;}
#sidebar-wrapper {border: 0;}
|
|

Johnny Bigfoot said...

I got it! Thanks!

Post a Comment

Thanks for taking the time to comment.
Please don't leave link in your comment. Thank you.

Search for photos, macro photos or paintings.

Related Posts Plugin for WordPress, Blogger...
Do you want to create a separate archive page for your blog too?
If yes, click the link above to go to the tutorial.