Tab customized styling

[yathish.venkatesh]

Hi,

I was trying to change the default as per the desired_Tab(attached) and i used TreeFrog theme with the following javascript properties for tab.

 if (isc.TabSet) {
        isc.TabSet.addProperties({
            tabBarThickness:23,
            scrollerButtonSize:19,
            pickerButtonSize:21,
            
            symmetricScroller:false,
            symmetricPickerButton:false,
            
            scrollerSrc:"[SKIN]scroll.png",
            pickerButtonSrc:"[SKIN]picker.png",
            
            paneContainerClassName:"normal",
            
            showPaneContainerEdges:true,
            showPartialEdges:true,
            
            paneMargin:0,
            
            symmetricEdges:false,
            topEdgeSizes:{defaultSize:2, top:1, bottom:5, left:1},
            bottomEdgeSizes:{defaultSize:2, bottom:1, top:25},
            leftEdgeSizes:{defaultSize:2, left:1, right:25},
            rightEdgeSizes:{defaultSize:2, right:1, left:25},
            
            topEdgeOffsets:{right:1, bottom:2, left:1},
            bottomEdgeOffsets:{right:1, top:2},
            leftEdgeOffsets:{bottom:1, right:2},
            rightEdgeOffsets:{bottom:1, left:2}
        });
        isc.TabSet.changeDefaults("paneContainerDefaults", {
            edgeImage:"[SKIN]/TabSet/ts.png",
            edgeCenterBackgroundColor:"#FFFFFF"
        })
        isc.TabBar.addProperties({
            stackZIndex:"firstOnTop",
            memberOverlap:16,
            
            // keep the tabs from reaching the curved edge of the pane (regardless of align)
            layoutEndMargin:10,

            // have the baseline overlap the top edge of the TabSet, using rounded media
            baseLineSrc:"[SKIN]baseline.png",
            baseLineThickness:1,
            baseLineCapSize:2
        })
    }    
    if (isc.ImgTab) {
        isc.ImgTab.addProperties({
            src:"[SKIN]tab.png",
            items:[
                {name:"start", width:8, height:8},
                {name:"stretch", width:"*", height:"*"},
                {name:"end", width:28, height:28}
            ],
            labelLengthPad:8,
            showRollOver:true,
            showDown:false,
            titleStyle:"tabTitle"
        })
    }

I tried changing the properties and atlast did some trial and error method :) But i could not found the parameter/property which gives the desired tab as attached.

Attached is the desired and current status of my tabs. Let me know is this can be achieved and if so how?

Thanks,
Yathish

Desired is not attached because of space constraints. I dont need the space before tab bar starts.

[curiousgally]

use layoutStartMargin:0 in tabBar properties to remove the spacing before the first tab. :)

[yathish.venkatesh]

Isomorphic,

We have tried styling the tab as per our guidelines. But at the end, we achieved everything except setting baseline width. If i create a tab with 400px width, default width of baseline would be 400px, which is not desired when we want some curves in edges.

Attached is the example which clearly explains my problem. Let us know how can we achieve this?