Как изменить цвет / размер одного индикатора выполнения

Question

Я довольно новичок в jQuery-UI, но мне нравится то, что я вижу до сих пор.

Я использую тему 'blitzer' (так как мне нужны красные индикаторы выполнения), и у меня есть 4 индикатора выполнения одновременно на одной странице. Теперь мой премьер-министр хочет, чтобы один из них был зеленым и больше остальных. Я осмотрел предоставленную тему CSS, но не смог найти правильный тег, с которым можно повозиться. Кто-нибудь может выложить короткий код из двух индикаторов прогресса с разными размерами / цветами рядом?

Бонусный вопрос: меня попросили напечатать процент PB в самом PB - не важно, я просто добавил ярлык внутри div. Проблема в том, что текст на этикетке окрашен в белый цвет, поэтому, если PB пуст или наполовину пуст, текст становится невидимым. Есть ли способ контролировать цвет фона PB, или он задан внутри темы?

Большое спасибо!
Guy

Answer 1

Техник-путешественник:

Если вы загляните в папку css вашей загрузки jQueryUI, вы найдете папку темы; мой называется ui-lightness, ваш, вероятно, называется ui-blitzer. Перейдите в эту папку, а затем в папку изображений. Там вы найдете несколько файлов изображений, которые начинаются с букв ui-bg_diagonals и ui-bg_gloss. Это изображения, которые управляют индикаторами выполнения. Вы должны иметь возможность добавлять изображения из другой темы нужного цвета, которые будут управлять вашими другими строками состояния.

Кроме того, есть запись CSS под названием .ui-widget-overlay, которая ссылается на изображение ui-bg_diagonals-Thick_20_666666_40x40.png, которое, как мне кажется, является изображением, которое фактически управляет индикатором выполнения. Вам придется взломать CSS, чтобы вы могли добавить новый класс, который ссылается на ваше новое изображение в другой индикатор выполнения; Я еще не понял, как это сделать.

Answer 2

Так настроены столбцы, поэтому измените классы внутри них.

<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
   <div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
</div>

(внизу значка)

Изменить ui-progressbar и ui-progressbar-value.