Internet Tutorials

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.

1 2Nächste Seite
Tags

Simon Lüthje

Ich bin der Gründer dieses Blogs und interessiere mich für alles was mit Technik zu tun hat, bin jedoch auch dem Zocken nicht abgeneigt. Geboren wurde ich in Hamburg, wohne nun jedoch in Berlin und arbeite bei Caseking.

Ähnliche Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Close