Applying a mask/skin to UI chat?

Hi all,

I have a UI chatbox that I am trying to customise, however I am a little unsure of how to go about it. This is what the chatbox currently looks like:

And this is a rough sketch of what I want it to look like:

I'm not so much looking for help with the background (although anything helps), but moreso how I would have the top and bottom sections layered over the box, as well as having the scrollbar there with the two arrows above and below that, when clicked, perform the same kind of scroll motion as the bar, like the scrollbars on a web browser.

If anyone has any advice or tutorials that could help that would be greatly appreciated.

Cheers