Индикатор прогресса заполнения папки ЛС
Добавлено: 07 апр 2013, 09:04
Индикатор прогресса, в виде заполняющегося цветом поля, при заполнении папки личных сообщений.
Чтобы это реализовать, нам нужно внести одну небольшую правку в шаблон и добавить код css в стили.
Для prosilver
Открываем
Меняем на:
В тему вашего стиля, можно в самый низ, добавляем:
Для subsilver2
Открываем
Меняем на:
В тему вашего стиля, можно в самый низ, добавляем:
Размеры индикатора в обоих вариантах меняются в css:
Чтобы это реализовать, нам нужно внести одну небольшую правку в шаблон и добавить код css в стили.
Для prosilver
Открываем
ucp_pm_message_header.html
, находим:
Код: Выделить всё
<!-- IF FOLDER_STATUS and FOLDER_MAX_MESSAGES neq 0 --><p>{FOLDER_STATUS}</p><!-- ENDIF -->
Код: Выделить всё
<!-- IF FOLDER_STATUS and FOLDER_MAX_MESSAGES neq 0 --><p>{FOLDER_STATUS}</p>
<div class="pm-bar-outer">
<div class="pm-bar-inner">
<div style="width:{FOLDER_PERCENT}%;" class="<!-- IF FOLDER_PERCENT gt 80 -->pm-bar-alert<!-- ELSE -->pm-bar-ok<!-- ENDIF -->"></div>
</div>
</div>
<!-- ENDIF -->
Код: Выделить всё
/* PM Bar */
.pm-bar-outer {
width: 300px;
height: 12px;
padding: 1px;
margin: -8px 0 8px 0;
border: solid 1px #555555;
}
.pm-bar-inner {
width: 100%;
height: 100%;
background-color: #E6E6E6;
}
.pm-bar-ok {
height: 100%;
background-color: #A9B8C2;
}
.pm-bar-alert {
height: 100%;
background-color: #D31141;
}
Для subsilver2
Открываем
ucp_pm_message_header.html
, находим:
Код: Выделить всё
<!-- IF FOLDER_MAX_MESSAGES neq 0 -->
<td class="gensmall" nowrap="nowrap" width="100%"> [ <b>{FOLDER_CUR_MESSAGES}</b>/{FOLDER_MAX_MESSAGES} {L_MESSAGES} ({FOLDER_PERCENT}%) ] </td>
Код: Выделить всё
<!-- IF FOLDER_MAX_MESSAGES neq 0 -->
<td class="gensmall" nowrap="nowrap" width="100%"> [ <b>{FOLDER_CUR_MESSAGES}</b>/{FOLDER_MAX_MESSAGES} {L_MESSAGES} ({FOLDER_PERCENT}%) ]
<div class="pm-bar-outer">
<div class="pm-bar-inner">
<div style="width:{FOLDER_PERCENT}%;" class="<!-- IF FOLDER_PERCENT gt 80 -->pm-bar-alert<!-- ELSE -->pm-bar-ok<!-- ENDIF -->"></div>
</div>
</div>
</td>
Код: Выделить всё
/* PM Bar */
.pm-bar-outer {
width: 300px;
height: 12px;
padding: 1px;
margin: -8px 0 -4px 0;
border: solid 1px #555555;
display: inline-block;
}
.pm-bar-inner {
width: 100%;
height: 100%;
background-color: #E6E6E6;
}
.pm-bar-ok {
height: 100%;
background-color: #A9B8C2;
}
.pm-bar-alert {
height: 100%;
background-color: #D31141;
}
Размеры индикатора в обоих вариантах меняются в css:
Код: Выделить всё
.pm-bar-outer {
width: 300px;
height: 12px;
...
width: 300px;
- ширина индикатора. Для того чтобы сделать на всю ширину поля, измените значение на - 100%height: 12px;
- высота индикатора.