[Tutorial] Kommentare schön gestalten.

03 Januar 2013 | |
Hey,
Ich hoffe, ihr seid alle gut reingerutscht! Silvester am Strand war wirklich wunderschön, man konnte kilometerweit gucken und überall war Feuerwerk. Das Schlimmste war, dass ich meine Kamera vergessen hatte. Ihr glaubt gar nicht, wie sehr ich mich geärgert habe. Zum Glück konnte ich wenigstens ein paar Aufnahmen mit der Systemkamera von einem Freund machen.

Es wäre total lieb, wenn ihr auf den Link oben in der Sidebar klickt und für mich votet! :) ♥

Das hier ist mein erstes Tutorial und ich hoffe, ich erkläre es verständlich - wirklich schwerig ist es aber nicht. Ich möchte euch zeigen, wie man seine Kommentare schöner gestalten kann, gute Beispiele findet ihr hier

Als Erstes habe ich euch markiert, welche HTML Stellen was bewirken.



#comments-block .comment-author / #comments-block .comment-body
Hier könnt ihr beliebige Einstellungen vornehmen.

border: 1px solid #333; - einen Rahmen um den Bereich ziehen
Anstatt solid kann auch dashed für gestrichelt oder dotted für gepunktet eingesetzt werden.

background-color: #ddd; - Eine Hintergrundfarbe oder
background: url(deinlink.jpg) fixed; - ein Hintergrundmuster einfügen

text-align: center; - den Text in die Mitte rücken
font-style: times new roman; - die Schriftart einstellen
color: #333; - die Schriftfarbe einstellen

#comments-block .comment-footer

Auch hier könnt ihr Texteinstellungen vornehmen

Wer das Datum nicht eingeblendet haben möchte schreibt: display: none;











     

#comments h4
'h' sind immer Überschriften und ich habe euch hier die h4 Überschriften grün markiert.
Diese könnt ihr nun auch beliebig einstellen.


"Kommentare veröffentlichen"-Schriftzug ändern


Wer seine Kommentare noch ein wenig individueller gestalten möchte, kann noch an den Schriftzügen arbeiten. Dies habe ich euch bildlich dargestellt.



Klickt dafür in das Feld und drückt Steuerung(STRG) und "F". Damit aktiviert ihr ein Suchfeld, mit dem ihr leichter die Stellen findet, die wir ändern wollen.

Sucht nach  h4 
und findet diese Stelle:


Ersetzt nun < data:postCommentMsg/ > mit eurem Text.
Wenn ihr ein Bild einfügen möchtet, setzt ihr < img src='deinlink.jpg'/ > ein.




"...hat einen Kommentar hinterlassen"-Schriftzug einfügen

Sucht nach comments-block und findet diese Stelle:
















Ich hoffe, ich konnte euch damit ein wenig weiterhelfen. Einfach fragen, wenn ihr etwas nicht versteht oder nicht wisst, wie ihr es umsetzen könnt.
Dann kann ich auch editieren, falls ich etwas vergessen habe!

24 Kommentare:

  1. Ich hab mal bei mir versucht den kommentaren eine andere schriftart zu geben nur leider geht das irgendwie nicht :/

    AntwortenLöschen
  2. Hallo :)
    Gutes neues Jahr wünsch ich dir ersmal! ;)
    Ich wollte dir nur wegen meinen Shirts was sagen... Ich habe jetzt nur noch drei, die ich demnächst verlosen werde! Alle anderen sind im Verkauf...
    Ich werde dich aber rechtzeitig anschreiben, damit du da mitmachen kannst ;)
    xoxo

    AntwortenLöschen
  3. Dein Header ist so schön!
    Und ich finde sowas immer richtig gut, wie mich unwissenden :D

    Übrigends: ICH WÜRDE MICH SEHR FREUEN, WENN DU FÜR MICH ABSTIMMEN WÜRDEST! (dance hall queen):
    http://vanillebrause.blogspot.de/2013/01/blog-des-monats-januar.html

    LG

    AntwortenLöschen
  4. Hey, hab dir bei Facebook über meinen privaten Account geantwortet, weil ich Dir keine Nachrichten schreiben konnte.

    Schau doch bitte mal im "Sonstiges" Ordner nach, ich geh davon aus, dass du das übersehen hast und wäre blöd, wenn du deswegen keinen Platz mehr bekommst ;)

    Liebe Grüße,
    Judy

    AntwortenLöschen
  5. Hey,
    super Tutorial.
    Meine Freundin bloggt auch:
    http://mylifestylestory.blogspot.de/?m=1

    AntwortenLöschen
  6. Danke dir :) Ja, gute Idee, ich werde für die nächsten mal was mit Fotos ausprobieren.

    Mir ist gerade aufgefallen, dass ich deine Post-Titel schwer von den Überschriften im Post unterscheiden konnte und dadurch den Anfang des nächsten Posts verpasst habe :D Vielleicht könntest du ja eins von beiden etwas mehr hervorheben oder so :)

    Liebe Grüße ♥

    AntwortenLöschen
  7. ich hoffe du hast schön gefeiert und hattest schöne ferien :)

    xx, rebecca
    awayinparadise.blogspot.com

    AntwortenLöschen
  8. Hallo Lea,

    bin durch Zufall hier gelandet. Du hast wirklich einen sehr schönen Blog und dein Design ist wahnsinnig schön.

    Ich war 2011 auch in Amerika in einer Gastfamilie. Leider nur für 5 Wochen während den Sommerferien. Dennoch war es eine tolle Erfahrung und manchmal ärgere ich mich, dass ich nicht während der Schulzeit für ein halbes Jahr ins Ausland gegangen bin.

    Sicherlich werde ich hier noch öfters vorbei schauen, da ich von dir super viel lernen kann in Sachen Design.

    Ein schönes Wochenende wünsche ich dir!

    AntwortenLöschen
  9. Vielen Dank!
    Das freut mich wirklich zu hören.

    Wann geht es bei dir denn los und was hast du vor zu studieren?
    Ich bin schon so aufgeregt, weil ich Montag meinen ersten Tag an der dualen Hochschule habe. Es ist Vorfreude auf der einen Seite, aber auch ein bisschen Angst. Es wird sicher kein Zuckerlecken.

    AntwortenLöschen
  10. Das Klavierstück heißt "comptine d'un autre eté" von Yann Tiersen. :) Ich liebe seine Musik! :)

    Schade, dass das Video ein wenig negativ auf dich wirkt. Vielleicht kam es aber auch ein bisschen falsch rüber, ich weiß nicht. Ich meine, ich mache mir schon häufig Gedanken darüber, was ich in meinem Leben erreichen möchte, das stimmt schon, doch ich jage nun auch nicht verbissen allen Dingen hinterher, ohne eine Pause einzulegen. Aber ich werde trotzdem mal über deine Worte nachdenken, denn ganz Unrecht hast du auch wieder nicht. Ein bisschen lockerer könnte ich in der Hinsicht tatsächlich werden ..

    Hm, das werde ich auch tun! Ich werde mir ein Buch bestellen, mit dem man prima Gitarre lernen kann und habe mir vorgenommen, regelmäßig zu üben, auch wenn es vielleicht nur 10 Minuten am Tag sind. Und mein Papa spielt auch der Gitarre, er wird mir da sicher auch helfen können. :)

    Danke! Das wünsche ich dir auch. ♥

    Liebe Grüße,
    Paulina

    AntwortenLöschen
  11. Hallo :)
    Also erst mal, dein Header ist ja super *__*
    Zweitens find ich das Tutoiral total gut und hier ist unser Projekt online gegangen:

    http://www.lara-ira.de/2013/01/und-warum-bloggst-du.html

    AntwortenLöschen
  12. schon ewig sowas gesucht! DANKE DANKE DANKE! ♥

    AntwortenLöschen
  13. Hallo! Ich habe am Blog von Pauli dein Kommentar gelesen, dass du gerne ähnliche Künstler wie Yann Tiersen kennen lernen würdest. Da will ich dir unbedingt Ludovico Einaudi ans Herz legen, vor allem seine Stücke "Una Mattina" und "Nuvole Bianche". Du kannst dir auch mal was von Philip Glass anhören. Oder etwas von Hans Zimmer, zum Beispiel "Time". Ich hoffe, ich konnte dir helfen! (:

    AntwortenLöschen
  14. Hej, ich hab schon ewig nach einem tutorial wie diesem gesucht, nur leider funktioniert es nicht. Es passiert einfach rein gar nichts??? Was mache ich falsch??
    lg
    lilian von realize http://realize-photography.blogspot.de/

    AntwortenLöschen
  15. Ne also ganz doof bin ich nicht :P ;) Ich hab es erst auf dem Testblog versucht, und dann verzweifelt auf dem richtigen Blog, und habe es abgespeichert und so. Aber es passiert nichts -.-

    AntwortenLöschen
  16. Super Tutorial, danke! Habe ich auch angewandt.
    Mein Problem dabei ist jetzt nur leider, dass die "Antworten"-Funktion wegfällt?

    AntwortenLöschen
  17. Huhu,

    Ich bin über CPL auf dein Tutorial gekommen, weil ich meine Kommentarboxen verändern wollte, aber ich bekomme das irgendwie nicht hin.
    Also den Anfang schon, aber dann das, wo der Text ersetzt wird und man seinen eigenen einfügen kann, komme ich irgendwie raus. <.<
    Die Textstellen die du da zeigst, sind bei mir gar nicht. :o
    Welche Vorlage benutzt du, wenn ich fragen darf? Weil die sich im CSS/HTML ja unterscheiden die Vorlagen.

    Grüßchen und ein schönen Sonntag!

    AntwortenLöschen
  18. Ich habe bei Cpl gelesen, dass man Blog-Feed ausschalten muss, damit das Gestalten der Kommentare funktioniert.
    Jetzt meine Frage: Hast du das auch gemacht oder gibts da eine andere Möglichkeit? Wenn ich Feeds nämlich nicht ausschalte, passiert rein gar nichts.
    (Und feeds auszuschalten traue ich mich nicht, weil dann angeblich Bloglovin nicht mehr geht --> schau)

    AntwortenLöschen
  19. Danke für deine schnelle Antwort.
    Hm, es klappt aber trotzdem irgendwie nicht... Hm. Ich glaub ich stelle mich ganz doof an und es liegt wohl an irgendeinem doofen Anfängerfehler. Hm. Hast du auch die Minimavorlage?

    AntwortenLöschen
  20. Tolles Tutorial, nur ich hätte eine Frage: Wenn ich dann den "...hat einen Kommentar hinterlassen"-Schriftzug einfügt habe, wie lösche ich dann das was früher dort stand ? Denn bei mir steht jetzt '..hat einen Kommentar hinterlassen. hat gesagt…'

    AntwortenLöschen
  21. Leider passiert bei mir absolut gar nichts...
    Wäre toll, wenn du mir helfen könntest. :| Hinterlasse mir doch einfach einen Kommentar auf meinem Blog. Würde mich freuen, wenn du mir helfen könntest. :)
    Yuna.xo

    AntwortenLöschen
    Antworten
    1. Hey - Ich kann leider deinen Blog nicht finden :(

      Löschen