Apr 16, 2013

Styling Blogger's label filtering message

When you go to a page that displays all posts with a certain label, Blogger puts a note at the top of the page to let you know about the filter. This thing which I have hilighted here in yellow:


But I wanted to change it so that it just had the filter name, as a title, and nothing else.

Here's the code I used:

.status-msg-body {
text-align: left;
color: white; /* Set this to your background colour to make the message body invisible */
background-color: white;
}

.status-msg-body b {
font-size: 2em;
font-weight: normal;
color: black; /* desired font colour for the title */
position: absolute; /* this positions the title in the top left of the box so that it's not being positioned by a bunch of invisible text around it */
left: 0;
top: 0;
}

.status-msg-body a:link {
display: none; /* removes the show-all-posts link */
}

And here's what it looks like now (not perfect, but it's a start):

Next, I'll make some more fixes: adding a text-transform to .status-msg-body b so it's capitalized, and fix the font. I'll do that by adding ".status-msg-body b" to a current selector that's providing the styling for my other titles. Good as gold!

Okay, so I'll lazily fix the margins so it lines up with other stuff: margin: 0 .45em;

So here's what it finally looks like. Pretty smooth: