Gotchas with writing custom Posterous Themes
As I was creating a custom theme for my Posterous blog, I ran into a few gotchas that the dev team should consider looking into.
The biggest glaring issue is the way they handle ordered/unordered list elements. For some reason, Posterous seems to want to override the style settings for these elements with it's own settings due to the fact they use a global style definition for list elements! Here are the offending lines in Posterous's main CSS file "post.css"
li { margin-top: 5px; }
li { list-style-type: none; }
ul li { list-style-type: disc; }
ol li { list-style-type: decimal; }
Note that yes, there are 2 definitions of "list item" style. As you can see since these are classless definitions, they will take priority over anything that is not explicitly defined, which includes the common "zeroing out the padding margin" trick that many developers use.
* { padding: 0px; margin: 0px; }
Even though my included stylesheet is included after theirs, if I do not explicitly define the list styles they will be overridden in the priority system. It's a very easy fix, but it is something that should be fixed on Posterous's end in my opinion.
#profile ul li { margin-top: 0px; }
This will override their settings with my own. As you are designing your Posterous themes, keep that in mind if things seem out of place. Firebug is amazingly useful to see what styles are being inherited and which styles are being overridden.
