I puzzled through this as well and have been successful in making my own custom frame.
My advice is to begin with an "edgefile" that is part of the standard set, namely, the Tutorial frames. (I posted code under another topic recently so shan't duplicate it here; you can look at
Creating custom frame borders? for that.)
The problem with using the standard frame graphics is that they have all the little background graphics, such as horizontal rules and item spaces, that you see in-game. I've seen the Taxi frame used, which is probably the least intrusive. Then you can put a circular image into the badge using a Texture element i and a file attribute. Remember to make anything not part of your image transparent. You will also have to do this in a different place, namely as Textures inside the ARTWORK layer instead of an edgeFile attribute inside the Frame definition with some extra elements. You'll have to write code for all four corners (the frame graphic parts look like UI-TaxiFrame-TopLeft.blp, etc.). Finally, it may not look quite right unless your window is the same size as the window it's based on, which values I don't remember. Oh! and speaking of values, the sides of your image have to be powers of 2: 32, 64, 128, etc. We think that you can have different values for horizontal and vertical, but I haven't tested this yet.
I will write a small tutorial on this very issue in the near future, but that should get you going.