Today I was asked an intriguing question about styling the Blog Archive list by a fellow fan of this Blogging Pro template.

I have a request/question… Is it possible to get the year/count on the same line as the arrow symbol?
e.g. > MAY (3) or > 2009 (5).

I hope you understand what I am trying to say.

This was an interesting diversion after frantically rescuing this blog’s looks from some sort of server error which stopped the background graphics loading. So I had a look and it turns out that it is possible. However, although it works in the latest version of all the browsers (I checked it in Firefox 3, Internet Explorer 8, Opera 9, Opera 10, Safari 4, Google Chrome 2, Avant 11  and Flock 2) it stubbornly refuses to work in Internet Explorer 7. I will keep trying for IE7 but so far it has resisted all attempts.

Update: It now works in IE 7 as detailed below.

I have done it all through CSS as I discovered that the styling for the pointers is not in the templates but is generated by Blogger’s server. So by altering it and adding it to the template it overrides the generated style.

All you need to do is add the following styles to the head of the template. Make sure that you place them between the opening <b:skin><![CDATA[/* and closing ]]></b:skin> marks. The best way in the Blogging Pro template is to use the browser’s search/find (CTRL+F) to look for .Blogarchive. This will take you to the existing archive style.

#ArchiveList .toggle{cursor: pointer; font-family: Arial,sans-serif; display:inline; border-bottom:none; float:left}

#ArchiveList a.toggle, #ArchiveList a.toggle:link, #ArchiveList a.toggle:visited, #ArchiveList a.toggle:hover{color: inherit; text-decoration: none;display:inline; float:left; margin:3px 0 -3px 0; padding:1px 3px 1px 0}

#ArchiveList a.toggle, #ArchiveList a.toggle:link, #ArchiveList a.toggle:visited, #ArchiveList a.toggle:hover{color: inherit; text-decoration: none;display:inline; float:left; margin:3px 0 -3px 0; padding:1px 3px 1px 0}

#ArchiveList a.toggle, #ArchiveList a.toggle:link, #ArchiveList a.toggle:visited, #ArchiveList a.toggle:hover{color: inherit; text-decoration: none;display:inline; float:left;}

You can adjust the gap between the pointer and the date by changing the number in red.

After hours of fiddling I have found that to ensure that it works in Internet Explorer 7 also add the following two lines along with the code above:

.BlogArchive #ArchiveList ul li{margin:0; padding:0; text-indent:0; display:inline}

.BlogArchive #ArchiveList ul.posts li{display:block; margin:0; padding-left:0; text-indent:0}

If you want the indent for the posts, which I think helps to make the dates stand out a little better, then change margin;0; marked in red, in the line above, to margin-left:15px;. and look for the following code which is already part of the template:

.BlogArchive #ArchiveList ul li.archivedate{margin:0pt; padding:0px; text-indent:0px}

Then change the item marked in red to margin-left:15px;.

There is only one slight IE7 puzzle: why does it insist on slightly increasing the gap above the months once you have clicked on the month? It displays perfectly in all the browsers listed above and if I come close to finding a solution in IE7 it breaks the display in all the other browsers.

Be warned that this is aimed at the archive display style used in this template. To use it in another template or in any template with a standard indented archive list will require some tinkering with the code. Also, for it to work you will need to have removed all indentations from the layout. The previous two articles should be read first:

• Blog Archive Not Expanding
• Moving the Blog Archive Count in Third Party Templates

I have installed it in this template for the time being to show that it can be done. So far I have not decided whether to keep it for the long term or not.

Technorati Tags: Archive list,CSS,Customising,Blogging Pro

Subscribe to comments for this post (RSS)