So hier mal die Umsetzung für das Einfügen einer Statusbar / Progressbar im BBCode 2.0 auf reiner CSS Basis.
Format: [status=
XX]
YY[/status] (
XX = Zahl von 0-100 ohne Prozentzeichen /
YY = Bescheibung)
Beispiel: [status=75]Ich habe zwei Drittel schon erreicht[/status]
Bilder: +
Folgenden Code (Zeile 728-730) in
include/includes/class/bbcode.php einfügen:
//> Darf BB Code [S] dekodiert werden?
if($this->permitted['s'] == true) {
//> Format: [s]xxx[/s]
$this->pattern[] = "%\[s\](.+)\[\/s\]%Uis";
$this->replace[] = "<strike>\$1</strike>";
}
//> Format: [status=XX]YYY[/status] (XX = Zahl von 0-100 / YYY Bescheibung)
$this->pattern[] = "%\[status=([0-9]|[1-9][0-9]|100)\](.+)\[\/status\]%Uis";
$this->replace[] = "<div class=\"status\"><div class=\"status-desc\">$2</div><div class=\"status-stat\">$1%</div><div class=\"status-bar\" style=\"width:$1%\"></div></div>";
###############################################
//> Darf BB Code [LEFT] dekodiert werden?
if($this->permitted['left'] == true) {
//> Format: [left]xxx[/left]
$this->pattern[] = "%\[left\](.+)\[\/left\]%Uis";
$this->replace[] = "<div align=\"left\">\$1</div>";
}
Nun noch in deine
style.css (im Ordner include/designs/) die CSS-Formatierung des Balkens einfügen. Diese kann dann in Form und Farbe angepasst werden.
.status {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
line-height: 15px;
color: #fff;
text-align: left;
width: 90%;
padding: 4px;
background: rgba(0, 0, 0, 0.25);
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.status-stat {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
float: right;
padding-right: 5px;
text-align: right;
}
.status-desc {
text-shadow: 0 0 2px rgba(0, 0, 0, 1);
font-style: italic;
position: absolute;
margin-top:-15px;
text-align: left;
}
.status-bar {
height: 16px;
border-radius: 4px;
background-image: -webkit-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0,0,0,.2)), -webkit-linear-gradient( left, #900, #090);
background-image: -moz-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0,0,0,.2)), -moz-linear-gradient( left, #900, #090);
background-image: -ms-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0,0,0,.2)), -ms-linear-gradient( left, #900, #090);
background-image: -o-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0,0,0,.2)), -o-linear-gradient( left, #900, #090);
background-image: linear-gradient( top, rgba(255, 255, 255, .25), rgba(0,0,0,.2)), linear-gradient( left, #900, #090);
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
FERTIG!