jquery mobile custom listview formatting

Question

So I'm working on a web app that makes use of the jquery mobile framework and I was hoping there was a way to further customize the appearance of list view elements. Specifically, I would like to be able position text practically at will, and also size text appropriately. I know jquery mobile has the header tag support built in, as well as a way for an element with class=ui-li-aside to appear on the top right of the list element in smaller text.

However, I ideally want a reusable list view element that has slightly different options. For starters, I want a 1 character title left-justified in the list element, with a font basically filling the entire height of the list item. Then on the right, instead of a text element thats justified right and positioned towards the top, I would like something that is vertically aligned in the center and right aligned. Finally, I want a third text element that is left aligned just to the left of the big 1 character-title, spanning the entire middle of the list view element.

Overall, I want each style list view element to be capable of something like this: (this is actually a picture of a UITableViewCell, but the gist is the same)

The count bubbles are taken care of natively in query mobile, just need to figure out how to set up classes for the three types of other text I want to display

Answer 1

ThemeRoller seems good for customizing colors, fonts, borders,... but not for positioning the elements in a different way. I think you will need to write your own .css files and overwrite classes like ui-li-heading, ui-li-aside or ui-li-desc. Good luck

Answer 2

Perhaps it would be possible to use the ThemeRoller which came with JQM 1.0, I think its the most accurate way to provide the 'reusability'. But I think you have to adapt the special characteristics you want individually, like filling the text height to 100%.

http://jquerymobile.com/themeroller/

zY