Kristian Lunde » CSS 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 Google doctype http://www.klunde.net/2008/05/15/google-doctype/ http://www.klunde.net/2008/05/15/google-doctype/#comments Thu, 15 May 2008 11:07:14 +0000 Kristian Lunde http://www.klunde.net/?p=19

Yesterday Google released their internal documentation of html, css and javascript. This is a brilliant resource for us web developers.

URL: http://code.google.com/docreader/#p(doctype)s(doctype)t(Welcome)

]]> http://www.klunde.net/2008/05/15/google-doctype/feed/ 0 Cheat sheets http://www.klunde.net/2008/05/12/cheat-sheets/ http://www.klunde.net/2008/05/12/cheat-sheets/#comments Mon, 12 May 2008 19:19:36 +0000 Kristian Lunde http://www.klunde.net/?p=18

When talking about cheat sheets, www.ilovejackdaniels.com has a list of a few good cheat sheets. I’ve actually printed some of them at work and taped them to the wall next to my computer.

Thanks to Dave Child for doing the work of putting together these sheets.

URL: http://www.ilovejackdaniels.com/cheat-sheets/

]]> http://www.klunde.net/2008/05/12/cheat-sheets/feed/ 0 Adobe Kuler http://www.klunde.net/2008/05/07/adobe-kuler/ http://www.klunde.net/2008/05/07/adobe-kuler/#comments Wed, 07 May 2008 11:32:21 +0000 Kristian Lunde http://www.klunde.net/?p=15

Are you sick of never finding the correct match of colors when developing a web application. Adobe solves your problem with their kuler system. This site contains a lot of matching color sets, and you can with ease find a suitable color scheme for your next web application.

URL: http://kuler.adobe.com

]]> http://www.klunde.net/2008/05/07/adobe-kuler/feed/ 0 CSS guidelines http://www.klunde.net/2008/05/02/css-guidelines/ http://www.klunde.net/2008/05/02/css-guidelines/#comments Fri, 02 May 2008 16:45:03 +0000 Kristian Lunde http://www.klunde.net/?p=13

Smashing magazine has a really good article about readability and maintenance of css files. I’ll definitely use some of these guidelines on my next web project.

Link: CSS styleguides

]]> http://www.klunde.net/2008/05/02/css-guidelines/feed/ 0