Kristian Lunde

www.klunde.net

Archive for the ‘CSS’ tag

My Bookshelf & openbook

without comments

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. [No Book Data for this Book Number]
  3.  
  4. [No Book Data for this Book Number]
  5.  
  6. [No Book Data for this Book Number]
  7.  
  8. </ul>

You can see the result here: My Bookshelf .

Written by Kristian Lunde

November 22nd, 2009 at 11:19 pm

Posted in web,web development,Wordpress

Tagged with ,

Google doctype

without comments

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)

Written by Kristian Lunde

May 15th, 2008 at 1:07 pm

Cheat sheets

without comments

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/

Written by Kristian Lunde

May 12th, 2008 at 9:19 pm

Posted in Databases,Misc,PHP,web development

Tagged with , , ,

Adobe Kuler

without comments

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

Written by Kristian Lunde

May 7th, 2008 at 1:32 pm

Posted in web design,web development

Tagged with ,

CSS guidelines

without comments

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

Written by Kristian Lunde

May 2nd, 2008 at 6:45 pm

Posted in web development

Tagged with

Get Adobe Flash player