Индикатор прогресса заполнения папки ЛС

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Индикатор прогресса заполнения папки ЛС

CabinetAdmin 07 апр 2013, 09:04 Сообщение

Индикатор прогресса, в виде заполняющегося цветом поля, при заполнении папки личных сообщений.



Чтобы это реализовать, нам нужно внести одну небольшую правку в шаблон и добавить код 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%">&nbsp;[ <b>{FOLDER_CUR_MESSAGES}</b>/{FOLDER_MAX_MESSAGES} {L_MESSAGES} ({FOLDER_PERCENT}%) ]&nbsp;</td>


Меняем на:

Код: Выделить всё

<!-- IF FOLDER_MAX_MESSAGES neq 0 --> <td class="gensmall" nowrap="nowrap" width="100%">&nbsp;[ <b>{FOLDER_CUR_MESSAGES}</b>/{FOLDER_MAX_MESSAGES} {L_MESSAGES} ({FOLDER_PERCENT}%) ]&nbsp; <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; - высота индикатора.
Хочешь поблагодарить? Есть способы - Поддержать проект

Аватара пользователя
Иринка

Индикатор прогресса заполнения папки ЛС

Иринка 28 май 2019, 17:25 Сообщение

CabinetAdmin писал(а):Источник цитаты Индикатор прогресса, в виде заполняющегося цветом поля, при заполнении папки личных сообщений.

С мобильного вид не очень
Индикатор прогресса заполнения папки ЛС - Screenshot_20190528-172306.png

Аватара пользователя
CabinetAdmin

Индикатор прогресса заполнения папки ЛС

CabinetAdmin 28 май 2019, 18:19 Сообщение

Удалите из стилей width: 300px;.

зы. У вас вид мобильного не правильный. То меню что слева, которое видно немного, должно быть сразу над надписью "Просмотр сообщений: Входящие". Да и вообще вся страница смещена сильно...
Хочешь поблагодарить? Есть способы - Поддержать проект

Аватара пользователя
Иринка

Индикатор прогресса заполнения папки ЛС

Иринка 29 май 2019, 08:06 Сообщение

CabinetAdmin писал(а):Источник цитаты зы. У вас вид мобильного не правильный. То меню что слева, которое видно немного, должно быть сразу над надписью "Просмотр сообщений: Входящие". Да и вообще вся страница смещена сильно...

Я ничего не правила там, все так изначально было и есть, независимо какой выбираю стиль(


Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость