On the title, the red background is kind of a cheat and it uses a white texture and does a SetVertexColor to change it from red/green/blue depending on mode. But poking around in UI.xsd there's a cool Gradient tag that does the same thing.
So for a titlebar:
Make the tooltip border as you did
Add a thin bar that spans the bottom of the titlebar (Interface\TradeSkillFrame\UI-TradeSkill-SkillBorder is the one I use)
Stretch a white texture (Interface\ChatFrame\ChatFrameBackground) across the titlebar area, then add Gradient min/max with orientation="VERTICAL" (default is horizontal--ItemRack options/help windows use it)
Here's an example:
Code:
<Layer level="ARTWORK">
<Texture file="Interface\TradeSkillFrame\UI-TradeSkill-SkillBorder">
<Anchors>
<Anchor point="TOPLEFT">
<Offset>
<AbsDimension x="5" y="-24"/>
</Offset>
</Anchor>
<Anchor point="BOTTOMRIGHT" relativePoint="TOPRIGHT">
<Offset>
<AbsDimension x="-5" y="-32"/>
</Offset>
</Anchor>
</Anchors>
<TexCoords left="0.1" right="1.0" top="0" bottom="0.25"/>
</Texture>
<Texture file="Interface\ChatFrame\ChatFrameBackground">
<Anchors>
<Anchor point="TOPLEFT">
<Offset>
<AbsDimension x="5" y="-5"/>
</Offset>
</Anchor>
<Anchor point="BOTTOMRIGHT" relativePoint="TOPRIGHT">
<Offset>
<AbsDimension x="-5" y="-32"/>
</Offset>
</Anchor>
</Anchors>
<Gradient orientation="VERTICAL">
<MinColor r="0.1" g="0.1" b="0.1"/>
<MaxColor r="0.5" g=".1" b=".1"/>
</Gradient>
</Texture>
</Layer>
On the scrollable tree, you'll probably want to create a FauxScrollFrame window with buttons it repaints as the window scrolls. There's nothing really close to built-in for a scrollable tree. A tutorial on FauxScrollFrames is here:
http://www.wowwiki.com/HOWTO:_Make_a...lFrameTemplate.