Помогите вывести текст на картинке

так это просто, дай свой html код где картинка.
вывод блока дай.

В shortstory.tpl в самом начале, или если у тебя выводится постер через доп. поле, то вставь перед выводом постера:

<div id="short_ser_count">Тут доп. поле выводит серии</div>

в файле style.css вставь в самом конце или где тебе удобно:

#short_ser_count { 
background: #E31739;
border-radius: 4px 0px 0px 4px;
top: 300px;
color: #fff;
float: left;
font-weight: 700;
left: 140px;
padding: 4px 10px;
position: absolute;
text-align: right;
text-shadow: #D4B979 0px 1px 0px;
width: 60px;
}

код скинь еще html
где вывод данного блока, где дивы прописаны со стилями.

#short_ser_count { 
background: #E31739;
border-radius: 4px 0px 0px 4px;
top: 300px;
color: #fff;
float: left;
font-weight: 700;
left: 140px;
padding: 4px 10px;
position: absolute;
text-align: right;
text-shadow: #D4B979 0px 1px 0px;
width: 60px;
}

ну смотри если у тебя идет так же как на картинки но серия с права, то делай так.
margin-left: -100px;
ну и если по выше поднять margin-top: -20px;

добавь в свой css

А как изменить цвет фона в зависимости от содержания дополнительного поля? Например будет только 4 вида "HD' "HQ" "SQ" и "LQ".

ну значит делаешь 4 вида дополнительных полей и для каждого свой стиль и в стили для каждого свой цвет

background-color: #000;

типа:

<div class="hdblack">[xfgiven_hd][xfvalue_hd][/xfgiven_hd]</div>

.hdblack{
background-color: #000;
padding: 4px; - это что бы отступ был у текста и цвета фона.
}