Creating a custom block

I have been trying to create a new block template which has a background
image along with the header text.

So I copied block/default.xt and renamed it customleft.xt. I then changed
the div class as follows:

<xar:if id="title_condition" condition="!empty($title)">
<div class="xar-block-head">
<div class="custom-xar-block-title">#$title#</div>
</div>
</xar:if>
<div class="xar-block-body">
#$content#
</div>
<div class="xar-block-foot"></div>

And added the following into the style.css file:

.custom-xar-block-title {
font-weight: bold;
font-style: italic;
font-size: 11pt;
background-image: url(../images/customleftheader.gif);
background-position: center center;
background-repeat: repeat-y;
}

I then created a new base/text block instance using the "customleft"
template (does this need .xt on the end?). However nothing changes... any
ideas what I have done wrong?

Thanks,
Mark.