Collapsing Archives Some Blog Site

Collapsing Archives

This widget displays your archives better than the WordPress default. This allows the list to be expanded or collapsed, reducing clutter on the sidebar. Visit WordPress plugins to get the plugin, and thank Rob Felty for his effort.

The changes I made are to separate the date from the post link. I thought the default style of having the date run together with the post name was too cluttered. Having different styles for each and separating them somewhat looks cleaner to me. Here is what you can do to get your Collapsing Archives to look like mine.

Steps to modify this widget:

Install the plugin according to the instructions from its site
At the bottom of the left sidebar in your WordPress administration page (i.e. Dashboard), click on Settings and then Collapsing Archives
Change the CSS as shown below
Back in the left sidebar, click on Plugins
When that page opens, find Collapsing Archives (where you had to click Activate when you first installed the plugin). Click the Edit link that’s right next to the Deactivate link.
On the right side is a list of files. Click on collapsArchList.
Change the code as shown below. It is a large file; you will ignore most of it. The lines to change are in the second-to-last page (i.e. go straight to the end of the file and then press Page Up once).

Old Style CSS

#sidebar li.collapsArch a.self {
    font-weight:bold}
#sidebar ul.collapsArchList ul.collapsArchList:before {
    content:'';}
#sidebar ul.collapsArchList li.collapsArch:before {
    content:'';}
#sidebar ul.collapsArchList li.collapsArch {
    list-style-type:none}
#sidebar ul.collapsArchList li {
    margin:0 0 0 .8em;
    text-indent:-1em}
#sidebar ul.collapsArchList li.collapsArchPost:before {
    content: '\\\\00BB \\\\00A0' !important;}

New Style CSS

#sidebar li.collapsArch a.self {
    font-weight:bold}
#sidebar ul.collapsArchList {
    margin-left: 2px;}
#sidebar ul.collapsArchList ul.collapsArchList:before {
    content:'';}
#sidebar ul.collapsArchList li.collapsArch:before {
    content:'';}
#sidebar ul.collapsArchList li.collapsArch {
    list-style-type:none}
#sidebar ul.collapsArchList li {
   margin:0 0 0 3px;}
#sidebar ul.collapsArchList .collapsArchPost a {
    display: block; width: 110px; 
    margin-bottom: 0.5em; padding-left: 3px;}
#sidebar ul.collapsArchList .collapsArchDate {
    float: right; color: black; width: 38px;
    text-indent: 0;}

In case you don’t feel like comparing each part, here are the changes:

Remove the line #sidebar ul.collapsArchList li.collapsArchPost:before {content: ‘\\\\00BB \\\\00A0’ !important;}
Remove the line text-indent:-1em}
Change .8em to 3px in the line margin:0 0 0 .8em;
Add the line #sidebar ul.collapsArchList {margin-left: 2px;}
Add the line #sidebar ul.collapsArchList .collapsArchPost a { display: block; width: 110px; margin-bottom: 0.5em; padding-left: 3px;}
Add the line #sidebar ul.collapsArchList .collapsArchDate {float: right; color: black; width: 38px;text-indent: 0;}

Old Style Code

if ($showPostDate ) {
    $theDate = mysql2date($postDateFormat, 
        $archPost->post_date );
    $text .= ( $text == '' ? $theDate : " $theDate" );
}

if ($showCommentCount ) {
    $commcount = ' ('.
        get_comments_number($archPost->ID).')';
}

$link = get_permalink($archPost);
echo "          <li class='collapsArchPost'>
        <a href='$link' " . "title='$title_text'>
        $text</a>$commcount</li>\n";

New Style Code

if ($showPostDate ) {
    $theDate = mysql2date($postDateFormat, 
        $archPost->post_date );
}

if ($showCommentCount ) {
    $commcount = ' ('.
        get_comments_number($archPost->ID).')';
}

$link = get_permalink($archPost);
echo "          <li class='collapsArchPost'>
        <div class=\"collapsArchDate\">$theDate</div>
        <a href='$link' " . "title='$title_text'>
        $text</a>$commcount</li>\n";

In case you don’t feel like comparing each part, here are the changes: