Archiv für den Monat: Juli 2013

Twoday-Tipp #2 – Kommentarformular anpassen

pimpmycommentform.jpg

Herr Nömix hat im Hilfe-Forum eine Frage zur Veränderung des Kommentarformulars aufgeworfen, die sicher auch für weitere Twoday-Blogger interessant ist.
Ich beschreibe nachstehend 2 Wege, wie man diese Änderungen umsetzen kann, rate jedoch nachdrücklich zu Methode #2 als dezentere und „unblutigere“ Lösung. Methode #1 ist eher für HTML-/CSS-erfahrene Blogger gedacht, die eine Operation am offenen Twoday-Herzen nicht scheuen (Not for the faint of heart!) und sich des Risikos eines evtl. beschädigten Layouts bewusst sind.

#1 Modifikation von Layout-Skins

Bekannterweise können angemeldete Twoday-Nutzer über die Klickfolge AdminLayoutSkins (HTML) bestimmte CSS- und HTML-Elemente ihres gewählten Layouts ändern.
Unter anderem ist dort auch das Skin „Kommentarformular (Comment.edit)“ änderbar – jedoch wird nach erster Code-Analyse schnell klar, dass die von Herrn Nömix anvisierten Felder offensichtlich in weiteren Skins versteckt sind, die selbst nicht so einfach für eine Änderung erreichbar sind.
Allerdings bietet Twoday unter AdminLayoutDieses Layout exportierenKomplett eine Möglichkeit an, sich die Gesamtmenge aller Skins in einer komprimierten Sammeldatei herunterzuladen, die mit jedem ZIP-Programm geöffnet werden kann.

 Tipp: Führen Sie den Download zweimal durch und speichern Sie eine Datei als „download_backup.zip“ – so steht Ihnen immer ein frisches Original zum Re-Upload zur Verfügung, falls Ihre Änderungen das Layout beschädigt haben sollten.

Im Unterordner skins der ZIP-Datei finden sich die nach Funktionalitäten und Anwendungsbereichen geordneten Skin-Module. Für die gewünschten Änderungen am Kommentarformular sind folgende Module relevant:

  1. CommentanonymousCreatorForm.skin (Änderungen anzeigen) und
  2. HopObjectmodJCaptcha.skin (Änderungen anzeigen)

Die Bearbeitung kann ohne vorheriges Entpacken der zip-Datei direkt aus dem Programm erfolgen, wenn man zum Editieren einen geeigneten Texteditor (z.B. Notepad++) über die jeweiligen Optionen des Zip-Programms eingebunden hat. Dies hat den Vorteil, dass nach erfolgter Änderung und der Beendigung des Editors der geänderte Skin sofort in die Zip-Datei zurückgepackt wird.
Nach Abschluss aller Skin-Änderungen muss das modifizierte Layout als gepacktes Gesamtpaket wieder auf Twoday hochgeladen werden. Dies funktioniert unter AdminLayoutLayout importierenDatei auswählen. Nach Selektion der veränderten Zip-Datei wird diese mit Klick auf Importieren zurückgeladen.
Twoday legt automatisch ein neues Layout an, welches unter AdminLayoutMeine Layouts noch aktiviert werden muss. Spätestens nach einem Browser-Refresh (Umschalt-F5) sollten die durchgeführten Layout-Änderungen wirksam werden.
Soweit die arbeitsintensive DIY-Methode; die folgende Methode #2 offeriert einen eleganteren Weg, der zudem nur wenige Änderungen mit Standard-Twoday-Mitteln erfordert.

#2 Nutzung eines fertigen Scripts

1. jQuery aktivieren

script/jquery.jpg

jQuery ist ein Quasi-Industriestandard und umfasst sehr nützliche Basisfunktionen für die Analyse und Änderung von Webseiteninhalten mittels Javascript.

jQuery ist außerdem eine Standard-Twoday-Komponente und muss einmalig vom Nutzer in den Einstellungen aktiviert werden:

  1. Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf AdminModuleExtension Module
  2. Klicken Sie beim Eintrag „JQuery Integration“ (ganz unten) auf Einstellungen und stellen Sie den Auswahlwert auf „ja“.
  3. Sichern Sie Ihre Änderung. Damit ist jQuery als zugrunde liegende Basiskomponente aktiviert und wird bei allen zukünftigen Aufrufen Ihres Blogs automatisch mit eingebunden.

2. Script ‚commentform.js‘ herunterladen

Die in Methode #1 vorgestellten Einzeländerungen erledigt ein kleines Javascript-Schnipsel schneller und wesentlich aufgeräumter, da die Änderungen erst nach dem Laden der Webseite eingesteuert werden. Dabei werden nur die relevanten Feldnamen bearbeitet, so dass Seiteneffekte ausgeschlossen sind.

Laden Sie das Script herunter und speichern Sie es auf Ihrem Rechner. [Link]

3. Script-Parameter bearbeiten

script/script.jpg

Das Script bietet die Möglichkeit, die Überschriftentexte (Label) für die Felder Name, Url und Captcha sowie die verfügbare Feldbreite zu ändern. Außerdem kann damit die Captcha-Funktion (Eingabefeld und verzerrtes Bild) in der gleichen Zeile angezeigt werden oder das Titelfeld ganz ausgeblendet werden.

Der Anfangsbereich des Scripts enthält die eigentliche Bearbeitung der relevanten Webseitenfelder – diese sollten Sie nicht verändern. Der für Sie interessante Aufruf der Funktion PimpMyCommentForm(…) steht am Ende des Scripts (Zeile 62).

Die Funktion „PimpMyCommentForm“ hat fünf Übergabeparameter:

  1. Text des Namensfeldes („Name“)
  2. Text des Url-Feldes („Url“)
  3. Text des Captcha-Feldes („Bitte gib das verzerrt angezeigte Wort ein“)
  4. Breite der Eingabefelder in Prozent der Containerbreite oder in Pixel
  5. true oder false, wobei true die Captcha-Anzeige einzeilig gestaltet und false den Standard (untereinander) beibehält
  6. true oder false, wobei true das Titelfeld ausblendet und false die Anzeige beibehält

Wird ein Text (Parameter 1-3) als Leerstring übergeben, bleibt der Twoday-Standard unverändert.

Parameter 4 ist nicht optional und muss angegeben werden. Parameter 5 und 6 sind hingegen optional und können auch weggelassen werden – es wird dann der Wert false angenommen.

// So erfolgt der Scriptaufruf im Standard
PimpMyCommentForm("Dein Name", "Deine Webseite", "", "420px", true, false);
// Beispiel 1
PimpMyCommentForm("", "Homepage", "Bitte den unten angezeigten Captcha-Code eingeben!", "95%", false, true);
// Beispiel 2
PimpMyCommentForm("Nickname", "Blogadresse", "Sicherheitscode eingeben:", "350px", true);

Ihre To-Dos

  1. Öffnen Sie das heruntergeladene Script commentform.js in einem geeigneten Texteditor (z.B. Notepad++)
  2. Passen Sie den Funktionsaufruf in den verfügbaren 6 Parametern nach Ihren Wünschen an.
  3. Speichern Sie Ihre Version des Scripts unter dem gleichen Namen.

4. Script auf Ihr Blog hochladen

  1. Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf ContributeDateienNeue Datei hinzufügen.
  2. Klicken Sie auf Datei auswählen und selektieren Sie die von Ihnen in Schritt 3 gespeicherte commentform.js. Tippen Sie commentform in das Feld Name und einen beliebigen Text in das Feld Beschreibung. Klicken Sie auf Sichern, um die Datei hochzuladen.

Das Script steht Ihnen nun unter der Adresse http://static.twoday.net/{Ihr Username}/files/commentform.js zur Verfügung.

5. Script einbinden

  1. Klicken Sie in Ihrem Blog oben auf AdminLayoutVorlagen bearbeiten (HTML) und dann auf Hauptseite (Site.page).
  2. Navigieren Sie an das Ende der HTML-Anzeige und geben Sie direkt vor </body> folgenden Code zur Einbindung des Scripts ein:
    <script src="http://static.twoday.net/<% site.alias %>/files/commentform.js"></script>

    Zum einfachen Kopieren auf pop-up klicken, Text markieren und mit Strg-C in die Zwischenablage übernehmen.

  3. Klicken Sie auf Speichern und Schließen. Melden Sie sich ab und versuchen Sie (als anonymer Benutzer), testweise einen Kommentar in einem Ihrer Blogbeiträge abzugeben. Das Kommentarform sollte nun die von Ihnen eingestellten Änderungen reflektieren.

[Edit 13.07.2013] Über einen weiteren Parameter im commentform.js Script kann nun das (ungeliebte) Titelfeld im Kommentarform ausgeblendet werden.

[22.12.2014 – Bild-/Linkadressen aktualisiert]

Schöner Bloggen #2 – Kommentarformular anpassen

Pimp Your Twoday Commentform

Herr Nömix hat im Hilfe-Forum eine Frage zur Veränderung des Kommentarformulars aufgeworfen, die sicher auch für weitere Twoday-Blogger interessant ist.
Ich beschreibe nachstehend 2 Wege, wie man diese Änderungen umsetzen kann, rate jedoch nachdrücklich zu Methode #2 als dezentere und „unblutigere“ Lösung. Methode #1 ist eher für HTML-/CSS-erfahrene Blogger gedacht, die eine Operation am offenen Twoday-Herzen nicht scheuen (Not for the faint of heart!) und sich des Risikos eines evtl. beschädigten Layouts bewusst sind.

#1 Modifikation von Layout-Skins

Bekannterweise können angemeldete Twoday-Nutzer über die Klickfolge AdminLayoutSkins (HTML) bestimmte CSS- und HTML-Elemente ihres gewählten Layouts ändern.
Unter anderem ist dort auch das Skin „Kommentarformular (Comment.edit)“ änderbar – jedoch wird nach erster Code-Analyse schnell klar, dass die von Herrn Nömix anvisierten Felder offensichtlich in weiteren Skins versteckt sind, die selbst nicht so einfach für eine Änderung erreichbar sind.
Allerdings bietet Twoday unter AdminLayoutDieses Layout exportierenKomplett eine Möglichkeit an, sich die Gesamtmenge aller Skins in einer komprimierten Sammeldatei herunterzuladen, die mit jedem ZIP-Programm geöffnet werden kann.

 Tipp: Führen Sie den Download zweimal durch und speichern Sie eine Datei als „download_backup.zip“ – so steht Ihnen immer ein frisches Original zum Re-Upload zur Verfügung, falls Ihre Änderungen das Layout beschädigt haben sollten.

Im Unterordner skins der ZIP-Datei finden sich die nach Funktionalitäten und Anwendungsbereichen geordneten Skin-Module. Für die gewünschten Änderungen am Kommentarformular sind folgende Module relevant:

  1. CommentanonymousCreatorForm.skin (Änderungen) und
  2. HopObjectmodJCaptcha.skin (Änderungen)

Die Bearbeitung kann ohne vorheriges Entpacken der zip-Datei direkt aus dem Programm erfolgen, wenn man zum Editieren einen geeigneten Texteditor (z.B. Notepad++) über die jeweiligen Optionen des Zip-Programms eingebunden hat. Dies hat den Vorteil, dass nach erfolgter Änderung und der Beendigung des Editors der geänderte Skin sofort in die Zip-Datei zurückgepackt wird.
Nach Abschluss aller Skin-Änderungen muss das modifizierte Layout als gepacktes Gesamtpaket wieder auf Twoday hochgeladen werden. Dies funktioniert unter AdminLayoutLayout importierenDatei auswählen. Nach Selektion der veränderten Zip-Datei wird diese mit Klick auf Importieren zurückgeladen.
Twoday legt automatisch ein neues Layout an, welches unter AdminLayoutMeine Layouts noch aktiviert werden muss. Spätestens nach einem Browser-Refresh (Umschalt-F5) sollten die durchgeführten Layout-Änderungen wirksam werden.
Soweit die arbeitsintensive DIY-Methode; die folgende Methode #2 offeriert einen eleganteren Weg, der zudem nur wenige Änderungen mit Standard-Twoday-Mitteln erfordert.

#2 Nutzung eines fertigen Scripts

1. jQuery aktivieren

jQuery

jQuery ist ein Quasi-Industriestandard und umfasst sehr nützliche Basisfunktionen für die Analyse und Änderung von Webseiteninhalten mittels Javascript.

jQuery ist außerdem eine Standard-Twoday-Komponente und muss einmalig vom Nutzer in den Einstellungen aktiviert werden:

  1. Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf AdminModuleExtension Module
  2. Klicken Sie beim Eintrag „JQuery Integration“ (ganz unten) auf Einstellungen und stellen Sie den Auswahlwert auf „ja“.
  3. Sichern Sie Ihre Änderung. Damit ist jQuery als zugrunde liegende Basiskomponente aktiviert und wird bei allen zukünftigen Aufrufen Ihres Blogs automatisch mit eingebunden.

2. Script ‚commentform.js‘ herunterladen

Die in Methode #1 vorgestellten Einzeländerungen erledigt ein kleines Javascript-Schnipsel schneller und wesentlich aufgeräumter, da die Änderungen erst nach dem Laden der Webseite eingesteuert werden. Dabei werden nur die relevanten Feldnamen bearbeitet, so dass Seiteneffekte ausgeschlossen sind.

Laden Sie das Script herunter und speichern Sie es auf Ihrem Rechner. [Link]

3. Script-Parameter bearbeiten

Script

Das Script bietet die Möglichkeit, die Überschriftentexte (Label) für die Felder Name, Url und Captcha sowie die verfügbare Feldbreite zu ändern. Außerdem kann damit die Captcha-Funktion (Eingabefeld und verzerrtes Bild) in der gleichen Zeile angezeigt werden oder das Titelfeld ganz ausgeblendet werden.

Der Anfangsbereich des Scripts enthält die eigentliche Bearbeitung der relevanten Webseitenfelder – diese sollten Sie nicht verändern. Der für Sie interessante Aufruf der Funktion PimpMyCommentForm(…) steht am Ende des Scripts (Zeile 62).

Die Funktion „PimpMyCommentForm“ hat fünf Übergabeparameter:

  1. Text des Namensfeldes („Name“)
  2. Text des Url-Feldes („Url“)
  3. Text des Captcha-Feldes („Bitte gib das verzerrt angezeigte Wort ein“)
  4. Breite der Eingabefelder in Prozent der Containerbreite oder in Pixel
  5. true oder false, wobei true die Captcha-Anzeige einzeilig gestaltet und false den Standard (untereinander) beibehält
  6. true oder false, wobei true das Titelfeld ausblendet und false die Anzeige beibehält

Wird ein Text (Parameter 1-3) als Leerstring übergeben, bleibt der Twoday-Standard unverändert.

Parameter 4 ist nicht optional und muss angegeben werden. Parameter 5 und 6 sind hingegen optional und können auch weggelassen werden – es wird dann der Wert false angenommen.

// So erfolgt der Scriptaufruf im Standard
PimpMyCommentForm("Dein Name", "Deine Webseite", "", "420px", true, false);
// Beispiel 1
PimpMyCommentForm("", "Homepage", "Bitte den unten angezeigten Captcha-Code eingeben!", "95%", false, true);
// Beispiel 2
PimpMyCommentForm("Nickname", "Blogadresse", "Sicherheitscode eingeben:", "350px", true);

Ihre To-Dos

  1. Öffnen Sie das heruntergeladene Script commentform.js in einem geeigneten Texteditor (z.B. Notepad++)
  2. Passen Sie den Funktionsaufruf in den verfügbaren 6 Parametern nach Ihren Wünschen an.
  3. Speichern Sie Ihre Version des Scripts unter dem gleichen Namen.

4. Script auf Ihr Blog hochladen

  1. Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf ContributeDateienNeue Datei hinzufügen.
  2. Klicken Sie auf Datei auswählen und selektieren Sie die von Ihnen in Schritt 3 gespeicherte commentform.js. Tippen Sie commentform in das Feld Name und einen beliebigen Text in das Feld Beschreibung. Klicken Sie auf Sichern, um die Datei hochzuladen.

Das Script steht Ihnen nun unter der Adresse http://static.twoday.net/{Ihr Username}/files/commentform.js zur Verfügung.

5. Script einbinden

  1. Klicken Sie in Ihrem Blog oben auf AdminLayoutVorlagen bearbeiten (HTML) und dann auf Hauptseite (Site.page).
  2. Navigieren Sie an das Ende der HTML-Anzeige und geben Sie direkt vor </body> folgenden Code zur Einbindung des Scripts ein:
    <script src="http://static.twoday.net/<% site.alias %>/files/commentform.js"></script>

    Zum einfachen Kopieren auf pop-up klicken, Text markieren und mit Strg-C in die Zwischenablage übernehmen.

  3. Klicken Sie auf Speichern und Schließen. Melden Sie sich ab und versuchen Sie (als anonymer Benutzer), testweise einen Kommentar in einem Ihrer Blogbeiträge abzugeben. Das Kommentarform sollte nun die von Ihnen eingestellten Änderungen reflektieren.

[Edit 13.07.2013] Über einen weiteren Parameter im commentform.js Script kann nun das (ungeliebte) Titelfeld im Kommentarform ausgeblendet werden.