Kommentarbox von Werner Zenk

[struggle]

Ich möchte mich auch noch mal öffentlich für Werners Einsatz und seine Arbeit ganz herzlich bedanken

[struggle]

Hallo,

mir gefällt das Design nicht mehr !

Ich finde, die Kommentarbox ist zu unübersichtlich, obwohl ich die einzelnen Beiträge schon mit einem Querstrich getrennt habe.

Entweder müßte was in der jetzigen Fassung geschehen, wie z.B. so ungefähr:

oder evtl. im iframe so ungefähr:

Denn Du hattest ja mal was zum iframe geschrieben:

Ja klar Du könntest das gleiche Script natürlich über einen Iframe anzeigen, dann geht das auch. Dazu müsstest Du dann eigentlich nur die Datei "demo.php" wieder hochladen und den Text da raus machen - das könnte ich Dir auch schnell machen.

Was ich sehr schön finde, sind diese Sprechblasen !

Was käme denn in diesen iframe, auch die kommentar.php ?

[Tommy Herrmann]

Moin,

bei Dir (erste Screenshot) fehlt ja auch jede Menge CSS, die beim Werner (und auch bei mir) in der CSS-Datei vorhanden ist.

... welche "Sprechblasen" meinst Du denn - wo hast Du die denn her ???

Die habe ich bei mir nicht und auch noch nie in der "Kommentar-Box" gesehen

Kann es sein, dass Du jetzt gerade 2 unterschiedliche Anwendungen komplett durcheinander bringst?

Wenn Du das im Iframe anzeigen willst, müsstet Du natürlich eine HTML-Seite anzeigen, wie z.B. die Datei "demo.php", bzw. eine etwas andere Seite (ohne Werners Texte) erstellen. Das PHP-Script ist ja keine Internet-Seite, sondern eben nur ein Script innerhalb einer HTML-Seite.

Bei mir sieht Deine Seite auch gerade ganz anders als in Deinem Screenshot aus - nämlich gerade jetzt genau so:

... und meine Kommentar-Box sieht auch ganz anders aus als in Deinem Screenshot (der sieht nur schrecklich aus) - ich verstehe gerade überhaupt nicht, was Du da gemacht hast und wo Du Deine Screenshots her hast

https://www.mobirise-tutorials.com/Tuto ... ar-Box.php

---

... das mit den Sprechblasen habe ich bisher nur beim Gästebuch vom Werner mal gesehen aber nicht bei der Anwendung "Kommentar-Box"

Falls Du Fragen zum Gästebuch hast, mache bitte ein neues Thema im Forum dazu unter dieser Rubrik:

Werner Zenk - Anwendungen und Skripte

Ich sage Dir aber gleich, dass ich beim neuen Gästebuch vom Werner dazu nichts sagen kann, denn meine Gästebücher sind bestimmt 10 Jahre alt und da gab es diese Sprechblasen noch nicht. Das ist doch sicher nur eine CSS-Einstellung und mehr nicht.

Meine alten MySQL-Datenbanken haben noch ganz andere Datenbank-Felder (Tabellen) und ich werde jetzt auf keinen Fall meine alten Gästebücher aufgeben, nur um Dir damit zu helfen.

Im Prinzip hat sich bei den Gästebüchern beim Einbau aber auch sicher nichts (oder fast nichts) geändert. Das Problem mit der Navigation durch die Seiten ist dann aber wieder da und das dann sicher ganz neu und anders.


Hier ist mein MySQL-Gästebuch vom Werner:

https://www.mobirise-tutorials.com/Gastbuch.php

... und hier mein SQLite-Gästebuch (transportable Textdatei) vom Werner mit Tutorial zum Einbau in Mobirise:

https://www.mobirise-tutorials.com/Gastbuch/gb.php

[struggle]

Hallo Werner,

ich bringe nichts durcheinander. Ich meine die Kommentarbox mit einem anderen Design.

Entweder so eigebunden wie jetzt oder im iframe.

Und vom Design gefielen mir halt Sprechblasen, wie auch ich sie mal im Gästebuch gesehen habe. Ich mag aber nur die Sprechblasen und will kein Gästebuch Bestimmt geht das mit CSS

Ich habe hier auch keine Screenshots gezeigt, Ich habe da ein Bildbearbeitungsprogramm

Ich wollte ganz simpel wissen, ob ein anderes Design mit "Sprechblasen" möglich ist

[Tommy Herrmann]

ja - aber mich hast Du mit Deinen Screenshots, die es gar nicht gibt, ziemlich irritiert

Gucke mal in die CSS von diesem Gästebuch, da müsste man das ja erkennen.

Ich kann das heute nicht tun. Frühestens morgen Nachmittag.

Melde Dich, falls Du bis dahin noch Hilfe benötigst. Dann gucke ich mit die CSS mal an ...

[Tommy Herrmann]

so ungefähr ???

https://www.mobirise-tutorials.com/Tuto ... ar-Box.php

jepp - ganz witzig (warum nicht). Ich werde das nachher noch in meine Vorlage zum Download der Datei "kommentar.php" mit einbauen und die CSS anpassen.

[Tommy Herrmann]

Moin,

ich habe die auf meiner Seite zum Download bereitgestellte Datei "kommentar.php" erneut modifiziert, sodass nun auch diese "Sprechblasen" berücksichtigt werden können, wenn man die zusätzliche CSS verwendet.

https://www.mobirise-tutorials.com/Tuto ... ar-Box.php

Bitte lade Dir meine modifizierte Datei erneut herunter und trage wieder Deine Zugangsdaten zu Deiner Datenbank, sowie Deine individuellen Einstellungen zur Anzeige der "Kommentar-Box", ein. Die dazu passende CSS findest Du ganz unten in meinem Tutorial zur CSS, die Du wieder in den "Code Editor" in den Bereich "CSS Editor" nachträgst:

https://www.mobirise-tutorials.com/Tuto ... torial-CSS

Code: Alles auswählen

dt.name { 
 margin-left: 15px; 
 margin-bottom: 20px; 
} 
dd.text { 
 position: relative; 
 margin: 0 auto; 
 padding: 1rem; 
 border-radius: 15px; 
 background-color: #D6EBEB; 
} 
dd.text:before { 
 content: ' '; 
 position: absolute; 
 width: 0; 
 height: 0; 
 left: 28px; 
 top: -17px; 
 border-left: 14px solid transparent; 
 border-right: 14px solid transparent; 
 border-bottom: 17px solid #D6EBEB; 
}

[struggle]

Hallo Tommy,

sieht doch gut aus !

Meine Frage, läßt sich das auch in Mobirise 4 einbauen ?

[Tommy Herrmann]

... ja natürlich.

... was sollte das denn mit "Mobirise4" oder "Mobirise5" zu tun haben können? Hier geht es um reines PHP und CSS.

Was für eine Frage - Du hast doch alles andere dieser Anwendung auch bereits in "Mobirise4" eingebaut, wie kommst Du nun darauf, dass diese schlichte CSS-Anweisung nicht funktionieren könnte???

[struggle]

Na, weil der CSS-Editor bei meiner noch derzeitig aktuellen Version Deine CSS nicht angenommen hatte. Ich habe also nicht alles andere eingebaut. Das hatte ich einige Beiträge vorher schon geschrieben. Deshalb meine Nachfrage.

Dann werde ich mal alles tauschen.

[Tommy Herrmann]

zeige doch mal die CSS-Einträge, die bei Dir nicht angenommen worden. Das ist schon etwas merkwürdig.

Kopiere diese hier her, sodass ich das morgen mal testen kann.

Jetzt bin ich leider für heute hier weg.

[struggle]

Hallo Werner,

ich habe alles genauso übernommen, auch die komplette CSS, das Ergebnis stimmt, bis auf die einzelnen Farben ! Das muss ich noch rauskriegen und ändern !

So sieht es jetzt aus:

hinter jedem Pfeil steht die von mir vorgesehene Farbe

Leider kann ich bei einer Änderung nicht sofort sehen, wie es sich verhält, Du sagtest ja XAMPP wäre wohl ziemlich kompliziert.

[Tommy Herrmann]

Moin,

Du kannst doch alle diese Farben in der CSS anpassen.

Nochmals Deine Seite - ich muss die sonst immer wieder suchen:

https://www.meinlangengrassau.de/quatschen.php

... und meine Seite mit der CSS unten. Diese CSS ist also nicht gleich mit der vom Werner. Ich habe sie geändert, Dinge entfernt und andere Dinge hinzugefügt. So eine CSS ist ja immer nur ein Vorschlag und die muss man für seine Seiten immer oder fast immer anpassen.

https://www.mobirise-tutorials.com/Tuto ... ar-Box.php

Hier ist z.B. mal meine komplette und aktuelle CSS, die ich bei mir in den "CSS Editor" vom Block kopiert habe:

Code: Alles auswählen

fieldset.kommentarBox {
  background-color: #f5f5f5;
  border: Solid 1px #a8a8a8;
  box-shadow: 0px 0px 9px 3px #d8d8d8;
  border-radius: 5px;
  padding: 20px;
  margin: 25px Auto 25px Auto;
  cursor: default;
}
fieldset.kommentarBox legend {
  font-size: 1.2rem;
  padding: 0 5px 0 5px;
  letter-spacing: 1px;
  color: #000000;
}
fieldset.kommentarBox nav {
  text-align: Right;
}
fieldset.kommentarBox dl.kommentar dt {
  border-bottom: Solid 1px #d8d8d8;
  font-size: 1.2rem;
}
fieldset.kommentarBox dl.kommentar dd {
  margin-left: 15px;
  font-size: 1.2rem;
}
@media (max-width: 991px) {
  fieldset.kommentarBox dl.kommentar dt {
    font-size: 1rem;
  }
  fieldset.kommentarBox dl.kommentar dd {
    font-size: 1rem;
  }
}
fieldset.kommentarBox a:link, fieldset.kommentarBox a:visited {
  color: #4169e1;
}
fieldset.kommentarBox a:hover {
  color: #3213c2;
}
.link {
  color: #4169e1;
  cursor: pointer;
}
.link:hover {
  color: #3213c2;
}
fieldset.kommentarBox input, fieldset.kommentarBox button, fieldset.kommentarBox textarea, fieldset.kommentarBox select {
  font-size: 1rem;
  margin-top: 5px;
}
fieldset.kommentarBox textarea {
  width: 100%;
  max-width: 600px;
}
fieldset.kommentarBox button {
  margin-top: 20px;
  max-width: 300px;
}
fieldset.kommentarBox input[name="zip"] {
  width: 50px;
}
fieldset.kommentarBox input[type="radio"]:checked + label {
  color: #4169e1;
}
fieldset.kommentarBox input[type="radio"]#lbl2:checked + label {
  color: #ee0000;
}
:focus-visible {
  outline: solid 1px #4169e1;
}
fieldset.kommentarBox mark {
  color: #ff0000;
  background-color: Transparent;
}
fieldset.kommentarBox span.bewertung_ok {
  color: #7291f1;
}
fieldset.kommentarBox span.bewertung_ko {
  color: #c8c8c8;
}
::placeholder {
  color: #c5c5c5;
  opacity: 1;
}
::-ms-input-placeholder {
  color: #c5c5c5;
}
p.status {
  color: #00b32d;
  background-color: #eaffef;
  padding: 5px 5px 5px 15px;
  margin: 25px Auto 25px Auto;
  width: 510px;
  border: Solid 1px #d8d8d8;
  border-radius: 5px;
}
p.statusx {
  color: #ee0000;
  background-color: #ffe8e8;
  padding: 5px 5px 5px 15px;
  margin: 5px Auto 25px Auto;
  width: 510px;
  border: Solid 1px #d8d8d8;
  border-radius: 5px;
}
.mbr-section-subtitle {
  color: #232323;
}
dt.name {
  margin-left: 15px;
  margin-bottom: 20px;
}
dd.text {
  position: Relative;
  margin: 0 Auto;
  padding: 1rem;
  border-radius: 15px;
  background-color: #D6EBEB;
}
dd.text:before {
  content: ' ';
  position: Absolute;
  width: 0;
  height: 0;
  left: 28px;
  top: -17px;
  border-left: 14px Solid Transparent;
  border-right: 14px Solid Transparent;
  border-bottom: 17px Solid #D6EBEB;
}

So steht z.B. für die Links "Kommentar eintragen" und die Navigation wie "weiter" das hier oben in meiner kompletten CSS.

Das ist dann also in der ersten Class die Link-Farbe (a:link) und die Farbe (color) nachdem man diesen Link auch geklickt hat (a:visited). In der zweiten Class steht dann die Farbe für Mausüber (a:hover):

Code: Alles auswählen

fieldset.kommentarBox a:link, fieldset.kommentarBox a:visited {
  color: #4169e1;
}
fieldset.kommentarBox a:hover {
  color: #3213c2;
}

... und hier kannst Du die Farben vom Hintergrund (background-color) und dem Rahmen (border) sowie dem Box-Schatten (box-shadow) anpassen:

Code: Alles auswählen

fieldset.kommentarBox {
  background-color: #f5f5f5;
  border: Solid 1px #a8a8a8;
  box-shadow: 0px 0px 9px 3px #d8d8d8;
  border-radius: 5px;
  padding: 20px;
  margin: 25px Auto 25px Auto;
  cursor: default;
}

Du musst dann aber sicherlich noch viele andere Dinge in der Farbe ändern, denn Deine Textfarbe in Mobirise steht ja auf weiß. Nun verwendest Du aber diese hellen Sprechblasen und da kannst Du ja schlecht die Schrift dann weiß lassen, also müsstest Du z.B. bei dieser Class entweder die Farbe der Sprechblase (background-color: #D6EBEB;) ändern:

Code: Alles auswählen

dd.text {
  position: Relative;
  margin: 0 Auto;
  padding: 1rem;
  border-radius: 15px;
  background-color: #D6EBEB;
}

... oder noch eine andere Textfarbe hinzufügen, z.B. schwarz (color: #000000;) oder beides. Dunkelgrau wäre sicherlich besser - nicht so hart:

Code: Alles auswählen

dd.text {
  position: Relative;
  margin: 0 Auto;
  padding: 1rem;
  border-radius: 15px;
  background-color: #D6EBEB;
  color: #000000;
}

Hier mal eine teilweise Anpassung über die Browser-Werkzeuge:

... oder auch der Sprechblase eine leicht hellere rote Farbe geben (background-color: #D6EBEB;), sodass dann Dein weißer Text dort auch wieder richtig aussehen würde. Die Möglichkeiten so etwas zu gestalten sind schlichtweg endlos. Da muss sich dann aber jeder selbst, nach seinem Geschmack, austoben.

[struggle]

Dankeschön für die ausführliche Erläuterung. Ich finde es ja gut, daß man über die CSS im Editor mit den Farben "spielen" kann. Macht ja auch Spass !. Doof ist halt nur, daß man wegen php die Veränderungen nicht gleich sieht.

[Tommy Herrmann]

ja - dafür ist PHP eben eine ganz tolle Scriptsprache, mit der solche Anwendungen überhaupt erst möglich werden.

Man könnte sich auch einen lokalen Host installieren, wie z.B. die Jahrzehnte alte Anwendung "XAMPP":

https://werner-zenk.de/php/lokale_webserver_xampp.php

Bevor man damit aber richtig umgehen kann, vergehen Jahre. Das ist nicht ganz einfach und man sollte dann auch schon über recht gute Kenntnisse in PHP verfügen. Ich rate Dir davon also dann eher ab.

... ist doch auch nicht so schlimm schnell auf den Server zu publizieren, dauert doch auch nicht länger als lokal.

Was Du mal machen solltest ist, Dich mal mit den Browser Werkzeugen für Web-Entwickler zu beschäftigen. Die gibt es in jedem Browser, ich habe mich an die vom "Firefox" gewöhnt und kann nur die recht gut beschreiben.

So erstelle ich z.B. Screenshots von Deiner Seite mit bereits damit geänderten Farben, usw.

Finden tut man dieses Tool (Werkzeug) im "Firefox" über:

Menü > Extras > Browser-Werkzeuge > Werkzeuge für Web-Entwickler

Wenn Du dann da ganz links auf das Rechteck mit dem Pfeil klickst, kann Du mit der Maus einzelne Elemente Deiner Seite bearbeiten und auch die dazugehörige CSS finden und ändern. Das hilft schon mal sehr, um die Klassen-Namen zu wissen, damit man in der CSS überhaupt weiß, was man dafür ändern muss.

Damit kann man aber noch unheimlich viel mehr machen, wie z.B. einzelne Cookies, unter dem Tab "Web-Speicher", sehen und löschen.

[Tommy Herrmann]

Ich würde das mal gleich an Deiner Seite testen.

Da habe ich z.B. mal den Hintergrund der Kommentar-Box entfernt (Häkchen bei "background-color" entfernt) und dann sieht man gleich wie das mit Deinem roten Hintergrund aussieht. Man kann an dieser Stelle den Farbwert auch überschreiben und so gucken wie eine andere Farbe aussehen würde.

Da kannst Du dann z.B. gleich den Namen der CSS-Klasse class="kommentarBox" auch sehen.

Insofern sollt man dann nicht unüberlegt eine gesamte, fremde CSS übernehmen, denn da mag viel dabei sein, was man gar nicht benötigt oder gar nicht haben will.

Um dieses Browser-Werkzeug zu beherrschen braucht man aber Monate oder Jahre. Man kann damit unheimlich viel machen. Man fängt halt einfach mal an und lernt mit der Zeit immer mehr dazu.

[struggle]

Ich arbeite mit Firefox, werde ich mich gleich mit beschäftigen, toll

Um dieses Browser-Werkzeug zu beherrschen braucht man aber Monate oder Jahre.

Da hab` ich ja noch Zeit, werde in Kürze 71

[Werner-Zenk.de]

Was Du mal machen solltest ist, Dich mal mit den Browser Werkzeugen für Web-Entwickler zu beschäftigen. Die gibt es in jedem Browser, ich habe mich an die vom "Firefox" gewöhnt und kann nur die recht gut beschreiben.

Die Browser Werkzeuge für Web-Entwickler sind im Firefox schon recht brauchbar, aber mit einem Chromium-Browser und Visual-Studio Code wird der geänderte Quelltext (vom VSC) sogleich im Browser angezeigt.
https://werner-zenk.de/test/vsc_anim_01.gif (Animation)

Auch ist es möglich in den Browser Werkzeugen (CSS-Editor, JS-Editor) Änderungen vorzunehmen diese werden dann in der entsprechenden CSS/JS-Datei autom. geändert.

[struggle]

... ist doch auch nicht so schlimm schnell auf den Server zu publizieren, dauert doch auch nicht länger als lokal.

Da ich noch nie direkt auf den Server publiziert habe, habe ich das erst mal eingerichtet und die Verbindung war erfolgreich !

Meine Frage ist, was kommt in das Feld "Stammordner" ? Muss dort z.B "meinlangengrassau" eingetragen werden ?

Und noch eine Frage, wird nach dem Publizieren direkt die Seite angezeigt ?

[Tommy Herrmann]

... gucke mal in mein Tutorial zum Publizieren mit Mobirise:

https://www.mobirise-tutorials.com/Publ ... l#Entfernt

Das Feld neben der SFTP Adresse ist für ein eventuell anzugebendes Verzeichnis gedacht, dort wo bei mir im Screenshot steht:

/MeinVerzeichnis/

... wenn das Projekt im Stammverzeichnis der Domain (der "Root") liegt - also in keinem Unterverzeichnis - dann bleibt das dort leer.


P.S.:

... und entferne mal diesen Iframe auf Deiner Seite. Man kann ja nicht auf das PHP Script damit verlinken, da wird nichts angezeigt - zum Glück, denn da stehen Passwörter und alles drinnen.