Hacking template "No. 897"

"By default, Blogger offers over 30 gorgeous, professionally-designed templates."

Gorgeousness is kinda in the eye of the beholder, though. For example, template "No. 897" creeps me out in some ways. At first I thought it was just the colors, but the star and the secret messages are the biggest problems, I think. Fortunately, they can be eliminated.

"If you're the sort of person who really likes working directly with the code, though, that's fine, too."

"Really like" is too strong. But I'll do it in self-defense. Or to help someone out. Like Carolyn, human mom to Claire, Maddox, Scotty, and Shelby. She wants to get rid of the star at the top of No. 897, too.

So let's do that, plus get rid of the creepy secret messages, plus fix the capitalization at the top. That's pretty low, when a "professionally-designed template" messes with your capitalization!

These are all simple changes, but they require messing with the HTML code for your page. As always, backing up at least what you're starting with is strongly recommended. Remember, you're hacking the work of a gorgeous professional!

Just to be sure that we're on the same page, literally, you get there from the home/dashboard page by clicking on Layout | Edit HTML.

A Star is ... Removed

To do the star project yourself, you need to be able to download a graphics file to your computer; do one bit of very simple, quick editing with a graphics editor that can handle GIF files and preserve transparency; and upload the result to an online internet storage place of your own.

Then you do a quick copy-and-paste text edit to the blog html.

There are ways around the first three requirements if you don't have an editor or your own storage space ... click the link in the sidebar to email me ===>

To get rid of the star, you want to change line 168 (by my count). Let's have a look at the html. Unfortunately, when you copy computer stuff to a blog and use the html tag "<code>," the indentation gets lost. But anyway, here's the context we're looking for:

/* Header
----------------------------------------------- */
#header-wrapper {
background: #fff;
padding-bottom: 4px;
}

#header .titlewrapper {
background:#269 url("http://www.blogblog.com/no897/topleft.gif") no-repeat left bottom;
padding:0 0 0 160px;
margin:0 0 10px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
}

The line we want is this one:

background:#269 url("http://www.blogblog.com/no897/topleft.gif") no-repeat left bottom;

And the offending graphic that we want to replace is http://www.blogblog.com/no897/topleft.gif  Download this file to your computer, and fire up your graphics editor.

Set a paintbrush to that orange color. The easiest way is to use an eyedropper tool (color picker, whatever) and pick somewhere in the orange. Or you can set the paintbrush to:

• red 255, green 153, blue 0   -or-
• red 100%, green 60%, blue 0%   -or-
• hex xff9900

Now just paint out the star.

Next, upload that modified file to your internet storage space that's online all the time (because people will be looking at it 24 hours a day!).

Plug the internet address of that file in place of the Blogger's "...topleft.gif" in your blog's html, and you're done!

The line should end up looking something like this:

background:#269 url("http://www.myfilespace.com/myfilename.gif") no-repeat left bottom;

No More Secrets

There's secret writing in the green box below the orange box that has the star. It's not exactly The Da Vinci Code - it just says "897." I guess it's in case you forget the name of the template you're using. Or in case your readers want to know.

I don't think most do. So there's even more secret code in the html - instructions on how to get rid of the 897 - that's even more secret because YOU can see it and readers can't! (And neither can Blogger's computer!)

About seven "paragraphs" past the section we worked on above is the following:

#header .description span {
/* To remove the word next to the description, delete the following background property */
background:url("http://www.blogblog.com/no897/temp_no.gif") no-repeat left center;
/* Keep everything below */
display:block;
padding:0 0 0 160px;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
}

The secret instructions are there in a comment. Comments are things for people to read but computers to ignore.

/* Comments are inside a matched set of asterisks, inside a matched set of slashes, like this. */

So the comment says you can get rid of that secret 897 by deleting the line

background:url("http://www.blogblog.com/no897/temp_no.gif") no-repeat left center;

But why delete it when you may want to put it back in? To mystify readers, for example. Why not just "comment it out" by putting the line inside comment markers, like this:

/* background:url("http://www.blogblog.com/no897/temp_no.gif") no-repeat left center; */

Done! "897" is gone!

Now let's get rid of the wacky writing in the dark blue strip across the top. Go back to the first section of code we worked on for the block of orange color. In the very next "paragraph" is this:

#header h1 {
background:url("http://www.blogblog.com/no897/bg_header.gif") no-repeat left top;
margin:0;
padding:70px 0 30px;
line-height: 97px;
font: $titleFont;
text-transform:lowercase;
}

The strange hieroglyphics in the background go away if you comment out the line that specifies the background graphic like this:

/* background:url("http://www.blogblog.com/no897/bg_header.gif") no-repeat left top; */

No more artsy half-numbers and gobbledygook.

Raise the Capital(s)!

How weird, to make all your capital letters lower-case without even asking! Just weird. Well, while we're in this "paragraph," let's just comment out another line:

/* text-transform:lowercase; */

Shazaam!

I hope that these notes helped or amused you. Or, if your blog blew up, I hope you saved a backup. "There's many a slip 'twixt the cup and the lip," but "All's swell that ends swell."

And it's more important to have fun than to be earnest. Well ... it's more fun to have fun than to be earnest...!