Für das Hilfeforum benötigst du eigene Zugangsdaten. Der Account deines Blogs ist hier irrelevant.

blogsport.de Forum » Allgemein

Kommentarbereich formatieren

  • Thema gestartet vor 4 Jahren
  • 4 Beiträge bislang
  • Letzer Beitrag von tuwat
  1. Hallo!

    Ich habe ein Problem, welches ich leider nicht so leicht gelöst bekomme.
    Ich hätte gern, dass der Kommentarbereich ebenfalls schwarz ist.
    Ein Beispiel habe ich hier angefertigt:
    http://tuwat.blogsport.de/kontakt/gaestebuch/

    man sieht, dass der bereich mit dem background-hintergrund gefüllt ist, was mir nicht gefällt. (das betrifft den geschreibenen kommentar und das Formular!!!)

    Desweiteren würde ich gern meine eigentliche abschlussgrafik & den share and enjoi-bereich unter die kommentare bekommen. Am liebsten wäre mir, dass es das die grafik und der enjoi bereich 2 mal anzeigt (einmal nach dem beitrag und noch einmal nach den kommentaren, und das der schwarze hintergrund bestehen bleibt.)

    Ich hoffe sehr, dass mir jmd. helfen kann.

    Veröffentlicht am 2013-05-15 17:36:29 #
  2. lysis
    blogsport.de

    Wenn du das Design deines Blogs verändern willst, empfiehlt sich unbedingt die Installation des Firefox-Addons "Firebug": http://getfirebug.com

    Damit kannst du ein beliebiges Element auf deiner Website per rechte Maustaste anklicken uns siehst dann, wie es mit Hilfe von CSS formatiert wurde. Dort kannst du dann Werte einsetzen etc. und die veränderten CSS-Anweisungen rauskopieren und in dein Style Sheet einsetzen.

    So hab ich das in deinem Falle auch gemacht. Hier die CSS-Anweisungen, um das zu realisieren, was du möchtest. Geh hierzu bitte auf "Verwalten -> Dateien", scroll ganz nach unten und füg am Ende des Editierfelds folgende Zeilen hinzu:

    .comments {
    background-color: black;
    }

    .comments h4, .comments .metalinks {
    margin-left: 10px;
    }

    Um die Abschlussgrafik richtig zu positionieren (einmal unter dem Beitrag und einmal unter den Kommentaren), musst du dabei noch folgende Anweisung ergänzen:

    .hentry, #commentlist li {
    background:url("http://tuwat.blogsport.de/images/post_end_tuwat_neu_2.png") no-repeat center bottom transparent;
    }

    "Update template" und fertig!

    Zum "Share and Enjoy"-Bereich muss ich mir noch was überlegen. Eigentlich geht's nicht, weil der Ort durch das Plugin festgelegt ist. Man könnte aber den Ort mit Javascript verschieben und möglicherweise, aber nur möglicherweise sogar verdoppeln.

    Veröffentlicht am 2013-05-31 15:37:54 #
  3. lysis
    blogsport.de

    OK, das Verdoppeln des "Share and Enjoy"-Bereichs (Sociable-Plugin) funktioniert tatsächlich. Wenn er sowohl unter dem Beitrag als auch unter den Kommentaren erscheinen soll, gehst du wie folgt vor.

    Du gehst auf "Verwalten -> Dateien", scrollst ganz nach unten, klickst bei den Files auf "Comments", checkst, dass oben steht: "Editing comments.html" und fügst dann ganz am Ende des Editierfels folgende Anweisungszeile hinzu:

    {literal}<script type="text/javascript">if(!jQuery('#leavecomment').length) jQuery('.sociable').clone().appendTo('#commentlist');</script>{/literal}

    Anmerkungen:

    - Wenn der Share-and-Enjoy-Bereich nur verschoben und nicht verdoppelt werden soll, muss man lediglich das ".clone()" in der Anweisung weglassen.

    - Die Verdopplung wir nur ausgeführt, wenn bereits ein Kommentar hinterlassen wurde. Diese Bedingung wird durch "if(!jQuery('#leavecomment').length)" formuliert und kann auch weggelassen werden.

    Leider ist die CSS-Formatierung des Share-and-Enjoy-Bereichs durch die Überlagerung von Style-Definitionen etwas beeinträcht, wenn man ihn in den Comments-Bereich verschiebt. Daher sind ein paar korrigierende CSS-Anweisungen erforderlich.

    Gehe hierzu auf "Verwalten -> Dateien", scrolle ganz nach unten, klick auf "Site Style Sheet", checke, ob oben steht: "Editing wp-layout.css" und füg dann am Ende des Editierfelds folgende Zeilen ein:

    .comments .sociable {
    font-size: 1.2em;
    line-height: 1.8em;
    }

    .sociable ul li {
    padding: 1px !important;
    }

    "Update template" und fertig!

    Veröffentlicht am 2013-05-31 16:37:25 #
  4. Hab jetz erst gemerkt, dass dies hier alles für mich erarbeitet wurde.
    Es hat alles super geklappt und genau so, wie ich es mir vorgestellt habe!!

    VIELEN DANK!!!!!!

    Veröffentlicht am 2013-06-17 20:17:40 #

RSS-Feed zu diesem Thread

Antworten

Du musst dich einloggen zum Schreiben.

Für das Hilfeforum benötigst du eigene Zugangsdaten. Der Account deines Blogs ist hier irrelevant.

0.027 - 5 queries