Skinning a Splitbar

[cjustice]

I'd like to skin the splitbar such that aligns to the right, giving it a look of being attached to the right panel. I've tried tinkering with the properties in load_skin.js and skin_styles.css but with no luck. Below is what firebug is showing me for the splitbar, and if I modify the align property on the img from absmiddle and set it to right, it does what I want. So how do I do that in code?

Thanks!

<table cellpadding="0" cellspacing="0">
  <tbody>
     <tr>
        <td class="splitbar" style="margin: 0px; border: 0px none; padding: 0px; background-image: none; background-color: transparent; font-size: 1px;">
            <img src="http://127.0.1.1:8888/nmt/sc/skins/Jeppesen/images/Splitbar/vsplit_snap.gif" name="isc_9Gisc_Snapbar_0_label$4u" style="vertical-align: middle;" eventpart="icon" suppress="TRUE" align="absmiddle" border="0" height="35" width="5">

[Isomorphic]

Can you clarify with a screenshot of the designed look?

[cjustice]

Attached are way it is by default, and then with the align property set to right.

Thanks for the fast reply Isomorphic!

[Isomorphic]

Hmm, sorry, what are we looking at here? Could you "zoom out"?

Also, is this a default skin (which one) or have you applied some customizations?

[cjustice]

This is the split bar separating two canvases that have a grid on the left, and a Section Stack on the right. We are using the Simplicity Skin, and are customizing it to match our companies look & feel.

Attached is a zoomed out screen shot. I can't take a picture of the whole app as it is proprietary and not released to the public yet.

[Isomorphic]

First, you might want to reconsider, because this same SnapBar is used everywhere you have a resizeBar for a Layout, and it has both collapsed and expanded states. Because you've got a shadow on the component on the left, it arguably looks better to modify it as you've shown. In most other contexts, it could weird, because it would seem to attach the resizer to one element or the other when it's really a separate element between the two.

However if you feel like digging into this, this fragment of the skin file is what's setting this up.

        isc.Snapbar.addProperties({
            vSrc:"[SKIN]vsplit.gif",
            hSrc:"[SKIN]hsplit.gif",
            ....
            showDownGrip:false,
            gripBreadth:5,
            gripLength:35,

That floating image is the "grip" and the properties controlling it are documented on StretchImg. You probably want to widen gripBreadth to match the full size of the Snapbar, then replace the media so it's that full width but leaves transparent pixels in order to position the visible part of the image as you want it.