Apply different layout/styling to static pages

by Greenlava

Finally Blogger has come up with the much awaited static pages feature. Blogger simply refer to them as Pages. You can create up to 10 static pages, perfect for your About Me and Contact pages.

However, a Page will look just like homepage or any other page. Would it be nice if you can change the layout, making them look more like pages and less like posts? Maybe you want the sidebar or footer removed? Well good news, you can. Look at a sample Page here, compare it with the homepage, and notice the difference. The same goes to my SEO Tools, FAQs and Support pages.

Okay let’s start with the tutorial,

I. Applying the conditional styling

Go Dashboard > Design > Edit HTML.
Back up your template.
Find this code in your template HTML:
- <body> -if you are using Layout templates, or
- <body expr:class='"loading" + data:blog.mobileClass'> -if you are using Designer template.

Copy the code below and paste it right after the code step 3:

<!-- Static page styling Start-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}
</style>
</b:if>
<!-- http://www.bloggersentral.com -->
<!-- Static page styling End -->

For Designer template, replace code line 5 with:

.main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;}

What goes into the <style>…</style> tags are CSS rules. It depends on what we are trying to change and differs between templates. In the code above, we
- Remove blog pager, blog footer, post footer, feed links and sidebar. This is done in code line 4.
- Widen the post area to fill up the spaces vacated by the sidebars. This is done in code line 5. If you want to do this too, find out what’s your header’s or header-wrapper’s width and apply it here.

II. Identifying and adding your own elements to the code

Your elements’ Ids and classes maybe different from the ones given in the code above. You can find yours by going through your template code. To get an idea what to look for, here’s a sample code snippet, taken from Blogger Sentral’s template:

<div class='side-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Popular Posts' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

As you can see an element, be it a division, a section or a widget is assigned an ID and/or a class. To remove it from the Page, simply add the ID or class to the selector list in code line 4 in step 4. For an ID you need to add “#” prefix and for a class, add “.” as prefix.

Update: There is an easier method of finding Blogger widget and section Id’s.

For example, if you want to remove the “Popular Posts” widget, all you have to do is add #HTML4 to the selector list; To remove the the whole lower left sidebar (which holds the Popular Posts and Labels widgets), add #sidebar2 to the list.

III. Styling pages individually

(added Oct. 2010)

Using the static_page conditional tag as explained above will apply the styling on all static pages. Now what if you want to style only one page. Let’s say for instance you want to change the background color of your About Me page to pale green, while leaving all other pages as they are. Can you do that?

Yes you can, and it’s easier than you might think.

Go to Postings > Edit Pages and select the About Me page.
Switch to HTML mode.

Insert you CSS code on top of the page content, like so:

<style type="text/css">
.content-inner {background-color: palegreen;}
</style>

YOUR STATIC PAGE CONTENT HERE

Yes, you don’t need any conditional tag. This code only resides inside that one page, therefore it won’t affect other pages.

Enjoy!

Subscribe to our blog via email or RSS to receive free future updates.

Update 26 Oct 2010
Add Styling Pages Individually.

351 comments to "Apply different layout/styling to static pages"

«Oldest ‹Older 201 – 351 of 351 Newer› Newest»

Greenlava, February 1, 2011 at 11:54 PM: @Belinda Keller
Yes, that's what this tutorial is all about.
Just follow step I, from 1 to 4. Make sure you choose Designer template option.
Melanie, February 6, 2011 at 9:59 AM: Hi! I 've read through all the posts and tried a few things, but I can't seem to get the white lines off my static pages. (Where the columns are on the 1st page.)I refuse to sleep until it's fixed. Help! (I'm really tired.)
Melanie, February 6, 2011 at 10:00 AM: I forgot to supply you with webpage. thefrugalyaya.blogspot.com
Greenlava, February 6, 2011 at 1:39 PM: @Melanie
I admire your determination :)
Read reply #111.
Melanie, February 6, 2011 at 9:41 PM: Thank you! I tried that one last night and the lines were still showing up up in the preview. This time I tried to save the template and it was gone. Now I need to re-find the post that helps get rid of the little white square on a static page
Sheena, February 8, 2011 at 2:30 AM: I'm hooked on your website...and I have another question. How do I separate the widgets in my sidebar, making them each have their own little white boxes?
Sheena, February 9, 2011 at 1:52 AM: Revising my previous question...
How do I create a colored background behind only my sidebar titles (like yours are gray) so that I can sort of get a separation between each widget?
Sheena
Greenlava, February 9, 2011 at 7:06 AM: @Sheena
Add this snippet in the CSS box:
.sidebar h2 {background-color:COLORCODE;}
AppReleases, February 14, 2011 at 12:10 PM: thanks heaps man i really needed this
Lil'Cholo, February 26, 2011 at 6:40 AM: Eh, I like the idea behind I. above but you left me wondering where the heck is line 5 supposed to be in Designer template. There are zero "style" tabs anywhere in the HTML of a designer template.

I found this: "body expr:class='"loading" + data:blog.mobileClass'" in the html code but after that, I'm like now what...there are no line numbers anywhere.

It's a great idea but you left my head spinning with no real answer.

lilcholo_99@yahoo.com
Lil'Cholo, February 26, 2011 at 6:43 AM: Hmmmm, what happened to my post?
Greenlava, February 26, 2011 at 3:16 PM: @Lil'Cholo
There are no line numbers in your template. Line numbers you see in this tutorial are for referencing purposes only.
You didn't find any style tags because there wasn't any, yet. You're supposed to add them (and there rest of the code in step 4) to your template.
Do read the tutorial carefully.
Engineered to the MAX, February 27, 2011 at 4:33 AM: Thanks for this. It's going to sweet to customize each page. I started to do this with one of my pages, and had a few questions. How do I add and/or rearrange the widgets in the sidebar? Does it just include removing all of them and then re-adding them in my page HTML in the order that I want them? Would this require me to have all of the widgets on the homepage? Can I hide certain widgets on the homepage?

Thanks for all the help. This site has truly been amazing and useful.

Thanks again
R, February 28, 2011 at 6:03 PM: Thank you so much, I'm a total noob when it comes to anything techy and had been trying to decipher RSS codes etc to get basically the effect I wanted through inserting iframes and the addition of this tutorial has made my static pages, styled individually, look so much more professional. Lifesaver!
Greenlava, February 28, 2011 at 11:23 PM: @Engineered to the MAX
What this tutorial does is simply hides the sidebar, footer etc. from static pages. The sidebar is still there, but you can't see it.
If you want to hide only certain widgets and not the whole sidebar, you need to unhide the sidebar and hide the individual widgets. This can be done by replacing .sidebar in line 4 with the ID of the widgets.
As to displaying a widget on selected pages, we have another tutorial: Display widget on specific pages in Blogger. This method actually removes a widget, not merely hides it.
Terri-Lynn, March 6, 2011 at 12:11 PM: Hi, I wanted to be able to create separate links on a static page, that lead back to the static page. For example. My static page is called recipes. On my recipes page I wanted to created links titled chicken, pasta, salad ect...can you help me with the HTML codes. I am new to blogger. see 9er-domestic.blogspot.com
Anonymous, March 6, 2011 at 11:07 PM: Hi,
Can you please let me know how to get rid of the buzz this button on the title on the static pages? I've tried .post-title {display:none;} but didn't work.

http://cockasnook.blogspot.com/p/photobucket.html
Greenlava, March 7, 2011 at 8:13 AM: @Terri-Lynn
I believe this post answers your question:
Adding a tab showing all posts of the same label
Greenlava, March 7, 2011 at 10:48 AM: @miss V
Use this snippet:
.linkopacity {display:none;}
The Crazy Crafting Lady, March 10, 2011 at 3:21 AM: Thank you so much for sharing how to do this. I now love the way my statick pages look. With JUST the info I want on them none of the sidebar crap or the footers!
Trevor, March 14, 2011 at 12:26 AM: Hi Greenlava!

The names of my different tabs automatically appear on each of the corresponding pages (i.e. "My Portfolio" which is the name of the tab also appears under the content of the tab as "My Portfolio"). I was wondering if you know how I can remove the tab title from appearing on each page. I don't know how to use HTML so it's been a little tricky for me to follow this post. Do you think you can help?

My blog is www.trevorshah.com

Would appreciate any help you could provide!
Greenlava, March 14, 2011 at 2:02 AM: @Trevor
You just want to lose the title and keep everything else?
Just replace the codes in line 4 and line 5 with this:
.post-title {display:none !important;}
Anonymous, March 15, 2011 at 2:44 PM: http://nagarjunan.blogspot.com/p/stories-by-date.html

this is my sitemap static page. i have ordered list of links. I wanted to convert these links horizontally. so, I added the style ol li{display:inline; margin-right:25px;}. After adding this css style the links in my static page r convert horizontally. But, there is a problem. All other links in my blog in all other pages were too converted horizontally. how to rectify this problem? how to give css style to my particular static page to convert only links in it horizontally? I tried your css style for particular static page called
(style type="text/css")
.content-inner {
ol li{display:inline; margin-right:25px;}
}
(/style)

yet, no use...please, help me...it is urgent...
Greenlava, March 17, 2011 at 8:36 PM: @prabhu
1. Put the content of the page in a div and give the div and ID, like this:
[div id='mysitemap']
CONTENT OF PAGE HERE
[/div]
2. The add this style
#mysitemap ol li {display:inline; margin-right:25px;}
crazychristianmummy, March 25, 2011 at 12:48 PM: I'm in a muddle! You'd think after readin over 200 comments and your instructions I'd 'get it' by now! No matter where I paste the information it just won't work. It's now doing my head in, and as it's nearly 5am I think I should try to sleep but can't until I fix this!
My blog is www.crazychristianmummy.blogspot.com, I'd like all the pages to be as you have mentioned, without the text at the top and all the stuff down the righthand side. I am a blogging virgin, so be gentle with me! RSS, HTML and all that are alien to me, can you do it for me? Please?
crazychristianmummy, March 25, 2011 at 11:30 PM: I did it! I did it! Thank you for your help, I just needed to read it CAREFULLY and NOT at stupid hours of the morning!
Greenlava, March 26, 2011 at 2:48 PM: @crazychristianmummy
I must say you did pretty good (despite being a blogging virgin);)
Cori Stanley, March 30, 2011 at 5:02 AM: Thank you for your help. Everything almost worked. But I am still getting the "sidebar" section on my static page. What am I missing? And is there a way to add the "pages" at the bottom or a "back to top" link? Thanks again for all your help. my site is http://www.hcg-losingit.com/p/faq.html.
Greenlava, March 30, 2011 at 7:46 PM: @Cori Stanley
Actually the sidebar is gone. What you see is a background image(your template is designed that way). Adding this before line 6 will fix that:
#content-wrapper {background:#ffffff;}

and here is a tutorial for "back to top" button: Adding a floating “back to top” button
The Queen, March 31, 2011 at 3:15 AM: I'm so lost..wish I could figure this out on my test blog. .don't want to play on my main blog until I figure this out on the test.. I don't understand if you have to list each of those id's a gadgets in that code somewhere to remove them? or does the code alone remove them.. If it's the code.. I messed up..
The Queen, March 31, 2011 at 3:36 AM: I got it.. thank you for answering the readers.. I just followed along with their problem until I found the fix.. thank you so much!!
The Queen, March 31, 2011 at 4:08 AM: Sort of worked. got some of the crap off some of my pages.. I'll keep working at it.. thank you..
Cori Stanley, April 2, 2011 at 10:42 AM: Greenlava, you are the greatest. Everything you just said worked perfectly. I used the "back to top" info, and even in IE, it is working just fine. It sits at the bottom. (I put it in the bottom right, and that works great.) I did not know how to create a button link, so I used the text. How can I do a button link?

Also, my FAQ page, it is very long. Is there a way to do "drop down" or "mouse over" for the individual questions? I saw your post on doing it for the nav bar, but I would like to do it on that page. Thanks for your help.
Greenlava, April 2, 2011 at 6:50 PM: @Cori Stanley
Upload your button using post editor and get the link. Follow this tutorial: Free unlimited bandwidth image hosting for Blogger blogs
As for your FAQ page, refer to this tutorial on creating a spoiler.
Bluetricks, April 9, 2011 at 12:44 PM: Thanks its helpful..!
达达, April 20, 2011 at 5:45 AM: Hello there, I have my template set to no sidebars, but would like to introduce sidebars in one of my static page,

Therefore, my question would be, is there a way for me to "engineer in" sidebars into my specific static page

* basically, the reverse effect of this tutorial. I tried working in reverse from but couldn't figure it out.

I though a crude way is to set my template back to having sidebars and removing sidebars from that Static Page, but that will bring me back to STEP #1 of my blog modifications, which makes it really difficult.

Please advice, thank you in advance. and Thank you for all the great tutorials. I am a newbie still building my first blogger blog.
Greenlava, April 24, 2011 at 12:37 AM: @达达
What you want to do is hide the sidebar (from all pages) using:
.sidebar {display:none;}
Put the code in your template's CSS, before the ]]>< /b:skin> line.

Then use method III to undo the display:none for that particular static page. Use this code (in step 3 code line 2):
.sidebar {display:block;}
Anonymous, April 26, 2011 at 6:54 AM: Hi Greenlava, Great post from you, this really help me on most of my questions since I started blogging. But I still have a problem on the footer gadgets of my search result page, I don't know how to hide it, can you pls suggest what I can do about it. My site is http://www.loveandrelationship.com.ng.
Thanks
Greenlava, April 29, 2011 at 6:59 AM: @Adetony
.footer-outer is the classname for your blog's footer. Add it in front of {display:none;}
Wayne, May 3, 2011 at 10:51 PM: Hey G, having a little trouble removing ALOT of space at the foot of the static pages, any help? Thanks!
Sahil Patel, May 4, 2011 at 1:24 PM: Its not working for me dude, can you help me out ?
My blog url : http://latestnewssavvy.blogspot.com

I just want the page to appear along with the footer theme.
I don't want the right sidebar to appear.

Thanks ! :)
Wayne, May 5, 2011 at 7:23 AM: ahhh, seemed to have fixed it by adjusting the wrapper width. As always. THANKS G!
Giant, May 11, 2011 at 1:33 AM: fantastic tutorial.
incredibly helpful.

the tags i removed from my blogger static pages were author and time.

.meta_date,.meta_author

thanks!!
Anonymous, May 15, 2011 at 12:20 AM: Hi, I've got a question that may have been answered above... but I got to almost 100 and figured I'd just ask. (smile) I see the part where you just add the coding to the satic page html section about changing the background color. What I want is to use a photo instead. I know how to do this for the entire blog with the url, just not how to change it in the coding you've got up there for the static page. Here's my blog that I've done (www.heatlandlabels.us). I just changed the header and the background I want to use is for this url: http://i1030.photobucket.com/albums/y368/BeatUntilFluffy/Heartland%20Label%20Company/backnewsfrench7.jpg. I know it's got to be simple, I just don't want to sit and play with it for hours when I can ask you. You're great!

Thanks Ahead,
Dawn
Anonymous, May 15, 2011 at 12:40 AM: I forgot to mention I'm wanting it to be a fixed image, not tiled. You know, like with the no-repeat part.
Anonymous, May 15, 2011 at 1:03 AM: I figured it out!!! LOL! I took the same coding from the body (took out the text formatting etc) and put it in and it worked. I didn't like it and took it out in the end but at least I know what to do now for a photo background on a static page.
Anthony, May 20, 2011 at 5:36 AM: Thank Greenlava, it work for me, God bless you
Karin E Jansson, June 13, 2011 at 11:09 PM: Greenlava, you have helped me before, maby you can help me this time aswell?!
I have added three new pages to my blog, two of them are never edited, but the third one "webshop" is updated on occation. I would like this page to link to three categories, not like a dropdown menu, but three different pictures that, when you click on them, link to a new page. So that I can categorize the stuff I sell in three different categories.
But I can't figure out how do do that. Can you help me?

Thanks!
Karin
Unknown, June 14, 2011 at 1:16 AM: Please excuse if this is not related, but I guess it is and you may be able to help. My site ishttp://lastingrose.blogspot.com/
The blogger template is Picture Window

I have recently implemented background images for side bar and h2 heading class. it has worked however I haven't been able to remove a nasty white border around the images in both case which gives an unfinished feel. The code for the side bar is below

.main-inner .column-right-outer [
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
background-image:url('http://capexsales.com/Sidebar_black.png');
background-repeat: repeat;
background-webkit-box-shadow: none;
background-moz-box-shadow: none;
background-goog-ms-box-shadow: none;
background-border: none;
background-margin: 0px 0px 0px 0px;
background-padding: 0px 0px 0px 0px;
background-attachment: scroll;
background-position: right top;
]
Greenlava, June 14, 2011 at 11:23 AM: @Lasting Ros
That nasty white border is a part of your image. You have to crop the border off and reupload the image.
Greenlava, June 15, 2011 at 11:20 AM: @Karin E Jansson
In post editor, click on the picture and then click on the "Link" icon.
Enter your label URL in the "To what URL should this link go?" box.
(URL example: This URL takes you to your accessories category -http://www.karinskonstgrepp.se/search/label/ACCESSOARERNA)
Dser, June 16, 2011 at 4:40 PM: Hi,

I think I read everything carefully. I also read most comments. It's not working:
http://noelanipta.blogspot.com/p/calendar.html I want to remove the sidebar so it's present only on homepage.
Code:

[/head]

[body expr:class='"loading" + data:blog.mobileClass']

[!-- Static page styling Start--]
[b:if cond='data:blog.pageType == "static_page"']
[style]
.blog-pager, .footer, .post-footer, .feed-links, .sidebar, .sidebar-left-1, #sidebar-left-1, .Gadget1, #Gadget1 { display:none !important;}
#main-wrapper {width: 100%; float:none; margin: 0 auto !important;}
[/style]
[/b:if]
[!-- http://www.bloggersentral.com --]
[!-- Static page styling End --]

[div class='body-fauxcolumns']

I tried all variants with . or #, with the name of the gadget that is on the sidebar, etc.
Thanks!
Greenlava, June 18, 2011 at 10:10 PM: @Dser
Your template is a Designer template. You need to replace the second line of the CSS rules with this:

.main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;}
Dser, June 19, 2011 at 9:34 AM: Thank you!
I have another problem now. I basically only want the widget on the homepage. I was able to remove the widget from static pages and expand the text to fill-out the entire space. I did the same for post pages which I want to use as "static" pages as well. I was able to remove the widget, but the text won't expand into the empty space. Is there a fix? Thank you in advance!
Karin E Jansson, June 21, 2011 at 4:26 AM: But I don't want the images to link to already created labels within the blog, I want it to be a separate page with completely new labels (ART, JEWELRY, ACCESSORIES).
When I create a new page (such as "webshop") I am unable to label it.
If there was a way to create three new pages, and then link to them from "webshop", but still have these three pages invisible in the first page label-bar. I want the visitors to click webshop, and then they can choose which category they want to watch.

i don't know if i'm making any sense...
Greenlava, June 21, 2011 at 2:54 PM: @Dser
Look at this code:
#sidebar-left-1 {display: none;} )

Remove the closing parentheses and you'll be fine.
Dser, June 21, 2011 at 3:46 PM: Thanks so much! You are awesome.
Greenlava, June 21, 2011 at 3:48 PM: @Karin E Jansson
I think I understand you now. You want to link the pictures to other static pages.
Try this:
1. Create a category page.
2. Copy the page's URL (it's the URL in the address bar when you view the page).
3. Add picture in "webshop" page.
4. Link the picture to the category page's URL.

Refer to my previous reply on how to add link to the pics.
Karin E Jansson, June 22, 2011 at 2:12 AM: But will not that category page show up on the first page, in the link bar?
Greenlava, June 22, 2011 at 11:28 AM: @Karin E Jansson
Oh I forgot about that.
You can remove them. Go to Design > Page Element and click Edit. You simply uncheck the pages to prevent them from appearing as tabs.
Stoligirl, July 11, 2011 at 11:43 AM: Wow! This was a huge help, thank you so much!
msasid, July 11, 2011 at 1:38 PM: My site is: http://dsebdlive.blogspot.com/
I cleared everything out of the original design by using your instructions, but putting in a diff place. Now only yhing left is the top and bottom space gaps that I cannot take for my page. Would you please help me here.

I am putting html and java code inside a single blog to create everything dynamically. I need to expand the blog height to take the whole visible page.
Unknown, July 12, 2011 at 5:17 AM: Hi, this works great to remove the sidebar on this page:
http://www.reversewinesnob.com/p/interactive-wine-ranking-spreadsheet.html
However, I haven't been able to remove the footer on that page as well. I tried .footer and .footer-1. (It looks like it is called .footer in the template but when I pull up the widgets that there it looks like footer-1 as well, but I must be missing something.)

Can you help?

Thanks
Greenlava, July 12, 2011 at 5:22 PM: @msasid
The top gap is due to the navbar. Add this code to hide it:
.navbar {display: none;}

@Jon
Try #footer-1.
Unknown, July 12, 2011 at 10:36 PM: Thanks, I tried #footer-1, but that didn't work either.
Any other ideas?

Thanks
Greenlava, July 13, 2011 at 6:33 PM: @Jon
It should work. Maybe you applied it incorrectly.
Currently you have this:
.main-inner .column-right-outer {
display: none;
}

replace that with:
.main-inner .column-right-outer, #footer-1 {
display: none;
}
Unknown, July 14, 2011 at 3:47 AM: Ahh, I had the code in there twice somehow. All fixed now, thanks!
Bhavna Bhatnagar, July 28, 2011 at 3:39 PM: Hi, thank you for this excellent post!

I am helping a school for visually challenged children develop a basic site using blogger. I have created the pages, but can't get rid of the Page title reappearing in the content section of the page. As an example: The page title is "Support", it's part of the page widget nav menu, and when I click on this page, the word "Support" appears as a title/heading on the page itself!

Can you please tell me how to get rid of it? Many thanks!
Bhavna Bhatnagar, July 28, 2011 at 4:02 PM: I just figured it out by trial and error! :D

.post-title {display:none !important;}
Stijn, August 24, 2011 at 7:54 AM: Hi Greenlava,

thanks for this tutorial, it helped me a lot when i wanted to change the second page of my blog! There is one thing I can't find to sort out though: i can't get rid of the white box around my post, although I've changed the background color to black: http://stijninchile.blogspot.com/p/fotos.html

Dp you have any idea how to make this white border black? Thanks in advance!
Greenlava, August 26, 2011 at 10:31 PM: @Stijn
Add this code:
.date-outer {background:none;border: none;}
Raising Wixom, August 26, 2011 at 11:37 PM: Thanks so much - JUST what I needed!
Stijn, August 28, 2011 at 12:33 AM: Thank you!!
Ms. Bell, August 30, 2011 at 2:22 PM: After reading your posts, I have been able to get rid of the sidebars on my static pages and widen them to fit the page. I haven't, however, been able to get rid of the lines that are still there from where the columns were. Can you take a look at my blog and help? http://madisonbulldogbuzz.blogspot.com/

Thanks
Ms. Bell, August 30, 2011 at 2:35 PM: I would also like to increase the font size on my static pages and maybe center the text. Although, if I increase the font size, I don't think I'll need to center the text. Help! Here is my blog address: http://madisonbulldogbuzz.blogspot.com/

Thanks!
Greenlava, August 31, 2011 at 11:08 PM: @Ms. Bell
1. To get rid of the lines refer to reply #111.
2. To set the post text size, add this code:
.post-body {font-size:PUT TEXT SIZE HERE;}
Bernard, September 12, 2011 at 12:26 AM: I'm going to try this tomorrow. I hope it works in my blog. =D. Have to sleep zzzzzzzzzz....
essay writing, September 23, 2011 at 7:44 PM: This is fascinating. Thanks for your sharing. Your thoughts are creative and they actually do help to me. It provides me with a lot of information. It is a nice post!
devilscafe.in, October 11, 2011 at 3:31 PM: Cool :)
Jules Noora, October 17, 2011 at 2:48 AM: can u help me please how can i remove the vertical line in all of my static page?... tnx in adavnce! http://www.paean95.blogspot.com
Greenlava, October 17, 2011 at 12:08 PM: @paean
Please read reply #65.
Kate, October 23, 2011 at 11:35 AM: Hi! First of ll, I'm thrilled with my static pages, so far, but I want them to be devoid of all other borders. My present static pages have 2, small, rectangles made of dotted/dashed lines. {One is at the top right, one on the bottom left, and they're on each page.} How would I delete those?

Kind Regards,

Kate

http://marlowesloft.com
Anonymous, October 26, 2011 at 3:50 AM: I've been searching for this solution for my specific template for days, and this worked perfectly. Thanks!
Tom, October 26, 2011 at 10:51 PM: Sorry, please ignore and delete my previous question. I see my page embed code was at fault, limiting the width.
I now reduced the style line to
.main-inner .columns {width: 100%; padding-left:0 !important;padding-right:0 !important; }

and it works fine.
Thanks for the great article and support comments! Tom
JRam, November 14, 2011 at 8:04 AM: I have resolved my previous issues with styling static pages so feel free to ignore my prior question. I do have one question now though: is there any way to remove the automatically generated title on the page? Blogger's new page creation generates the tab name along with a redundant page title that goes on the page itself. It doesn't seem simple to style this unnecessary title so I am trying to remove it. An example: http://allgraphical.blogspot.com/p/disclaimer.html - The title of "disclaimer" was automatically generated on the page with the rest of the text. If you can help with this, thanks! if not, that's fine.
Greenlava, November 18, 2011 at 1:50 AM: @JRam
You can hide the title by adding this rule in step I.4:
.post-title {display:none;}
JRam, November 22, 2011 at 2:40 AM: As usual, your problem solving ability is amazing! How did you figure out that .post-title was causing this issue when Blogger did not do this before? I was assuming the automatically generated title to be something more complicated to resolve. Thinking about .post-title now, it makes sense. I strive to learn and become as able as you are =).
Greenlava, December 2, 2011 at 3:08 AM: @OkamiS
Since the search box is too short for the computer screen, the the rest of (the bottom part) the page is occupied by the body element.
You can't get rid of the "footer", but you can replace the white space with the maroon-colored background fill.
This can be done by applying the background to the body tag instead of to bloginner-wrapper.
ian-ink, December 27, 2011 at 3:33 PM: Hi Greenlava!-
I'm getting hopelessly lost here :D
I've found
body expr:class='"loading" + data:blog.mobileClass'
but after that i seem to have many, many successive div tags ... i think they must lead back to a "faux columns" ? But im afraid that is all i can decipher, the div's have really thrown me!
Could I ask you to have a look and tell me what you think? Im at http://enjinobscura.blogspot.com/ and what I wanted to achieve was really only take away all the side widgetry on my static pages and lengthen the text - you can see why on the Outrider page i've had to squeeze the image into the text somewhat.
Any help greatfully received!
Greenlava, December 28, 2011 at 12:24 AM: @ian-obscura
Just disregard all the div tags. The only thing you need to do is pasting the code immediately after/below this tag:
[body expr:class='"loading" + data:blog.mobileClass']

like so:
[body expr:class='"loading" + data:blog.mobileClass']
[b:if cond='data:blog.pageType == "static_page"']
[style]
.blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}
.main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;}
[/style]
[/b:if]
Greenlava, December 31, 2011 at 10:05 AM: @OkamiS
For post pages, replace line 2 with this conditional tag:
[b:if cond='data:blog.pageType == "item"']
Greenlava, January 1, 2012 at 12:06 AM: @OkamiS
The border you're referring to is actually a shadow. To remove it, add this code to replace code line 4 and 5:

.post {-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}

and make sure you use the conditional tag as in my previous reply.
vecinii, January 7, 2012 at 11:25 PM: Hello, tell me please how to change title font color just of a single static page.
Greenlava, January 7, 2012 at 11:36 PM: @vecinii
Follow the instructions in "III. Styling pages individually", using this CSS rule (in line 2):

.post-title a {color: #fe6602;}

replace #fe6602 with your own color.
Marco, January 14, 2012 at 7:55 PM: Hello, tell me please how to add the two buttons - go to top and click to comment - to the bottom of the blog just like on your website. Thanks.
Admin, February 9, 2012 at 12:58 PM: I followed your steps but when I saved this message appeared

((
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:if" must be terminated by the matching end-tag "".
))
Greenlava, February 9, 2012 at 6:09 PM: @Muhammed
Maybe you left out the closing [/b:if] tag.
Prasanta Sarkar, February 13, 2012 at 5:04 AM: Hi Greenlava,
I tried it and get good the result. thanks a lot.
But one more question, I don't want to show one of my pages on pagelist (Menu) like yours search page. How to set this.

Prasanta
Greenlava, February 13, 2012 at 7:50 PM: @Online Clothing study
Go to Page Elements, click the Edit link on Pages widget box, and uncheck the page you wish to remove.
Frank, February 26, 2012 at 11:14 PM: What is the html code for changing the post body width in just one static page?
hudsonclove.blogspot.com
Greenlava, February 27, 2012 at 1:40 AM: @frank@nycg
Replace code line 2 with this:
[b:if cond='data:blog.url == "PUT_PAGE_URL_HERE"']
Frank, February 28, 2012 at 10:36 AM: I put the code into the designer html after the:
---body expr:class='"loading" + data:blog.mobileClass'---

I erased line 4 since that is not an issue. I just want to shrink the width of this static page (or several). I added the code:

---b:if cond='data:blog.url == "http://hudsonclove.blogspot.com/p/variety-and-cultivar.html"'---

But I keep getting a --body-- not closed warning. "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. --br/> XML error message: The element type "body" must be terminated by the matching end-tag "--/body--".

Error 500"

Any ideas? Thanks!
Greenlava, February 28, 2012 at 3:56 PM: @frank@nycg
My guess is you forgot to include the opening angle bracket "<" at the beginning of:

[b:if cond='data:blog.url == "http://hudsonclove.blogspot.com/p/variety-and-cultivar.html"']
Frank, February 29, 2012 at 5:05 AM: OK, great! It changes the width. If I wanted to change the width of a few pages, but not all, how would I add the extra urls? Also, if I wanted the text at, say 75% but justified left and centered, is there a way to do that?

Thanks!
Greenlava, March 1, 2012 at 8:54 AM: @frank@nycg
I'm want to take back my previous advice on using blog URL conditional (can I do that?) :) It worked, but there is a better way.
You can simply add the CSS into each page's content as explained in III. Styling pages individually section in the tutorial.
That way you can avoid using conditionals altogether and stay away from making changes to your template.
"justified left and centered"? this I don't understand.
Frank, March 1, 2012 at 11:29 PM: Am I using the same code as put into the template in the pages content? Probably not. I tried messing around with the page within the page html but I got nothing. Probably because I don't know the right code.

Justified left and centered means to me that I want the smaller width post in the static page to be centered on the static page, but with the indent on the left. In other words, if I use [center] tag, each line will be centered, but I just want the whole text body to be centered, not, say 75% and moved all the way to the left. I want that 75% smaller text body to be in the middle of the static page.

Does that make any sense?
Frank, March 2, 2012 at 2:40 AM: Greenlava,

OK, I see how to put the code in the html of each static page. Great! Now I can make each what I need. But the other question still remains, as the text is still to the left, when I would like it in the middle of the page(not each line centered). Thanks for all your tips!
JDpix, March 2, 2012 at 7:42 AM: Hi there ,

your code was really helpful and it removed everything that i didn't want to show on the pages .. so thank you for that
But the problem is that it only worked on 1 page and everything still remain on the other pages ( video / links and contact )
Could you help me to make it work on all the other pages as well please ?
http://www.thedoggydogsworld.com/
Greenlava, March 2, 2012 at 7:49 PM: @frank@nycg
Add margin: 0 auto; to .main-inner .columns {}.
That should do the trick.
Unknown, March 5, 2012 at 6:49 AM: Is it possible to apply different styling on label search pages?
Greenlava, March 5, 2012 at 8:51 PM: @Living Next Door To Alice
Yes it's possible. Replace line 2 with this conditional tag:
[b:if cond='data:blog.searchLabel']
frank@nycg, March 7, 2012 at 1:59 AM: SWEET! Thanks Greenlava. It worked like a charm.
RobynHTV, April 2, 2012 at 6:17 AM: I could totally hug you right now. I used your tutorial to remove a (right) sidebar from my static pages ages ago, but today I added a left sidebar and found the border for the left sidebar was visible. I remembered that being an issue with the right sidebar, and in your comments I found the fix to remove both borders. THANK YOU for writing such clear instructions and for so diligently and thoroughly answering people's comments and questions. You. Are. Awesome!!!!!
Super-Bee, May 10, 2012 at 8:56 AM: thank you, you're tutorial very helpful for me
ms ten, May 20, 2012 at 3:40 AM: Hi! is it possible to turn my post background in my static page into transparent without affecting the other post background of the other pages? thank you!
Greenlava, May 20, 2012 at 11:30 AM: @Jhiz Lacbo
In your case, add this code:
.date-outer {background: transparent;}
Kira, June 10, 2012 at 5:53 AM: Hi! I'm trying to remove a slideshow widget, but everytime I add .slideshow to line 4 like you describe, it makes all the words on that page run out of the margin. How do I fix this?
Greenlava, June 10, 2012 at 11:40 PM: @Kira
Try .Slideshow with a capital S.
Kira, June 11, 2012 at 12:00 AM: Thanks for your reply, making the S a capital didn't help the margins (the text still goes clear over to the right side of the page). It also makes it so the slideshow doesn't disappear. Any other suggestions?
Pioni, June 11, 2012 at 1:12 AM: Hi, I have added static page using your amazing and very clear instructions months ago. It has worked well since I changed url from pionilaakso.blogspot.com to pionilaakso.com.

Could you pls help how can I restore my loooong bloglist to my blog page http://www.pionilaakso.com/p/paivittyva-blogilista.html? Checking the widget address, looks it's using BlogList1-www.pionilaakso.com but my bloglist originally used Bloglist1 from pionilaakso.blogspot.com.

Many thanks for your help!
Unknown, June 11, 2012 at 9:58 AM: Hiya Greenlava! First, thank you so much for all the time and effort you put into making all of this easier for us. I have a little bit of html and css knowledge so there's been a lot I have been able to figure out for my self. My exception was my page list. You have made things so much easier for me. I did have one question though. I almost have everything on my blog just the way I want it, but I would like the corners of my page list buttons rounded. Is there a way that I would be able to do this so that my tab corners match the rest of my blog? thehookingkitten.blogspot.com

Thanks in advance and keep up the good work!
Greenlava, June 11, 2012 at 4:01 PM: @Pioni
I don't understand the part you said the bloglist originally used in pionilaakso.blogspot.com.
Isn't pionilaakso.com just a redirect of pionilaakso.blogspot.com? as such they are the same thing?
Greenlava, June 11, 2012 at 4:20 PM: @Heather
Here you go, add this in CSS:
.PageList li a {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-goog-ms-border-radius: 10px;
border-radius: 10px;
}

and maybe you would like to center the tabs' text vertically by adding this:
line-height: 10px;
(to vertically center a text inside an element, set the element's line height to the same value as the element's height)
Sarah Couling, June 22, 2012 at 4:56 PM: Amazing thanks for the help. Just what I needed!
Honeybee, July 5, 2012 at 12:23 PM: This maybe off topic question, but I would like to know how to adjust the layout of my blog post pages? Can i apply the same code? I put conditional tag for each widget at the left sidebar, so that they don't show up when reader click "read more" to go to the particular blog post page.In the blog pages, I want the layout widen to the left to fill up the spaces vacated by the sidebars.

Please advice. Many thanks in advance.
Danial Abdul Rahim, July 7, 2012 at 2:25 AM: WOW!!! hourly I searching for this, and at last I know how to styling my static pages. Thanks a TON!

Regards Danialde4 ^_^
Greenlava, July 13, 2012 at 1:07 AM: @Honeybee
If you want to apply the CSS to post pages, just replace the conditional line with:
<b:if cond='data:blog.pageType == "item"'>

If you want to apply it to post pages AND static pages, replace the it with:
<b:if cond='data:blog.url == data:post.url'>
AR, July 14, 2012 at 5:05 PM: I love this, thanks!
AR, July 18, 2012 at 3:26 PM: I have an issue. i want the right sidebar to be hidden on my search/Resource-Library page. I don't know what to with line-5 though so that the left sidebar stays as is and the main column expands to fill in the space occupied by the right sidebar.

I tried the following :-


<b:if cond='data:blog.url == "http://tfi-alumni-impact.blogspot.in/search/label/Resource-Library" '>
<style>
#sidebar-right-1 { display:none !important;}
.main-inner .columns {width: 80%;padding-left:0 !important;padding-right:0 !important;}
</style>
</b:if>



Unfortunately I see NO change in those pages :|
Can you please tell me what I'm doing wrong?
Honeybee, July 25, 2012 at 2:13 PM: *Big applause* I did a makeover to my blog and apply this trick. Totally work! Thanks :)
Greenlava, July 25, 2012 at 5:54 PM: @Ananyaa Ravi
Where did you place the code? I can't find it in your source code.
NiGz, August 12, 2012 at 7:21 PM: hello green lava....
Thanks!!
Rachel, August 18, 2012 at 9:28 PM: Thanks so much for this tutorial - I was recently approached by a marketplace-type company and asked to install a widget on my blog to help them reach a vaster audience. Well, the widget was too large for my blog's layout and I was NOT feeling a layout rehaul just to be able to post a widget. So glad I found this - I was able to apply it to just a single page and didn't have to lay a finger on my layout! Thanks again!
Unknown, August 29, 2012 at 6:32 PM: thank you so much greenlava! ^_^
it works on my blog!
Central High School Class of '63, October 25, 2012 at 5:42 AM: I added your code as described & it widened the post area on the static pages but it didn't remove any of the elements. I particularly want to remove the large collage header on the static pages.

Thanks

http://chs50.blogspot.com/
Central High School Class of '63, October 25, 2012 at 6:59 AM: I got it! I got it! I got it! I got it! I got it!

Been working weeks on this.

Realized everything was gone from the static pages except the header photo--which was really all I was trying to get rid of. i studied the code & saw that the photo was .header-inner So i added that to your code & voila'

Thanks for explaining it thoroughly.

Ted
jayr, November 10, 2012 at 3:14 PM: thanks. i used it on my blog.
Hannah Poindexter, January 10, 2013 at 1:43 PM: This is amazing, thanks so much!

I am trying, however, to keep one part on my blog (annarbortoandalucia.blogspot.com), the floating toolbar on the left, on the static pages. I have done some trial and error in messing with the values and I have gotten it to stay, but only over the background to the far left where it is practically illegible.

Any way you could help out just one more inexperienced html editor?
Greenlava, January 13, 2013 at 2:02 PM: @Hannah Poindexter
Do you still have problem with that? It looks fine from here.
Unknown, February 1, 2013 at 8:54 PM: Has anything changed since 2010/11? I'm just using the standard 'simple' template, but adding the code exactly as shown in the article makes no difference whatsoever to the static pages? Be very grateful for any further info!
Pearls of Style, March 13, 2013 at 3:12 PM: Great advice. Thank you.
Anonymous, March 16, 2013 at 7:54 AM: Thank you! It worked like a charm!
Lynness, March 30, 2013 at 2:58 AM: Very clear and simple and EFFECTIVE- just what I needed! Thanks!
Unknown, April 5, 2013 at 4:34 PM: can you help me move my tabs up in blogger??
Vines, May 1, 2013 at 9:50 PM: Hi..it's works...thank you so much..!
araba oyunları, June 1, 2013 at 5:54 AM: this great post thank you.!
admin, June 20, 2013 at 2:10 AM: Bagaimana nak selesaikan masalah static page yang tidak berfungsi dengan betul, klik continue reading tidak menjadi. Ada cara untuk fix nya?
Greenlava, June 20, 2013 at 7:19 PM: @My abd
Guna read more yang ini, gerenti no problem:
Blogger Auto Read more with thumbnail
Unknown, August 20, 2013 at 9:19 PM: great amount of comments!!!!
Unknown, September 4, 2013 at 9:32 PM: Thank you for the great tips! I got rid of the odd placed page title in a sec. Worked like a dream!
Melissa Nicole, October 25, 2013 at 3:52 AM: Thank you exactly one million times.

«Oldest ‹Older 201 – 351 of 351 Newer› Newest»

Comments on this post are closed.

Apply different layout/styling to static pages

I. Applying the conditional styling

II. Identifying and adding your own elements to the code

III. Styling pages individually

351 comments to "Apply different layout/styling to static pages"

Top Blogger Widgets

Recent Posts

Categories

Archives