Thursday, January 3, 2008

Blogger template - Where did that quickedit icon go?

pencil icon, that"s clickable to start editing the post

Sometime between back then and now, some of the icons on my blog have disappeared. I do not always catch a change just when it happens and often I give it a chance to come back by itself since it can be cause by some intermittent problem. This is one of those problems, where I after some time have to look into it. When you're logged into blogger there used to be an edit for quickedit, which is nice so that I start edit right away when I spot a typo or wants to update a post. Alternative I have to go through posts and pick the right one, which is much more troublesome. Here's a snippet from my current template of where it's inserted:

  813                 <b:includable id='postQuickEdit' var='post'>
  814                   <b:if cond='data:post.editUrl'>
  815                     <span expr:class='"item-control " + data:post.adminClass'>
  816                       <a expr:href='";amp;postID=" +' expr:title='data:top.editPostMsg'>
  817                         <span class='quick-edit-icon'>EDIT
  818                           &#160;
  819                         </span>
  820                       </a>
  821                     </span>
  822                   </b:if>
  823                 </b:includable>

That's right there's no <img../> tag. When I started using blogger I was puzzled by who these icons magically appeared, and found that it was controlled by CSS depended on whether you were logged in or not. Do notice the character entity &#160;(the ISO 8859-1 Symbol Entities for non-breaking space). I added the EDIT some time ago to give myself something to click.

The CSS file that defined this is (was), as the comment in top says:

Quick Edit and Delete Comment Icons
----------------------------------------------- */

/* Hide it now, show it later with dynamically-generated CSS */
.item-control {

.item-control a, .item-action a {
   text-decoration:none !important;

.widget-item-control {
  float: right;

.icon-action {
  border-style: none !important;
  margin: 0 0 -5px 0.5em !important;

.delete-comment-icon {
   background: url("/img/icon_delete13.gif") no-repeat left;

   /* makes a 14x14 box */

/* Mobile video tags shown on handhelds only.
   All others get regular video tags. */
@media all {
  .BLOG_mobile_video_class {

@media handheld {
  .BLOG_mobile_video_class {
  .BLOG_video_class {

At first I was sure that it was my own fault, that I during one of my minor updates to my template had removed or spoiled something. But the markup source showed that it was okay.

I found the answer in Quick edit icon is gone from the Blogger Help Group. Blogger has changed this so that now I do have to add the icon by explicit markup to (pencil icon), so now my template contains:

  926                 <b:includable
  927                   id='postQuickEdit'
  928                   var='post'>
  929                   <b:if cond='data:post.editUrl'>
  930                     <span expr:class='"item-control " + data:post.adminClass'>
  931                       <a
  932                         expr:href='";amp;postID=" +'
  933                         expr:title='data:top.editPostMsg'>
  934                         <span class='quick-edit-icon'>
  935                           <img
  936                             src=""
  937                             alt="pencil icon, that's clickable to start editing the post"
  938                             style="border: 0px" />
  939                         </span>
  940                       </a>
  941                     </span>
  942                   </b:if>
  943                 </b:includable>

There are other icons.

Email this to a friend

Here the template looks like:

  712                         <span class='post-icons'>
  713                           <!-- email post links -->
  714                           <b:if cond='data:post.emailPostUrl'>
  715                             <span class='item-action'>
  716                               <a expr:href='";amp;postID=" +' expr:title='data:top.emailPostMsg'>
  717                                 <span class='email-post-icon'>
  718                                   &#160;
  719                                 </span>
  720                               </a>
  721                             </span>
  722                           </b:if>
  723                           <!-- quickedit pencil -->
  724                           <b:include data='post' name='postQuickEdit'/>
  725                         </span>

And I need to and an image tag to (envelope icon), like for the quickedit.

Delete comment and Delete backlink

For some reason the change isn't consequent, since these two icons are still served the old way - see the CSS listed above where the class delete-comment-icon adds a background image from . The template fragments are:

  746                 <b:includable id='commentDeleteIcon' var='comment'>
  747                   <span expr:class='"item-control " + data:comment.adminClass'>
  748                     <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
  749                       <span class='delete-comment-icon'>
  750                         &#160;
  751                       </span>
  752                     </a>
  753                   </span>
  754                 </b:includable>

and for delete backlink:

  791                 <b:includable id='backlinkDeleteIcon' var='backlink'>
  792                   <span expr:class='"item-control " + data:backlink.adminClass'>
  793                     <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
  794                       <span class='delete-comment-icon'>
  795                         &#160;
  796                       </span>
  797                     </a>
  798                   </span>
  799                 </b:includable>

Here's a example of how three of these icons are placed on one of my posts:

screendump showing a partial blogpost with the icons for edit, email friend and delete backlink