Hide the sidebar in the new Blogger templates

This blog uses the new "Blogger in Draft" template, Picture Window. I've also played with the Awesome Inc and Watermark templates. Unlike Minima, and other older templates, the new templates use positioning to create a two-column or three-column layout. Conditionally hiding the sidebar on a Blogger Page requires a different approach.

If it worked, the simplest method would be to conditionally modify <b:variable> declarations at the beginning of the <b:template-skin> section. I tried several variations of doing this, without much success. However, it is possible to hide the sidebar on a specific Page by using a Blogger conditional that overrides existing CSS for column widths.

The overriding CSS can be placed after the closing </b:template-skin> tag and above the closing </head> tag. Alternatively, add it as an internal style sheet in a particular Blogger Page, before other content. I have tested both methods in the Picture Window and Awesome Inc templates.

If your template is slightly different, or uses a different number of columns, you'll need to adjust the CSS posted below to work with your layout. The concept remains the same: Hide one or more sidebars and make the content column wider, so that it fills the freed space.

Two-column Awesome Inc or Watermark template

Just after the closing </b:template-skin> tag, add the following CSS, which will override existing styles and suppress the right sidebar when the URL matches the Blogger conditional. To make it easier, copy and paste the styles to be changed from the existing CSS code in <b:template-skin>. Replace the url in the sample code with the url of your own page:

<b:if cond='data:blog.url == "http://blog.blogspot.com/p/page.html"'>
<style type='text/css'>
      .main-inner .columns {
        padding-right: 0;
      }
      .main-inner .fauxcolumn-center-outer {
        right: 0;
        _width: expression(this.parentNode.offsetWidth -
            parseInt("$(main.column.left.width)") + 'px');
      }
      .main-inner .fauxcolumn-right-outer {
        width: 0px;
      }
      .main-inner .column-right-outer {
        width: 0px;
        margin-right: 0;
        display: none;
      }
</style>
</b:if>

In the style for _width, above, I omitted:
- ParseInt("$(main.column.right.width"))
because we are making the right sidebar 0px wide, and there's no need to subtract 0 from the width of the main column. If you don't have a left column, left.width is also 0px wide, and you can shorten the expression to:
_width: expression(this.parentNode.offsetWidth + 'px');

This code is in use on my sandbox test blog, with the Watermark template. I also used it there with Awesome Inc. I think it would also work with the other templates, using a simple two-column layout.

If you don't want to mess with the template, add the following internal style sheet to the Blogger Page in which the sidebar should not display. I recommend removing line breaks in the style sheet so that it's all on one line, particularly if your settings allow Blogger to add break tags in the post editor:

<style type="text/css"> 
 .main-inner .columns {padding-right: 0;}
 .main-inner .fauxcolumn-center-outer {right: 0; 
 _width: expression(this.parentNode.offsetWidth - 
 parseInt("$(main.column.left.width)") + 'px');}
 .main-inner .fauxcolumn-right-outer {width: 0px;} 
 .main-inner .column-right-outer {width: 0px; margin-right: 0;
 display: none;}
</style> 

Picture Window template

I am using the following overriding CSS on this blog, which combines sidebars on the right. The "double" sidebar uses 390px of layout width. By hiding the outermost sidebar, #sidebar-right-2-2, it requires only 220px on my Real Tea page. To make modification easier, copy and paste the styles to be changed from the existing CSS code in <b:template-skin> to the new <style> tag. Remember to change the url to match your blog and special page:

<b:if cond='data:blog.url == "http://blog.blogspot.com/p/page.html"'>
<style type='text/css'> 
.main-inner .columns {padding-right: 220px;}
.main-inner .fauxcolumn-center-outer {right: 220px;}
.main-inner .fauxcolumn-right-outer {width: 220px;}
.main-inner .column-right-outer {margin-right: -220px; width: 220px;}
.main-inner .column-right-inner table.section-columns td 
  {display: none;}
.main-inner .column-right-inner table.section-columns td.first 
  {display: inline; width: 100%;}
#sidebar-right-2-2 {display: none;}
</style>
</b:if>

Again, if you don't want to edit the template, add an internal style sheet to the Page in which the sidebar should not display. I recommend removing line breaks in the style sheet so that it's all on one line:

<style type="text/css">
.main-inner .columns {padding-right: 220px;}
.main-inner .fauxcolumn-center-outer {right: 220px;}
.main-inner .fauxcolumn-right-outer {width: 220px;}
.main-inner .column-right-outer {margin-right: -220px; width: 220px;}
.main-inner .column-right-inner table.section-columns td 
  {display: none;}
.main-inner .column-right-inner table.section-columns td.first 
  {display: inline; width: 100%;}
#sidebar-right-2-2 {display: none;}
</style>

Test, test, test

Backup your template before making changes to it. Here, we are simply adding a short code block to the template. To "roll back" delete the added code. It's easiest to test an internal style sheet in the Page you need to change first. If all is well, then you can move the CSS to the template itself. To avoid errors, paste the styles to be modified in your new style sheet, and then adjust the relevant pixel values.

Caution: Adding an internal style sheet to a post may not be such a great idea because it really doesn't belong in your RSS or Atom feed.

I hope this gives you some ideas on how to hide a sidebar in your beautiful new Blogger template for a special page or two!