On some static pages (and not only) you may want to hide the sidebar on your Blogger blog.
In this tutorial I'll share how to hide the sidebar on designer templates on only specific pages or page types.
For Layout templates (older templates), please read the previous tutorial.
If you are not sure what template type your blog is using check your template type first.
I applied this method on one of my blogs using an Awesome Inc. template. Demo
It displays correctly in all major browsers (IE including).
Designer templates are relatively new and there are a great variety of them. Therefor, your template codes could be different from this, bellow.
1. Check your template type
Open the source code of any page of your blog, from the view menu of your browser: View|page source - in Firefox and View|Source in IE.Look for the following, yellow highlighted section of code with your browser (Find or Ctrl+F), !! they are visible only in the source code, not in your template Edit Html:
If you find these two pieces of code in your source code than you have a new, designer template and can continue with this tutorial.
.main-inner .columns {
padding-left: 0px;padding-right: 340px;
}
.main-inner .column-right-outer {
width: 340px;
margin-right: -340px;
}
The red highlighted 340 is the width of my sidebar. You will have some other value here, it doesn't matter.
2. Remove the sidebar-insert this code
No matter what is the width or your sidebar, the following code will hide the sidebar, anyway:Step 1. Back up your template!
Step 2. Go to Dashboard | Design | Edit Html.
Step 3. Copy one of the following codes according to your needs and paste it right above
</head>3.1. Remove the sidebar from a specific post page or static page:
<b:if cond='data:blog.url == "http://your_page_url"'>
<style type='text/css'>
.main-inner .columns {
padding-left: 0px;
padding-right: 0px;
}
.main-inner .column-right-outer {
display: none;
}
</style>
</b:if>
<style type='text/css'>
.main-inner .columns {
padding-left: 0px;
padding-right: 0px;
}
.main-inner .column-right-outer {
display: none;
}
</style>
</b:if>
There is an easier way to hide the sidebar, footer and/or header on individual static pages only, not on all pages. Please click that link if interested.
3.2. Remove the sidebar from all static pages:
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
.main-inner .columns {
padding-left: 0px;
padding-right: 0px;
}
.main-inner .column-right-outer {
display: none;
}
</style>
</b:if>
<style type='text/css'>
.main-inner .columns {
padding-left: 0px;
padding-right: 0px;
}
.main-inner .column-right-outer {
display: none;
}
</style>
</b:if>
3.3. Remove the sidebar from your home page:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.main-inner .columns {
padding-left: 0px;
padding-right: 0px;
}
.main-inner .column-right-outer {
display: none;
}
</style>
</b:if>
<style type='text/css'>
.main-inner .columns {
padding-left: 0px;
padding-right: 0px;
}
.main-inner .column-right-outer {
display: none;
}
</style>
</b:if>
3.4. Remove both sidebars (left & right) if you have two of them:
- From the above three codes choose the conditional tag corresponding to your page type.- insert in that code the two, yellow highlighted extra lines for the second sidebar, like so:
<style type='text/css'>
.main-inner .columns {
padding-left: 0px;
padding-right: 0px;
}
.main-inner .column-right-outer {
display: none;
}
</b:if>
.main-inner .columns {
padding-left: 0px;
padding-right: 0px;
}
.main-inner .column-right-outer {
display: none;
}
.main-inner .column-left-outer {
display: none;
}
</style>display: none;
}
</b:if>
Step 4. Replace the code in red with your own page url, in case you use the first code (3.1).
Step 5. Change the code in blue to "left", if you have a left sidebar in code 3.2 and 3.3.
Step 6. Preview the page to be sure there is no mistake and save your edits.
4. Center the page title
- The post/page title is aligned to the left by default, in the template. On this new, wide page you may want to center it for a better look.
- As static pages have no date header you could create some space around the title as well, for a more pleasant look.
- If so, insert this extra line of code after the yellow highlighted lines..post-title {text-align:center; padding:15px;}
There are probably many ways to hide the sidebar. I find this method easy and fast, I hope it works for you too.
Customize - style static pages, hide sidebar in Blogger
Hide all widgets on Blogger pages-create a simple page New!
Different ways to display static pages
Difference between static pages and post pages.
Managing static pages in Blogger blogs
Style static pages menu list-customize pagelist navigation
Christmas icons-Decorate your blog!
Hide all widgets on Blogger pages-create a simple page New!
Different ways to display static pages
Difference between static pages and post pages.
Managing static pages in Blogger blogs
Style static pages menu list-customize pagelist navigation
Christmas icons-Decorate your blog!
45 comments:
You know a lot about coding Maia!
Wishing you a happy new year.
I've tried this solution and tested it on the specific page I was hoping to hide the sidebar, but unfortunately, it's still showing.
I've tried a few things:
1. replaced " with an actual "
2. Tried different URLs
3. Then I realized - you are referencing .main-inner, which I don't have in my template. I have something like this:
#sidebar-wrapper {
background:$sidebarBgColor url(urlpath/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Any idea what section I would need to replace?
Your template is a layout template, this tutorial is for designer templates.
There is a link at the end of the first paragraph of this post that will take you to the right tutorial.
Follow the steps exactly and you are done in two minutes.
Please ask if you have further problems.
Thanks. I checked the layout template example and presto - done in 2 minutes as you said. I got this to work for multiple pages, but only by simply copy/pasting/updating the URL.
Is there a cleaner way to do it in one section? Otherwise, I'll leave it as it is with two sections.
What do you mean by section?
You can change the styling of posts/pages by type with a single code, meaning:
- one style for static pages;
- different style for post pages;
- another style for the home page,
but if you want each of them to be one of a kind than you must do these steps for each of them.
The "section" I'm referring to is your code snippet. I have 10 static pages, but only want to hide the sidebar for two specific pages, so I entered the code snippet in twice; once for each page.
The other 8 static pages I want the side bar there (at least for now). I didn't know if I could simply put a comma in between the urls and have it as one "section" aka snippet of code like this:
(b:if cond='data:blog.url == "your static page url", "my second page url"')
(style)
.header,.sidebar,.footer {display:none;}
#outer-wrapper {width: 660px; padding:0;}
#main-wrapper{background:url(background image url); width: 660px; margin: 0;}
.post {padding: 20px; }
.post h3 a {font-size:160%;}
(/style)
(/b:if)
What I actually have done is this (and it's working for now):
(b:if cond='data:blog.url == "your static page url"')
(/style)
.sidebar,{display:none;}
#outer-wrapper {width: 660px; padding:0;}
#main-wrapper{background:url(background image url); width: 660px; margin: 0;}
.post {padding: 20px; }
.post h3 a {font-size:160%;}
(/style)
(/b:if)
(b:if cond='data:blog.url == "my second page url"')
(style)
.sidebar{display:none;}
#outer-wrapper {width: 660px; padding:0;}
#main-wrapper{background:url(background image url); width: 660px; margin: 0;}
.post {padding: 20px; }
.post h3 a {font-size:160%;}
(/style)
(/b:if)
1. No, it's not possible to use a comma, that would be too beautiful.
2. Yes, this is what you have to do for each of them, except the width 660px is just an example.
You have a 1ooopx width template, so you can make the main section as wide as you wish.
I've just updated the tutorial with an explain about using percentage for width.
If you have more questions, please leave them at the appropriate tutorial. It could be useful for others too.
Thanks,
Very useful information. It's work
Sharp,
As you have a left sidebar, change the world "right" to "left" in the following line:
.main-inner .column-right-outer {
display: none;
}
Much luck!
You rock! Thanks.
Thank you so much for you post. I'm an occasionally blogger and am having some fun with it but when it comes to managing the look and coding any time I want to change something I get really stressed and nauseated and anxious. I tried your code to get rid of the side bar in all my added pages but not the main and it looks to be working but there is still the thin line separating the columns, you can see on the "About" page. I would be very grateful if you had any insights about what to do about that.
By the way I peaked at some of your photos. They're stunning! Had a particular liking for the two little birds in a puddle.
Kristin,
Those are column borders.
In the code you've already inserted, add these few lines of code, just above the closing style tag:
--------------------------
.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: none;
}
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: none;
}
--------------------------
and you will not see them any more.
That's all. Nice page.
Maia,
Thank you so much! That worked perfectly.
Also, I tweeted a link to your gallery page with the 2 birds in a puddle.
Am @causalitybrunch if you're curious. Am a real newbie at that too but also fun...though really I should be cleaning the bathroom before my parents get here....
Thanks again, Kristin
You are welcome.
Many thanks for the link, very kind of you.
I have been trying to delete the side bars for some time now, I have tried different codes in different places (all the codes listed on this forum plus others), above and below (/head>, below (/b:skin>... Could you please help? I am attempting to create a pricing page, therefore no side bar is needed...Please let me know if any other information is needed...
Thanks in advance
Custo-Minz,
You've already asked this question on the other tutorial for layout templates and I've posted the answer with a screenshot days ago.
You never came back to see it, so what is that you really want?
This is really useful. Thanks so much for sharing! It's made a big difference to my static gallery page. A really helpful tutorial!!!
I am pretty sure I've used your method before. I changed templates and am having trouble makeing it work. www.thespeakerguys.com STORE page still has the columns, but they have moved off to the right of the main body.
anyone have an idea on how to fix this?
Thanks!
Speaker Guy,
Spell check is important, especially when writing code.
Try outer instead of outter, but this is not your only problem, so:
- delete the code you've already inserted in your template
- copy the first code and paste it in Notepad
- replace your page url
- delete the extra line that Tynt inserts in the copy (the one with read more...)
- now copy the code from Notepad into your template
The code is O.K., someone checked your page.
hey..i followed the instructions given above and could remove the sidebars and center the post title as well. But the post body is aligned to the left only. how do i bring it to the center?
page link:
http://pharmaceuticalregulatoryaffairs.blogspot.com/p/blog-page_21.html
thanks a ton :)
Hi. i posted a query asking to align the post body in the center. also can you please instruct on how to align the page links on the home page to the center?
thanks :)
Pratik Thakkar,
Your page is perfectly aligned to the middle on my monitor. Clean your browser's cache and see the result.
Glad to be helpful.
hey..thanks for the help..i just now aligned it to the center from the page editor. how do i align other things like the footer labels, header etc to the center?
I have no idea how could you center your main column from the post editor but it's good that you managed to do it.
1. You header consists of just the title and that is in the middle.
2.for the post footer insert the following line of code after the lines you've already inserted, before the closing style tag:
.post-footer {text-align: center;}
That's all.
from the post editor i just selected the thing and chose center alignment like we do for the text..
thanks for the footer thingy :)
blog looks all aligned now..
btw great pics on ur blog...
Save With Me 24/7, go to the other tutorial, for layout template. There is a link at the beginning of this page that will take you there.
You will find there instructions in a comment for your template.
Hi,
Thank you for these tutorials.
I wonder if is possible to get this comment widget in the bottom, where it used to be not too long ago.
Please take a look of my screen shot to illustrate better my question.
Thank you very much!
Dusty,
from what I understand from the screenshot, you are using the full page comment form and you want to have it embedded bellow post.
If this is what you want to change, than go to Dashboard/settings/comments.
On this page you will see the options for the comment form placement. Click the third radio button that reads "Embedded bellow post".
Save your changes and you are done.
Hi maiaT,
Thank you for your prompt answer.
I understand what you say, but I don't want to use the embedded option.
I want the post exactly as my shot shows. In other words, the plain white page that you get when selecting "Full page" or "Popup window" from the drop down menu.
It used to have, not too long ago, this "Leave Your Comment" widget at the bottom, next to the last post, but now is at the top.
Is there still a way to change it to the bottom using any of the "Full page" or "Popup window" options?
Thank you for your valuable help, time and comments.
For some reason my old coding to exclude the sidebar on my blog's static pages stopped working. Your coding worked like a dream and saved me a lot of anguish. Well done and thank you very much.
You're welcome Rob. I'm glad it worked.
i have applied your code to my blog & nothing is happening. i am using journalist template. can you please guide me to remove sidebar & make it full width.
vardhan,
These tutorials are for standard Blogger templates and Journalist template is not one of them.
I can't help you unless I see your blog's source code but your profile is hidden.
You could also ask the guys at BTemplates (the template author) to help you out.
Amazing!! Usually when I attempt to following the instructions in a tutorial I end up messing something up OR it just doesn't work as advertised. SURPRISE - got the desired result on the first try! Thanks
Perfect. I used your code, saw a thin border still in place. But when I scrolled through the comments I found an immediate fix. Quick, easy, awesome. Thanks!
You're welcome Leiah. Your About page looks great.
Hi maiaT,
I am a new blogger and I really appreciate blogs like these. My concern is my layout is not from the standard. So I think it would not work on my blog. I'm no expert so i really really need a hand on this. Thanks!!
TickleMyToes,
Your two blogs linked from your profile are both Blogger templates, the one from "Ourbloggertemplates" too. They both can be modified but I can only advise you, you have to do the changes yourself.
This tutorial could help you with both templates but you should read a bit about the Blogger template structure first.
Please, don't try to modify your template if you are not somewhat familiar with the template design.
Please help me. I have a blog and I want a page to remove the side bar. This is the page. I saw your article in the web and I was searching for an answer with no results. Please help me. This is a third party template:
Ayra Rousse,
Yes, your template is different, so you are doing this on your own risk.
Back up your template!!!!!!!!!
Copy the code from 3.1. and paste it to Notepad
After that do the followings:
Step 1. In the first line, replace the code in red with your page URL,
Step 2. Replace everything between line 2 - 10 with this code:
#secondary.widget-area.grid_2 {display:none; width: 0px;}
#primary.content-area.grid_4 {width: 800px; float: none; display:block; margin-left:auto; margin-right:auto; important!}
Step 3. Copy the new code from Notepad,
step 4. Find the clothing style tag in your template and paste the new code after this tag.
Step 5. Save your template and you are done.
You will have to re-write the big text from the beginning of the post, because it is styled inline.
Have fun!
You may want to follow this blog if it works ?!
Hi MaiaT,
Thanks for putting lots of work into this. Really helpful.
I think I have successfully used one of your codes before, but now I'm probably missing something.
I'm using Awesome Inc. template too, it doesn't work. I made sure I copied it in the right place. I replaced the link with my page url, I made sure it's the right one column-wise, but it's still showing.
Could it be that I'm using png image as semi-transparent background for the sidebars?
Hi Katy,
No, the png images have nothing to do with this. The code removes the sidebar as a container with everything in it.
The active blog on your profile uses a "Simple" template (in both languages). Where is the blog with the Awesome Inc. template?
Hi Maia, I really appreciate that you got back to me. I am experimenting with a non-public test blog. I have lots of things to solve before I change my public blog. Would it be easier if we contacted by email?
Katy,
As you see in the demo above, this code works with the Awesome Inc. template.
I have to see the source code of your template to figure out what was going wrong there but I can't do that with a private blog or in an email.
Unfortunately we have to wait until you go public with the blog, sorry.
its really nice and helpful post. keep it up and thanks for sharing such a nice post
Post a Comment
Thanks for taking the time to comment.
Please don't leave link in your comment. Thank you.