MyBB: CSS Buttons verwenden

Normalerweise werden bei MyBB die ganzen Buttons zum Erstellen von Beiträgen etc. mit GIF-Bildern dargestellt. Also warum sollte man sich die Mühe machen und diese Buttons mit CSS darstellen?

Man kann das Aussehen der Buttons schnell ändern, indem man nur ein wenig CSS-Code ändert
Man muss die ganzen Bilder nicht jedes mal neu erstellen, wenn man eine Kleinigkeit ändern möchte
CSS wird schneller geladen und ist einfach besser

Und ich werde euch zeigen, wie ihr die ganzen Grafiken mit CSS-Code ersetzen könnt. Natürlich könnt ihr die Templates auch aufsuchen, falls ihr die Buttons nicht mehr in GIF sondern in z. B. PNG-Format haben wollt.

Zu editierende Templates

postbit_delete_pm
postbit_edit
postbit_email
postbit_find
postbit_forward_pm
postbit_multiquote
postbit_pm
postbit_quickdelete
postbit_quote
postbit_rep_button
postbit_reply_pm
postbit_replyall_pm
postbit_report
postbit_warn
postbit_www
forumdisplay_newthread
reputation_addlink
showthread_newreply
showthread_newreply_closed

Die Templates findet ihr alle im Admin-CP unter: Templates & Styles > Templates > Euer Template

Ändern der Templates

Zunächst müsst ihr die Templates einzeln anpassen. Ich werde euch nicht jedes einzelne Template erklären, da es eigentlich immer dasselbe ist. Deshalb werde ich als Beispiel den Button postbit_email nehmen.

Beispiel: postbit_email

Das postbit_email Template findet ihr in den Templates unter Post Bit Templates. Dort steht standardmäßig folgendes drin:

<a href="member.php?action=emailuser&amp;uid={$post['uid']}"><img src="{$theme['imglangdir']}/postbit_email.gif" alt="{$lang->postbit_email}" title="{$lang->postbit_email}" /></a>

Diesen Code ersetzen wir mit diesem:

<a href="member.php?action=emailuser&amp;uid={$post['uid']}" class="postbit">E-Mail</a>

Wir haben also das Bild aus dem Link entfernt und dem Link eine Klasse namens postbit zugewiesen. Statt dem Bild steht in dem Link nun einfach das Wort „E-Mail“.

Genauso müsst ihr bei den anderen Templates auch vorgehen. Das Bild aus dem Link entfernen, dem Link die Klasse postbit zuweisen und einen Linktext statt dem Bild angeben.

Buttons mit CSS formatieren

Noch sind die postbit-Links ja noch keine Buttons, sondern nur reine Textlinks. Diese wollen wir jetzt natürlich noch mit CSS formatieren. Da alle Links in den Templates nun die Klasse postbit zugewiesen bekommen haben, brauchen wir diese nur noch einmal in der CSS-Datei nach unseren Wünschen formatieren.

Wechselt dazu einfach im Admin-CP auf Templates & Styles > Themes > Euer Theme > global.css > Stylesheet bearbeiten: Fortgeschrittene Methode

Dort könnt ihr den CSS-Code angeben. Ich füge den Code für eine bessere Übersicht immer am Ende der Datei ein.

Einen schönen CSS-Button könnt ihr beispielsweise mit CSS-Buttongenerator erstellen. Ihr könnt aber natürlich auch gerne eigenen Code verwenden. Der eingefügte Code, mit dem Standardbutton des Generators würde dann so aussehen:

.postbit {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}
.postbit:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}
.postbit:active {
	position:relative;
	top:1px;
}

Achtet jedoch darauf, dass ihr auch den richtigen Klassennamen (postbit) verwendet, ansonsten funktioniert das ganze natürlich nicht.

Über Feedback und Anregungen würde ich mich sehr freuen, also haltet euch nicht zurück! 😉

Schlagwörter