Farben des Fortschrittsbalkens anpassen

- New

Sie müssen angemeldet sein, um Vorschläge einreichen zu können.
Jetzt anmelden!

March 3, 2024 at 10:48 AM

Moin,

seit WBB 6.0 ist der Fortschrittsbalken des Spenden-Plugins etwas unglücklich.

Wenn das Ziel nahezu erreicht wird, ist der Balken gelb und färbt sich dann rot ab 100%.

Liegt wahrscheinlich daran dass der "conversationQuotaMeter" Fortschrittsbalken dafür benutzt wird.

Es wäre super, wenn die Farbgebung wieder angepasst wird, sodass der Balken mit erreichen der 100% grün ist und nicht rot.

Vielen Dank,
dr-phil

UlrichXIII

October 24, 2025 at 4:29 PM

Hatte das gleiche Problem. Das ergibt bei Konversationen Sinn, wo der Balken rot wird, wenn der Speicher aufgebraucht ist.
Bei Spenden ist das genau verkehrt herum.

Habe es bei mir über CSS gelöst. Ohne Garantie.

Code

/* SPENDENBALKEN FARBE INVERTIEREN */

#tpl_wcf_donations meter.conversationQuotaMeter {
  appearance: none;
  -webkit-appearance: none;
}

/* SPENDENBALKEN FARBE INVERTIEREN Chrome/Edge/Safari */
#tpl_wcf_donations meter.conversationQuotaMeter::-webkit-meter-bar { background: #eee; }
#tpl_wcf_donations meter.conversationQuotaMeter::-webkit-meter-optimum-value { background: #e74c3c; }        /* < 100% -> rot */
#tpl_wcf_donations meter.conversationQuotaMeter::-webkit-meter-suboptimum-value { background: #f1c40f; }     /* optional gelb */
#tpl_wcf_donations meter.conversationQuotaMeter::-webkit-meter-even-less-good-value { background: #2ecc71; } /* >= 100% -> grün */

/* SPENDENBALKEN FARBE INVERTIEREN Firefox */
#tpl_wcf_donations meter.conversationQuotaMeter:-moz-meter-optimum::-moz-meter-bar        { background: #e74c3c; }
#tpl_wcf_donations meter.conversationQuotaMeter:-moz-meter-sub-optimum::-moz-meter-bar     { background: #f1c40f; }
#tpl_wcf_donations meter.conversationQuotaMeter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #2ecc71; }

Display More

dr-phil

December 14, 2025 at 11:18 PM

Hi UlrichXIII

Der Code funktioniert schonmal super auf der "Donations" Seite. Allerdings nicht auf anderen Seiten, wo ich nur die Box anzeigen lasse.
Hast du dafür noch eine Idee?

dr-phil

December 14, 2025 at 11:54 PM

ok, damit klapptes nun auch in allen Boxen:

CSS: Stilunabhängiges CSS und SCSS

/*SPENDENBALKEN FARBE INVERTIEREN - Globaler Selektor für die Spenden-Box */
[data-box-identifier="com.woltlab.wcf.DonationGoal"] meter.conversationQuotaMeter {
  appearance: none;
  -webkit-appearance: none;
}

/* SPENDENBALKEN FARBE INVERTIEREN - Chrome/Edge/Safari */
[data-box-identifier="com.woltlab.wcf.DonationGoal"] meter.conversationQuotaMeter::-webkit-meter-bar { background: #eee; }
[data-box-identifier="com.woltlab.wcf.DonationGoal"] meter.conversationQuotaMeter::-webkit-meter-optimum-value { background: #e74c3c; } /* < 100% -> rot */
[data-box-identifier="com.woltlab.wcf.DonationGoal"] meter.conversationQuotaMeter::-webkit-meter-suboptimum-value { background: #f1c40f; } /* optional gelb */
[data-box-identifier="com.woltlab.wcf.DonationGoal"] meter.conversationQuotaMeter::-webkit-meter-even-less-good-value { background: #2ecc71; } /* >= 100% -> grün */

/* SPENDENBALKEN FARBE INVERTIEREN - Firefox */
[data-box-identifier="com.woltlab.wcf.DonationGoal"] meter.conversationQuotaMeter:-moz-meter-optimum::-moz-meter-bar { background: #e74c3c; } /* < 100% -> rot */
[data-box-identifier="com.woltlab.wcf.DonationGoal"] meter.conversationQuotaMeter:-moz-meter-sub-optimum::-moz-meter-bar { background: #f1c40f; } /* optional gelb */
[data-box-identifier="com.woltlab.wcf.DonationGoal"] meter.conversationQuotaMeter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #2ecc71; } /* >= 100% -> grün */

Display More

Your browser has JavaScript disabled. If you would like to use all features of this site, it is mandatory to enable JavaScript.