Beschriftungen auf Grafik-Buttons von WordPress-Themes ändern

Antworten-Button in Css ändern

Mittlerweile habe ich mein englischsprachiges Theme “Smoky” eingedeutscht – z. B. die Begriffe “continue reading” in “weiterlesen” und “subscribe RSS Feed” in “abonniere RSS feed”. Meiner Meinung nach kann nicht immer davon ausgegangen werden, dass jeder Blogbesucher englisch versteht und um es ihm zu erleichtern, habe ich mich eben nach und nach mit den jeweiligen Einträgen in php- und css-Dateien beschäftigt und umgemodelt. Außerdem erscheint mir mein Blog durch diese kleinen Eingriffe einfach harmonischer.

Ausgebremst hatten mich erst einmal die Button “Submit” und “Reply”, was darin begründet ist, dass es sich bei ihnen nicht nur um Texte handelt, die lediglich in php und css geändert werden. Hierbei handelt es sich um Grafiken, die  die Bearbeitung in einem Bildprogramm erfordern. Das ist aber gar nicht so schwierig und ich möchte hier kurz beschreiben, wie das funktioniert.

Ändern des “Senden”-Button in PhotoImpact X3

Bei mir heißt die Datei button_submit.gif und befindet sich unter wp-content/themes in dem jeweiligen Themenordner bei images. Diese habe ich heruntergeladen und mit PhotoImpact X3 geöffnet. Mein Button ist schwarz mit weißer Schrift. Nun könnte man ja sagen, ich übermale die weiße Schrift einfach mit schwarzer Farbe. Vergrößert man diesen Button mal auf 800 %,  ist zu sehen, dass der Hintergrund nicht nur einfach schwarz sondern leicht grau schattiert ist, um ein plastisches Aussehen zu erzielen.

Würde man die Schrift also einfach schwarz überpinseln, fielen die feinen Schattierungen weg und damit wohl auch der plastische Effekt. Daher habe ich nicht das Werkzeug “malen” sondern “klonen” ausgewählt. Ich demonstriere mal, wie ich die Beschriftung geändert habe:

Ändern des “Senden”-Button in PaintNet

Da aber nicht jeder eine Kaufsoftware zur Bildbearbeitung verwendet, habe ich dann doch noch mal PaintNet heruntergeladen. Seitdem ich PhotoImpact X3 benutze, hatte ich es an meinem neuen Notebook nicht mehr installiert. Da ich aber selber neugierig war, ob die Buttonänderung auch mit kostenloser Software wie PaintNet funktioniert, habe ich es dann mal ausprobiert. Und… es funktioniert! Und das sogar noch einfacher als mit PhotoImpact X3. Wie, seht ihr hier:

 

Diese neue Datei (ich habe sie button_senden.gif genannt) wird dann wieder in den o. g. Imageordner des Theme-Verzeichnisses hochgeladen.

Änderung in comments.php*Nun muss noch eine kleine Änderung in der Datei comments.php vorgenommen werden. Diese ist direkt in dem eigenen Themes-Ordner unter wp-content/themes zu finden. Darin habe ich dann den alten Namen durch den der neuen Bilddatei ersetzt:



Antworten-Button in Css ändernNoch ein kleiner Hinweis zu dem “Reply”- bzw. “Antworten”-Button: hier musste bei mir die entsprechende Bilddatei in der CSS-Datei (style.css) des Templates geändert werden:

 

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

10 Kommentare

  • Hey Sylvi,
    klasse Tutorial! Vor allem die Filme dazu sind super und besser als tausend beschreibende Worte.
    LG Pauli
    (…so… jetzt noch auf den “Senden”-Knopf drücken…)

    • @Pauli Danke schön. Ja, bevor ich versuche, die Beschreibungen in Worte zu fassen, erstelle ich lieber ein Videotutorial, das macht einiges sehr viel deutlicher. Ich habe auch versucht, mich an die Tipps von wapr in meinem Beitrag über das Erstellen von Videotutorials zu halten und ich meine, dass die Videos diesmal auch relativ zügig geladen werden, oder? YouTube hat zwar bei dem 2. Tutorial erst wegen irgendwelcher falschen Video- und Audiocodecs gemeckert. Geklappt hat es dann letztendlich doch.

      @ Webmaster Super, da freue ich mich :-D Ich habe Twitter ja auch mittlerweile sehr zu schätzen gelernt.

  • …was immer das für Tipps von wapr waren, sie scheinen gut gewesen zu sein. Selbst bei meinem “Dorf-DSL” ging das Laden der Videos zügig und ohne Ruckeln von statten! :-D
    Mindestens ebenso wichtig, wenn nicht sogar wichtiger, ist das Zeitgefühl bei den einzelnen Bearbeitungsschritten, die Du abgefilmt hast. Das ist meiner Meinung nach optimal gelungen. Man hat genügend Zeit gedanklich den Aktionen zu folgen. Die Gesamtlänge ist dennoch nicht zu ausgedehnt, sodass man leicht den Film nochmals anschauen kann.
    Von mir noch mal “Daumen hoch” (….. und “Senden” drücken ;-) )

  • Wiesi sehe ich anstelle der video tutorials nur ein gebrochenes you tube icon. Surfe mit dem ipad.

    • @ Pauli Das freut mich, dass auch bei Dir das Video ruckelfrei läuft. Ja, ich habe versucht, die Schritte so darzustellen, dass man sie gut nachvollziehen kann, andererseits soll der Betrachter auch nicht dabei “einschlafen” ;-)

      @Philipp Ich habe mal ein wenig gegoogelt und eine Anleitung gefunden zum Thema YouTube auf dem iPad, da ich selber keines besitze und mich damit nicht auskenne. In diesem Beitrag wird erklärt, dass ein spezielles YouTube-App benötigt wird oder das Aufrufen der mobilen Seite über den Safari-Browser möglich ist. Es ist also kein Problem meines Beitrages, sondern erfordert lediglich einen Eingriff von Dir an Deinem ipad.

  • Danke für das Video. Hatte ebenfalls nach einer Möglichkeit gesucht, Beschriftungen zu ändern. Da ich nicht so ein Grafikexperte bin, hat mir die Beschreibung sehr geholfen!