in one of my scene I have
<div id='MenuList'></div>
then I add list to it like this:
$('#MainListTitles').sfList({
data : [ 'AAA', 'BBBB', 'CCC']
});
How can I customize colors and height of each list item ?? I tried in css like this:
#MenuList.sf-ui-list {height: 333px; text-align: right; background-color:#ffffff} - works
#MenuList.sf-ui-list-item {background-color:#000000} - not working
First of all, "#MenuList.sf-ui-list-item" would never work, because you don't have the same element with id "MenuList" and class "sf-ui-list-item". This is basic css. Correct usage would be "#MenuList .sf-ui-list-item".
On the other hand, Samsung does a very lousy job with it's SmartTV SDK. It's so bad that it looks like they don't even want people to develop apps for it.
According to the API doc, you should indeed style class "sf-ui-list-item", but if you run your project with "Debug Samsung Smart TV App using Web Inspector" you can see that they use class "sf-ui-list-blured".
So, logical step would be to style:
#MenuList .sf-ui-list-blured { ... }
I would recommend that you maybe create your own styles and pass them as 3 parameters in ".sfList" command (classes: focusCssClass, blurCssClass and selectCssClass as stated in API doc).