Tweaks to calibre-content server browse view. Displays book list as covers. Add the css rules as described and patch browse.html and browse.js in /usr/share/calibre/content_server/browse/ Then restart the content server to see the changes. Result should be like https://plus.google.com/u/0/photos/+TroyDack/albums/5763024133998901281/5945519253353…

browse.css

/*

  Add these css rules to the end of /usr/share/calibre/content_server/browse/browse.css
  
  Place them just before the final  }}} 

*/

#booklist .listnav {
        padding-bottom: 1em;
}

#booklist .listnav a {
        font-family: Verdana,Arial,sans-serif;
        font-size: 1.1em;
        border: 1px solid #cdc3b7;
        background: #ede4d4 url(../jquery_ui/css/humanity-custom/images/ui-bg_glass_70_ede4d4_1x400.png) 50% 50% repeat-x;
        font-weight: normal;
        color: #3f3731;
        padding: 5px;
        border-radius:6px;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0px;
        margin-right: 0px;
}
#booklist .listnav a:hover {
        border: 1px solid #f5ad66;
        background: #f5f0e5 url(../jquery_ui/css/humanity-custom/images/ui-bg_glass_100_f5f0e5_1x400.png) 50% 50% repeat-x;
        font-weight: normal;
        color: #a46313;
}
#booklist .listnav .navmiddle a {
        margin-right: 0.5em;
}

browse.html.patch

--- browse.html	2013-11-13 10:21:54.638417491 +1100
+++ browse.html.new	2013-11-13 10:22:36.589977908 +1100
@@ -8,7 +8,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=100" />
     <link rel="icon" type="image/x-icon" href="http://calibre-ebook.com/favicon.ico" />
 
-    <link rel="stylesheet" type="text/css" href="{prefix}/static/browse/browse.css" />
+    <link class="browse" rel="stylesheet" type="text/css" href="{prefix}/static/browse/browse.css" />
     <link type="text/css" href="{prefix}/static/jquery_ui/css/humanity-custom/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
     <link rel="stylesheet" type="text/css" href="{prefix}/static/jquery.multiselect.css" />
     <link rel="apple-touch-icon" href="{prefix}/static/calibre.png" />
@@ -47,9 +47,9 @@
             </div>
             <div id="nav-container">&nbsp;
             <ul id="primary-nav">
+		<li><a class="view-switch" href="#" title="Display books in a list view" rel="{prefix}/static/browse/browse.css">List</a></li>
+		<li><a class="view-switch" href="#" title="Display books as a cover grid view" rel="{prefix}/static/browse/cover.css">Cover</a></li>
                 <li><a id="nav-mobile" href="{prefix}/mobile" title="A version of this website suited for mobile browsers">Mobile</a></li>
-                <li><a id="nav-demo" href="{prefix}/old" title="The old version of this webiste">Old</a></li>
-                <li><a id="nav-download" href="{prefix}/opds" title="An OPDS feed based version of this website, used in special purpose applications">Feed</a></li>
             </ul>
             </div>

browse.js.patch

--- browse.js	2013-11-13 10:24:15.500942050 +1100
+++ browse.js.new	2013-11-13 10:23:51.793190325 +1100
@@ -101,6 +101,15 @@
     init_sort_combobox();
 
     $("#search_box input:submit").button();
+
+    if (cookie("css")) {
+    	$("link.browse").attr("href",cookie("css"));
+    }
+    
+    $("#primary-nav .view-switch").click(function() {
+	$("link.browse").attr("href",$(this).attr('rel'));
+	cookie("css", $(this).attr('rel'), {expires: 365, path: '/'}); 
+    });
 }
 
 // Top-level feed {{{

cover.css

/*

  Copy /usr/share/calibre/content_server/browse/browse.css to cover.css in the same directory
  
  Place the following css rules at the end of cover.css
  
  Place them just before the final }}}
  
*/

.loaded {
        text-align: center;
        vertical-align: top;
}

#booklist .summary {
        border: 1px solid black;
        border-radius: 10px;
        display:inline-block;                                                               
        text-align: center;
        width: 187px;
        height:315px;
        vertical-align: top;
        box-shadow: 2px 2px 3px #aaaaaa;
}

#booklist .summary:hover {
        background-color: lightgoldenrodyellow;
}

#booklist div.left {
        float: none;
        margin-left:1em;
        margin-right: 1em;
        height: 180px;
        width: 170px;
        margin-top: 1em;
}

#booklist a.summary_thumb img {
        box-shadow: 3px 3px 5px #474747;
}

#booklist div.right {
        height:auto;
        margin-bottom: 1em;
}

#booklist div.right .stars {
        margin-left: 1em;
}

#booklist div.right .stars a:nth-of-type(1){
        width: 7em;
        display: inline-block;
}

#booklist div.right .stars a:nth-of-type(2){
        display: none;
}

#booklist div.right .stars .series {
        font-size: small;
        margin-left: -16px;
        margin-right: -16px;
}

#booklist .title {
        font-size: medium;
        word-wrap: normal;
}

#booklist .listnav {
        padding-bottom: 1em;
}

#booklist .listnav a {
        font-family: Verdana,Arial,sans-serif;
        font-size: 1.1em;
        border: 1px solid #cdc3b7;
        background: #ede4d4 url(../jquery_ui/css/humanity-custom/images/ui-bg_glass_70_ede4d4_1x400.png) 50% 50% repeat-x;
        font-weight: normal;
        color: #3f3731;
        padding: 5px;
        border-radius:6px;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0px;
        margin-right: 0px;
}

#booklist .listnav a:hover {
        border: 1px solid #f5ad66;
        background: #f5f0e5 url(../jquery_ui/css/humanity-custom/images/ui-bg_glass_100_f5f0e5_1x400.png) 50% 50% repeat-x;
        font-weight: normal;
        color: #a46313;
}
#booklist .listnav .navmiddle a {
        margin-right: 0.5em;
}

.authors {
        display: none;
}

.comments {
        display: none;
}

.tags {
        display: none;
}

.formats {
        display: none;
}

#book_details_dialog .right * {
        display: inline-block;
}