Zum Download
ilch Version 2

Progressbar / Statusbar BBcode 2.0

Eingetragen von Lord|Schirmer am Di, 06. Jan 2015 - 20:23


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!