Kristian Lunde » openbook http://www.klunde.net www.klunde.net Sun, 18 Jul 2010 21:00:28 +0000 http://wordpress.org/?v=abc en hourly 1 My Bookshelf & openbook http://www.klunde.net/2009/11/22/my-bookshelf-openbook/ http://www.klunde.net/2009/11/22/my-bookshelf-openbook/#comments Sun, 22 Nov 2009 23:19:54 +0000 Kristian Lunde http://www.klunde.net/?p=469

Yesterday I installed the openbook plugin for wordpress on this site. My intentions was to build a “My bookshelf” page similar to what Mats Lindh and Trond Huso have on their sites.

I installed the plugin without any problems but the layout was a bit nasty. I don’t know if that was because of the theme I am running on this site or if the openbook markup was messed up. Anyway I rewrote the html and css for the openbooks template on its configuration page and added some custom css to the site to get it working.

This is my openbook template:

  1. <li>
  2. <div class="medium">[OB_COVER_MEDIUM]</div>
  3. <div class="description">
  4. <div class="title">[OB_TITLE]</div>
  5. <div class="meta-1">Written by: [OB_AUTHORS]</div>
  6. <div class="publisher-year">[OB_PUBLISHER] [OB_PUBLISHYEAR]</div>
  7. <div class="category">[OB_LINK_WORLDCAT][OB_DOT][OB_READONLINE][OB_DOT][OB_LINK_LIBRARYTHING][OB_DOT][OB_LINK_GOOGLEBOOKS][OB_DOT][OB_LINK_BOOKFINDER]</div>[OB_COINS]
  8. </div>
  9. <div class="clearboth"></div>
  10. </li>

This is the css I added:

  1. ul.books {
  2.  list-style-type: none;
  3. }
  4.  
  5. ul.books li {
  6.  border-bottom: 1px solid #ccc;
  7.  margin-bottom: 15px;
  8.  padding-bottom: 15px;
  9. }
  10.  
  11. ul.books li div.medium {
  12.  float:left;
  13.  margin-right: 10px;
  14. }
  15.  
  16. ul.books li div.medium img {
  17.  width:120px;
  18. }
  19.  
  20. ul.books li div.description {
  21.  float: left;
  22.  width: 450px;
  23. }
  24.  
  25. ul.books li div.description div {
  26.  font-size: 11px;
  27.  padding-top: 5px;
  28. }
  29.  
  30. ul.books li div.clearboth {
  31.  clear: both;
  32. }

At last I added this custom html in the “my bookshelf” page:

  1. <ul class="books">
  2. [Open Library Server Error]
  3.  
  4. [Open Library Server Error]
  5.  
  6. [Open Library Server Error]
  7.  
  8. </ul>

You can see the result here: My Bookshelf .

]]> http://www.klunde.net/2009/11/22/my-bookshelf-openbook/feed/ 0