Monday, July 23, 2007

Removing The "Showing posts with label" / "No posts were found which match your query" Message

I say every chance that I get, that Labels Rock. They are very user friendly, and produce attractive results. In general.

There's one feature of labels that not everybody finds attractive, however.


The gray box.


This mysterious gray box, aka the "Status Message", may contain distracting advice like "No posts were found which match your query" or "Showing posts with label". It will pop up unwanted, when you tweak your template - like making a static home page for the blog.

Fortunately, this is not hard to remove, though it may require several tries. Read the instructions, and decide for yourself which alternative may work better for you - then try one at a time. However you tweak your template, remember to clear cache, and restart the browser, after each try.

With the new Designer templates, that provide the "Add CSS" menu option, you simply need to add one CSS rule. Press "Enter", to create a blank line, before pasting the code!
.status-msg-wrap{
display: none !important;
}

The above tweak will remove everything in the status message. If you only want to remove the label message, specifically, you can use a conditional, as we conditionally display template objects.
<b:if cond='data:blog.searchLabel'>
<style>
.status-msg-wrap,
.status-msg-body {display: none;}
</style>
</b:if>

If "Add CSS" does not produce results, and neither of the above tweaks work, try adding the above code manually, using the Template Editor. As always, first back up your template.

If simply adding CSS does not produce results, then try up to 2 (well scripted) solutions. Again, try the Template Editor. Again, always start by backing up your template. Then, Expand Widget Templates (** See Note 2, below). Find
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<b:includable id='status-message'>  << Try 2: Remove This Line
<b:if cond='data:navMessage'>  << Try 1: Remove This Line
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>  << Try 1: Remove Thru This Line
</b:includable>  << Try 2: Remove Thru This Line





Delete that entire block of code denoted by "Try 1", carefully. Save Template.




(Note 1:): Some people have reported that, having removed the block of code denoted by "Try 1", that the entire block of code was replaced by the template editor. If you find this to be the case, repeat the process, deleting the block of code denoted by "Try 2".



Refresh cache.No more gray box.



(Note 2): It's possible that, with some templates (possibly newer ones), the code shown above, in an expanded widget, might be better removed while un expanded. In these cases, do not expand widget templates, simply look for and delete one line of code
<b:include data='top' name='status-message'/>

Having done that, backup your template, again.

>> Top

48 comments:

Jina & Emmanuel Bautista said...

I followed these instructions as per your reply to my post earlier on Blogger forums and it worked perfectly. Thanks again and I'll be checkin back here frequently as it's a very good blog. Thanks again.

Christina said...

I tried this before and it worked! But a made a new blogger blog and it doesn't work. I keep going to an error page. Another time I tried deleting the same section of code, that code kept coming back even after I deleted it and saved the template. Do you know what the problem might be?

Chuck said...

Christina,

What's the name of the 2 blogs - the one that worked, and the other that didn't?

Christina said...

The name of the one that worked is knitabynolonger

The name of the one that doesn't work is knitaby

Ape said...

Hi Chuck,

I followed your instructions for deleting the box and it is deleted from my html but still shows up on my blog.

please advise

www.aprilmueller.blogspot.com

thank you.

STaLLioN said...

Dont remove the all code
Just remove the code which is between these codes.

"< b:includable id='status-message' >
...
...
...
...
< /b:includable>

So the following code:

< b:if cond='data:navMessage'>
< div class='status-msg-wrap'>
< div class='status-msg-body'>
< data: navMessage/>
< /div>
< div class='status-msg-border'>
< div class='status-msg-bg'>
< div class='status-msg-hidden'>< data:navMessage/>< /div>
< /div>
< /div>
< /div>
< div style='clear: both;'/>
< /b:if>"

Chuck said...

Hey STaLLioN,

The jury is still out on this one. We've had mixed results from both procedures. So, I'll let the public vote, if you wish.

Mai Trâm said...

I tried your tutor, and it worked well in my case. I appreciate your help.

Travis Poling said...

Try 1 worked! Thanks.

One more question: If I want an image or some text to show up just on the page of posts with one label, how would I add that into the code?

(I have sections on my blog http://travispoling.blogspot.com/ denoted by labels. So when one clicks on a label, the top of that page will have the name of the section. But I only want it on that page.)

Etmin said...

thank you, nice tut

Suzanne said...

Thank you - that worked great.

Nathan said...

When I try this I get this error message:

' The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements. '

any ideas?

Chuck said...

Nathan,

Did you see that error from Try 1, Try 2, or Note 2?

Nathan said...

Yes, I tried both Try 1 and Try 2 yesterday and got that error. Today I tried Try 1 and now it works! Go figure. Anyway, thanks for this!

Fred said...

Worked the first time. I never even thought of it before, although I always use labels as an index. Thanks

http://office-phone-system-primer.blogspot.com/search/label/Office%20Phone%20System%20Basics

Gordon said...

Thanks alot for the tutorial, it works fine on my site :)

DEAppraisers said...

I found this works (at least it does using the Scribe theme):

Put this code with the rest of the css

.status-msg-wrap,
.status-msg-body {
display: none;
}

You can also style the message using those but alas - no way to change what it says, which is what I really wanted to do.

Hope this helps!

Barrio Porteño said...

Thanks mate! It worked perfectly! Would you know how to change the "Read more >>" of the jump break into something different???

Thanks in advance...

Chuck said...

Barrio,

The "Read More" text in the "Jump Break" option is set in the "Blog Posts" wizard in Page Elements.

Al Ngullie said...

YAY did it! Chuck, I tried all the 'try 1' and 'try 2' and then to the next set of 'try 1' and another 'try 2' nothing worked! THEN FINALLY I tried out the last bit of info (the delete the so-so line with Expand/unexpanded wedget part at the bottom of your post) and that insufferable "No post matching your query" block is totally gone! Thank you, chuck. God bless you.

I now finally have my on "Home" page for my blog: Here is my blog, you may want to have a look at it:) : http://www.rocknock.co.cc/2010/05/birth-of-progressive-metal-watchtowers.html

PS: I simply removed the line in the EXPANDED Mode and the static block got removed. Thank you so much again.

Chuck said...

I now finally have my on "Home" page for my blog: Here is my blog, you may want to have a look at it:) : http://www.rocknock.co.cc/2010/05/birth-of-progressive-metal-watchtowers.html

That's a kewl variation! You positioned the home page Welcome message gadget just below the header, instead of just above the posts. That makes the message spread across the entire blog, and above the sidebar. That makes it more visible. Nice job.

Susie Hovendick Chan said...

If we can't change the status message, can't we change the code? as in "hack"it?

Chuck said...

If we can't change the status message, can't we change the code? as in "hack"it?

Sure, you can "hack" it - that's what you're doing here.

Just replace "<data:navMessage/>" (in 2 places, see above) with whatever message pleases you. And, don't delete anything.

Michie said...

Another helpful tip, Chuck. Thanks!

Yaroslavoff said...

Thanks for post, its work fine)

暗生番 said...

Try 1 worked beautifully for www.tawa.asia. I'm using a newer template. I think it's called Picture Windows.

The Scathing Brit said...

Thanks for the advice in all the posts here. I tried the easiest (laziest ??) way first, by adding the CSS code. It worked fine! If you wish to take a look:-
Thescathingbrit.blogspot.com

ICU Library said...

In my case, I just removed the line as instructed and the gray box disappear.

Thanks!



Quick, Easy and Healthy Recipes

Akehia said...

Perfect, thank you!

Grade ONEderful said...

It worked perfectly with the first try! Thank you!
Barbara

Silkroyalty707 said...

Thank you very much for this post. I went with the second option of deleting just that one line but I expanded the html widget and it worked fine. :)

doyouknowgk said...

Thanx For awesome post. Worked Very well with 1st try....

BL said...

This site is extremely useful, thanks for the time and detailed steps!

B. F. PRETZ said...

This worked perfectly, after five attempts using recommendations from other how-to's, yours is the only one that actually worked! No more "No Posts" box on the bottom of my page! Thanks!
http://brandonpretz.blogspot.com

watch-free-tvshows-online said...

thanks a lot! the add css works well for me! :)

Tamil TV Shows said...

Thank you Very Much... Its Worked for me

Ciaotraveler.blogspot.com said...

I finally tried step 2 and it worked. Thanks so much.

ali cross said...

I love all your tutorials! Normally they work like a charm, but I'm really struggling with this one.

I've tried Try 1 and Try 2, and also Note 2. I am unable to find the code listed for Note 2, and despite deleting the code for the previous tries, that darn gray box is still showing up!

Do you have any suggestions? Thanks so much! http://www.breakwaterbusiness.com

Chuck Croll said...

Ali,

Here is where I get to suggest that you post in Blogger Help: Something Is Broken, so we can look at your blog in detail.

ali cross said...

Ha! As I was writing my post for the discussion group, and very carefully adding everything in . . . I tried everyone one more time. And ... Note 2 worked!

So I'm good! I'm better than good! Thank you Chuck!

Marika Brose said...

It worked!!! THANKS! ;)

Shannon H said...

Thank you SO much! This worked great!

Hunting Butterflies said...

YOU ARE AWESOME. Thank you so much!

sokrean said...

"Note 2" worked for me!! Thanks :)

Randal Silvey said...

Fantastic! Using some random custom theme required me to use both methods. Had to message code from the HTML to undo the custom styling the the template was applying and then using the 'Add Custom CSS' bit to finally remove the messages completely. This helped me out a ton!

Barbara Leyne said...

THanks! Worked perfectly.

ROHIT said...

good one! thanks

Naveed Ahmed said...

Wow, for me the Add CSS code option did it. It is very simple compared to the other options. Thankyou for posting this valuable information.