Tab Skinning - I did my best...

[Danny Robinson <da...@gmail.com>]

Guys,

I've successfully managed to skin my tabs with images (skin entries below),
but it seems too hard.  Right now, they look pretty good, with images
providing rounded edges and shading.  However, I still have some problems to
solve.

1.) it seems I can't get the tabs to left align using images.  They seem to
fill 100% of the panel width

2.) the active tab can only be textually skinned as the
separator-after-selected entry doesn't seem to offer a way to skin the right
and tab curves of the tab.

3.) the tab widths can't be fixed, and seem to be based on the text.

4.) can I center my text in the tabs?

5.) also the skin documentation on the web seems out of date and doesn't
mention panelTabbed etc.

Thanks,
D.

af|panelTabbed::tab {
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-repeat : repeat-x;
    background-image :
url(/iAdvisorWeb/css/skins/CAFE/images/tabpanetab.png);
}

af|panelTabbed::tab-selected {
    height:    100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-repeat : repeat-x;
    background-image :
url(/iAdvisorWeb/css/skins/CAFE/images/tabpanetab.png);
}

af|panelTabbed::separator {
    width: 15px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-repeat : no-repeat;
    background-image :
url(/iAdvisorWeb/css/skins/CAFE/images/tabpanetabsep.PNG);
}

af|panelTabbed::separator-after-selected {
    width: 15px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-repeat : no-repeat;
    background-image :
url(/iAdvisorWeb/css/skins/CAFE/images/tabpanetabsep.PNG);
}

af|panelTabbed::cell-start {
    width : 5px;
    height : 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-repeat : no-repeat;
    background-image :
url(/iAdvisorWeb/css/skins/CAFE/images/tabpanetableft.png);
}

af|panelTabbed::cell-end {
    width : 5px;
    height : 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-repeat : no-repeat;
    background-image :
url(/iAdvisorWeb/css/skins/CAFE/images/tabpanetabright.png);
}


-- 
Chordiant Software Inc.
www.chordiant.com