remove the wrench (and pencil) icons from a Blogger blog

[This is a bit of a rewrite of Tuesday's post.]

The quick edit icons,   and , can be handy for, well, quick edits, but I personally prefer the clean look of our blog without wrench icons cluttering up the sidebar (by the way, they only appear when you are logged in as an admin of that blog or on a post you made). Fortunately, LawnyDesignz has a simple and elegant solution.

Here it is: you have to add a bit of CSS code to your template. So, get your blog template HTML open in the Blogger editor (Layout settings > Edit HTML). Now the important part: you have to put this in the right section to work. You have to put it in the section between the opening tag <b:skin> and the closing tag </b:skin>. For convenience, just make a new line right after the <b:skin> tag (i.e., insert your cursor right after <b:skin> and hit Enter). Now copy in the following text:

.quickedit{display:none;}

Press Save Template and then take a look at your blog. Wrench icons have disappeared, hopefully.

This still leaves the little pencil icons, but I don't find them so obtrusive and deign to leave them there. However, these can be removed, too, if you so desire. Go into the Settings tab (Basic sub-tab, selected by default), in your blog settings, and select No on the drop down box for 'Show Quick Editing on your Blog?'. Save Settings and pencils-B-gone!

Note: in the previous version of the post, I mentioned you can put the code in the first style section before <b:skin> but I would recommend putting it in the b:skin section. Lawny told me about putting it in the b:skin area, so thanks Lawny!

Also, if you have Firefox, you can grab the Stylish add-on and use this userstyle to quickly toggle the pencil and wrench icons visible/invisible, no reload required. Pretty cool.