Archive for the ‘CSS’ tag
My Bookshelf & openbook
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:
-
<li>
-
<div class="medium">[OB_COVER_MEDIUM]</div>
-
<div class="description">
-
<div class="title">[OB_TITLE]</div>
-
<div class="meta-1">Written by: [OB_AUTHORS]</div>
-
<div class="publisher-year">[OB_PUBLISHER] [OB_PUBLISHYEAR]</div>
-
<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]
-
</div>
-
<div class="clearboth"></div>
-
</li>
This is the css I added:
-
ul.books {
-
list-style-type: none;
-
}
-
-
ul.books li {
-
border-bottom: 1px solid #ccc;
-
margin-bottom: 15px;
-
padding-bottom: 15px;
-
}
-
-
ul.books li div.medium {
-
float:left;
-
margin-right: 10px;
-
}
-
-
ul.books li div.medium img {
-
width:120px;
-
}
-
-
ul.books li div.description {
-
float: left;
-
width: 450px;
-
}
-
-
ul.books li div.description div {
-
font-size: 11px;
-
padding-top: 5px;
-
}
-
-
ul.books li div.clearboth {
-
clear: both;
-
}
At last I added this custom html in the “my bookshelf” page:
-
<ul class="books">
-
[Open Library Server Error]
-
-
[Open Library Server Error]
-
-
[Open Library Server Error]
-
-
</ul>
You can see the result here: My Bookshelf .
Google doctype
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)
Cheat sheets
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/
Adobe Kuler
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.
CSS guidelines
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