Рамка аватара с наклоном

Здравствуйте решил я сделать на bb2 рамку аватара с наклоном.
У меня уже стоит иконку онлайн и оффлайн, а так же уменьшение яркости аватара при оффлайне и увелечение яркости аватара при онлайне.

Итак ПА -> Оформление -> Цвета -> Каскадная таблица стилей
У меня было вот так:

Код:: /* скрыть дубль-иконку над аватаром */ .avaonline img.i_icon_online { display: none; } /* настройки аватар по умолчанию */ .avaonline img { opacity: 0.3; } /* аватары онлайн */ img.i_icon_online + a img { opacity: 1; }

А стало вот так:

Код:: /* скрыть дубль-иконку над аватаром */ .avaonline img.i_icon_online { display: none; } /* настройки аватар по умолчанию */ .avaonline img { opacity: 0.3; } /* аватары онлайн */ img.i_icon_online + a img { opacity: 1; } .avabor img { border-style: solid; border-width: 9px 8px 9px 9px; -moz-border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat; -webkit-border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat; -o-border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat; border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat; }

В куске:

Код:: -moz-border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat; -webkit-border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat; -o-border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat; border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat;

я использовал ссылку на рамку нарисованную мною в паинте размером 150*150
Рамка аватара с наклоном 1415748855

Данный кусок я сгенерировал на вот этом сайте предоставленном Даной Домирани вот в этой теме.

Дальше мне надо было добавить в самый конец моей css силектор из вот этой темы Comatose. Но полностью весь его код css мне не потребовался. У Comatose код css для bb2 выглядел вот так:

Код:: .poster-profile img{ margin-left: 3px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .poster-profile img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }

Так как мне часть данных селекторов не нужны были я этот код урезал под себя и получил вот такой код:

Код:: .poster-profile img{ -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .poster-profile img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }

Это мне дало плавное наклонение и ничего лишнего.
И тут мы закончили с CSS. Дальше предстояло то в чем я абсолютный профан. Коды.
ПА -> Оформление -> Шаблон "viewtopic_body"
У кого этот шаблон в области аватар не тронут скажу сразу нам потребуется кусок от 139 до 150 строки.
У меня этот код выглядел вот так учитывая все установленное ранее:

Код:: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="200"><div style="overflow: visible; width: 200px"> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br /> <span class="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}<br /> <div class="ava"><div class="avaonline">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}</div></div><span class="prfav">{postrow.displayed.ONLINE_IMG}</span> <br /><br /> <div class="prf"> <div class="user-in"> <img src="http://i24.servimg.com/u/f24/16/54/26/99/prof10.png" class="prfimg" alt="Профиль" title="Профиль" /> <div class="user-info">  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  {postrow.displayed.POSTER_RPG} </span><br /> <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" /> </div> </div> </div> </div></td>

Так как я не добавлял сгенерированный силектор в конец css а добавил к эффектам на аватаре то мне осталось приписать к этой строке:

Код:: <div class="ava"><div class="avaonline">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}</div></div><span class="prfav">{postrow.displayed.ONLINE_IMG}</span>

новый стиль который как раз и применял рамку (стиль отвечающий за наклон уже работает). И теперь эта строка начала выглядеть вот так:

Код:: <div class="ava"><div class="avaonline"><div class="avabor">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}</div></div></div><span class="prfav">{postrow.displayed.ONLINE_IMG}</span>

Следовательно мой кусок кода стал выглядеть вот так:

Код:: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="200"><div style="overflow: visible; width: 200px"> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br /> <span class="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}<br /> <div class="ava"><div class="avaonline"><div class="avabor">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}</div></div></div><span class="prfav">{postrow.displayed.ONLINE_IMG}</span> <br /><br /> <div class="prf"> <div class="user-in"> <img src="http://i24.servimg.com/u/f24/16/54/26/99/prof10.png" class="prfimg" alt="Профиль" title="Профиль" /> <div class="user-info">  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  {postrow.displayed.POSTER_RPG} </span><br /> <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" /> </div> </div> </div> </div></td>

Дальше этот шаблон сохраняется и опубликовывается.
И теперь мы видим на форуме вот такое:
Рамка аватара с наклоном 1415751433

На данный момент я пытаюсь разрешить вопрос наклона и кнопки онлайн вместе с аватарой, но буду рад если поможете.

Если я кому-либо из Вас помог это хорошо))))