At Kevin's suggestion, added a partial border around the notebook, added a

notebook title to the top of the page, and highlighted the notebook title on
the right as well.

static/css/style.css

@@ -101,7 +101,7 @@ ol li {
   margin-top: 1em;
   margin-right: 2em;
   font-size: 85%;
-  line-height: 140%;
+  line-height: 100%;
 }
 
 #link_area h3 {
@@ -157,6 +157,27 @@ ol li {
   font-size: 85%;
 }
 
+#notebook_header_area {
+  font-weight: bold;
+  padding: 0.25em;
+  -moz-border-radius: 0.5em 0.5em 0.5em 0;
+  -webkit-border-radius: 0.5em 0.5em 0.5em 0;
+}
+
+#notebook_border {
+  padding: 0 0 0 0.3em;
+  margin-bottom: 1em;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+}
+
+#notebook_background {
+  padding: 0.25em 0.5em 0 1em;
+  background-color: #fafafa;
+  -moz-border-radius: 0.5em 0 0 0;
+  -webkit-border-radius: 0.5em 0 0 0;
+}
+
 #notes {
   text-align: left;
   margin-top: 1em;
@@ -318,3 +339,20 @@ ol li {
   -moz-border-radius: 0.5em;
   -webkit-border-radius: 0.5em;
 }
+
+.link_area_item {
+  margin-top: 0.25em;
+  padding: 0.25em 0.25em 0.25em 0.5em;
+}
+
+.current_notebook_name {
+  background-color: #b0d0ff;
+  -moz-border-radius: 0.5em;
+  -webkit-border-radius: 0.5em;
+}
+
+.trash_notebook_name {
+  background-color: #c0c0c0;
+  -moz-border-radius: 0.5em;
+  -webkit-border-radius: 0.5em;
+}

static/js/Wiki.js

@@ -52,20 +52,29 @@ Wiki.prototype.display_user = function ( result ) {
   if ( result.user.username == "anonymous" )
     return;
 
-  // display links for current notebook and a list of other notebooks that the user has access to
+  // display links for current notebook and a list of all notebooks that the user has access to
   var span = createDOM( "span" );
-  replaceChildNodes( "other_notebooks_area", span );
+  replaceChildNodes( "notebooks_area", span );
+
+  appendChildNodes( span, createDOM( "h3", "notebooks" ) );
 
-  appendChildNodes( span, createDOM( "h3", "other notebooks" ) );
   for ( var i in result.notebooks ) {
     var notebook = result.notebooks[ i ];
-    if ( notebook.object_id != this.notebook_id ) {
-      appendChildNodes( span, createDOM( "a", {
-        "href": ( notebook.name == "Luminotes" ) ? "/" : "/notebooks/" + notebook.object_id,
-        "id": "notebook_" + notebook.object_id
-      }, notebook.name ) );
-      appendChildNodes( span, createDOM( "br" ) );
+
+    if ( notebook.object_id == this.notebook_id ) {
+      var div_class = "link_area_item current_notebook_name";
+      var header_area = getElement( "notebook_header_area" );
+      replaceChildNodes( header_area, createDOM( "span", {}, notebook.name ) );
+    } else {
+      var div_class = "link_area_item";
     }
+
+    appendChildNodes( span, createDOM( "div", {
+      "class": div_class
+    }, createDOM( "a", {
+      "href": ( notebook.name == "Luminotes" ) ? "/" : "/notebooks/" + notebook.object_id,
+      "id": "notebook_" + notebook.object_id
+    }, notebook.name ) ) );
   }
 
   // display the name of the logged in user and a logout link
@@ -88,20 +97,25 @@ Wiki.prototype.populate = function ( result ) {
   var self = this;
 
   var span = createDOM( "span" );
-  replaceChildNodes( "notebook_area", span );
+  replaceChildNodes( "this_notebook_area", span );
 
   appendChildNodes( span, createDOM( "h3", this.notebook.name ) );
-  appendChildNodes( span, createDOM( "a", { "href": "/notebooks/" + this.notebook.object_id, "id": "recent_notes_link", "title": "View the most recently updated notes." }, "recent notes" ) );
-  appendChildNodes( span, createDOM( "br" ) );
-  appendChildNodes( span, createDOM( "a", { "href": "/notebooks/download_html/" + this.notebook.object_id, "id": "download_html_link", "title": "Download a stand-alone copy of the entire wiki notebook." }, "download as html" ) );
+  appendChildNodes( span, createDOM( "div", { "class": "link_area_item" },
+    createDOM( "a", { "href": "/notebooks/" + this.notebook.object_id, "id": "recent_notes_link", "title": "View the most recently updated notes." }, "recent notes" )
+  ) );
+  appendChildNodes( span, createDOM( "div", { "class": "link_area_item" },
+    createDOM( "a", { "href": "/notebooks/download_html/" + this.notebook.object_id, "id": "download_html_link", "title": "Download a stand-alone copy of the entire wiki notebook." }, "download as html" )
+  ) );
 
   if ( this.notebook.read_write ) {
     this.read_write = true;
     removeElementClass( "toolbar", "undisplayed" );
 
-    appendChildNodes( span, createDOM( "br" ) );
-    if ( this.notebook.trash )
-      appendChildNodes( span, createDOM( "a", { "href": "/notebooks/" + this.notebook.trash.object_id, "id": "trash_link", "title": "Look here for notes you've deleted." }, "trash" ) );
+    if ( this.notebook.trash ) {
+      appendChildNodes( span, createDOM( "div", { "class": "link_area_item" },
+        createDOM( "a", { "href": "/notebooks/" + this.notebook.trash.object_id, "id": "trash_link", "title": "Look here for notes you've deleted." }, "trash" )
+      ) );
+    }
 
     connect( window, "onunload", function ( event ) { self.editor_focused( null, true ); } );
     connect( "bold", "onclick", function ( event ) { self.toggle_button( event, "bold" ); } );

view/Link_area.py

@@ -6,9 +6,9 @@ class Link_area( Div ):
     Div.__init__(
       self,
       Div(
-        id = u"notebook_area",
+        id = u"this_notebook_area",
       ),
       Div(
-        id = u"other_notebooks_area",
+        id = u"notebooks_area",
       ),
     )

view/Main_page.py

@@ -44,7 +44,18 @@ class Main_page( Page ):
             id = u"top_area",
           ),
           Div(
-            id = u"notes",
+            id = u"notebook_header_area",
+            class_ = u"current_notebook_name",
+          ),
+          Div(
+            Div(
+              Div(
+                id = u"notes",
+              ),
+              id = u"notebook_background",
+            ),
+            id = u"notebook_border",
+            class_ = u"current_notebook_name",
           ),
           Noscript(
             Div( file( u"static/html/about.html" ).read() ),