[Also known as (for the Google's sake): How to fix far right links with Subtlebeauty Blogger template or How to fix Subtlebeauty Blogger template sidebar poking into posts]

We noticed a while back that links on the far right of a post using this template were at least partially unclickable - you know, the little link hand cursor disappears. The beam cursor also disappeared when mousing over unlinked text there… made it harder to select such text. I did a little code tweaking and found something that solved the issue: changing the width of the sidebar-wrapper div in the template CSS. It is by default at 35% ("of the parent element's width"); I think I had it at 27% in the last couple days, just did some experimenting, and I think 28% percent is the highest you can go without having the sidebar wrapper bleed into the posts. You might need to do some expermenting, maybe set it lower, if you have lots of buttons on the top navigation bar (the links just above the posts). I haven't noticed any squishing of the sidebar, or any breaking of it otherwise because of the tweak; it seems to work fine.

So, if you haven't done it before, here are the editing instructions: go to your blog Layout settings (accessible from your Dashboard) and click to the Edit HTML sub-tab. Now, use your browsers search function (Ctrl+F, probably, or Edit menu > Find) if you wish, or just find it manually; look for #sidebar-wrapper (it won't be italicized). Find the width property under #sidebar-wrapper and change it from 35% to 28% (or whatever other width you decide; that's just what I am recommending).

I don't know if this is an issue with the WordPress version of the Subtlebeauty template, but I know it certainly is with the Blogger version. But… issue fixed.

--Nat

[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.

Hmmm, so I got the template uploaded yesterday. It was working, but then suddenly the images were not loading. Lo and behold, it turned out that the Google Pages site where the images were hosted (aborregate.googlepages.com) had hit the bandwidth limit. Fortuneately, data was loading again that night, so I snagged the images. Except for one I didn't know about, a bullet that evidently was referenced in the template but wasn't in use on the blog at the moment.

So today I uploaded the images for our template, Subtlebeauty, to ImageShack and edited the template to point to those images. Everything seems to be working. Wootness.

If you want to use this template (but then you would look like us :p), here are the image links, hosted at ImageShack. I also listed files hosted on the Google Pages site, but use the ImageShack files, because you may experience bandwidth limitation issues with the Google Pages site. ImageShack files on the left.

subtlebullet.gif (Google Pages)
subtlebg.gif (Google Pages)
subtleheader.gif (Google Pages)
subtledate.gif (Google Pages)

Ok... there. Second post. Phew.