Доброго времени суток.



Навеяно вот этим топиком.

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

1) Полностью заменяем содержимое файла templates/skin/synio/css/profile.css этим:

/* --------------------------------------------
	СТРАНИЦА ПОЛЬЗОВАТЕЛЯ
-------------------------------------------- */

.profile 				{ min-height: 48px; margin-bottom: 0; padding: 0 0px 20px 0; position: relative; }

.profile .button 		{ float: right; margin-left: 7px; }
.profile .avatar 		{ position: absolute; top: 0; left: 0; }
.profile .vote-label	{ text-transform: lowercase; text-align: center; font-size: 10px; color: #aaa; }
.profile .vote-profile 	{ float: right; margin-left: 10px; }
.profile .vote-profile .vote-topic	{ float: none; }
.profile .vote-profile .vote-topic .vote-item.vote-count	{ cursor: text; }

.profile .strength 					{ float: right; margin-left: 18px; }
.profile .strength .count { font-size: 11px; line-height: 1em; text-align: center; padding: 0px 10px 0 0; line-height: 23px; color: #628fa5; margin-bottom: 0px; background: #C6EDFF; border-radius: 15px; height: 24px; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.1) inset; box-shadow: 0 2px 3px rgba(0,0,0,.1) inset; }
.profile .strength .count .onestr { padding: 5px; background: #70B5FF; border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-right: 1px solid #C6EDFF; }
.profile .strength .count .twostrcolor { padding: 5px; background: #5E97D2; border-right: 1px solid #C6EDFF; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102) inset; }
.profile .strength .count .threestrcolor  { padding: 5px; background: #00BC45; border-right: 1px solid #C6EDFF; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102) inset; }
.profile .strength .count .fourstrcolor  { padding: 5px; background: #C9B800; border-right: 1px solid #C6EDFF; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102) inset; }
.profile .strength .count .fivestrcolor  { padding: 5px; background: #FF48B0; border-right: 1px solid #C6EDFF; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102) inset; }
.profile .strength .count .sixstrcolor  { padding: 5px; background: #E90000; border-right: 1px solid #C6EDFF; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102) inset; }

.profile .strength .count .twostr { padding: 5px; border-right: 1px solid #C6EDFF; }
.profile .strength .count .threestr { padding: 5px; border-right: 1px solid #C6EDFF; }
.profile .strength .count .fourstr { padding: 5px; border-right: 1px solid #C6EDFF; }
.profile .strength .count .fivestr { padding: 5px; border-right: 1px solid #C6EDFF; }
.profile .strength .count .sixstr { padding: 5px; border-right: 1px solid #C6EDFF; }
.profile .strength .count .nonestr { padding: 5px; }

.profile .strength .count .twostr:hover { padding: 5px; background: #5E97D2; border-right: 1px solid #C6EDFF; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102) inset; }
.profile .strength .count .threestr:hover  { padding: 5px; background: #00BC45; border-right: 1px solid #C6EDFF; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102) inset; }
.profile .strength .count .fourstr:hover { padding: 5px; background: #C9B800; border-right: 1px solid #C6EDFF; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102) inset; }
.profile .strength .count .fivestr:hover  { padding: 5px; background: #FF48B0; border-right: 1px solid #C6EDFF; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102) inset; }
.profile .strength .count .sixstr:hover { padding: 5px; background: #E90000; border-right: 1px solid #C6EDFF; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.102) inset; }

.profile .user-login 				{ width: 240px; font-size: 27px; line-height: 26px; font-weight: normal; margin-bottom: 5px; }
.profile .user-login.no-user-name 	{  }
.profile .user-name 				{ color: #949aa1; font-size: 17px; font-family: 'PT Sans', sans-serif; }

.profile-page-header 				{ font-size: 12px; font-weight: bold; margin-bottom: 20px; background: #f5f5f5; border-top: 1px solid #eee; color: #555; padding: 5px 10px 6px; }

.profile-info-about 		{ padding: 13px 20px 20px 135px; min-height: 100px; background: #fcfce9; border-radius: 5px; margin-bottom: 30px; color: #000; position: relative; }
.profile-info-about .avatar { position: absolute; top: 20px; left: 20px; border-radius: 5px; background: #fff; padding: 5px; -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2); box-shadow: 0 0 5px rgba(0,0,0,.2); }
.profile-info-about .avatar img { vertical-align: top; width: 80px; height: 80px; }
.profile-info-about h3 		{ font-size: 19px; margin-bottom: 5px; }
.profile-info-about .edit	{ font-size: 11px; }

.profile-left 	{ width: 360px; float: left; margin-right: 40px; }
.profile-right 	{ width: 185px; float: left; }

.profile-dotted-list { margin-bottom: 50px; }
.profile-dotted-list li { overflow: hidden; zoom: 1; margin-bottom: 5px; background: url(../images/dots.png)  0% 14px repeat-x; }
.profile-dotted-list li span { background: #fff; }
.profile-dotted-list li strong { float: right; width: 190px; font-weight: normal; background: #fff; }

.profile-contact-list { margin-bottom: 50px; }
.profile-contact-list li { margin-bottom: 5px; padding-left: 21px; position: relative; }
.profile-contact-list li i { position: absolute; top: 2px; left: 0; }

2) в templates/skin/synio/actions/ActionProfile/profile_top.tpl
После

<div class="strength">
<div class="count" id="user_skill_{$oUserProfile->getId()}">

Вставим:

<span class="onestr"></span>
<span class="twostr{if $oUserProfile->getSkill() >= 1}color{/if}" title=">1"></span>
<span class="threestr{if $oUserProfile->getSkill() >= 2}color{/if}" title=">2"></span>
<span class="fourstr{if $oUserProfile->getSkill() >= 5}color{/if}" title=">5"></span>
<span class="fivestr{if $oUserProfile->getSkill() >= 10}color{/if}" title=">10"></span>
<span class="sixstr{if $oUserProfile->getSkill() >= 40}color{/if}" title=">40"></span>
<span class="nonestr"></span>

Чистим кеш и смотрим, что получилось.