Blazey Web-Entwicklung

Letzte Änderung am Dienstag, 27. August 2019 - 17:02 Uhr

Kommentar-Feld anpassen

 

Das „Theme“ Astra ist recht neu und die Inhalte lassen sich sehr schnell laden. Einige Einstellungen lassen sich über ein internes Menue  durchführen. Speziellere Dinge muss man >allerdings selber manuell einstellen. Wenn es um das Design der Homepage geht wird dies CSS vorgenommen. Folgende CSS Schnipsel habe ich verwendet, um das große Kommentar Feld, indem die Besucher etwas kommentieren können, zu verkleinern. Es war mir doch ein wenig zu groß und der leere weiße Text-Eingabe Bereich stach zu sehr hervor. Allerdings habe ich nur die Höhe des Bereiches geändert. Grund hierfür ist die Ansicht dieses Bereiches auf einem Mobiltelefon. Der passt sich mit diesen CSS Schnipseln nicht in der Breite so einfach an. Textgröße und -Farbe habe ich auch geändert. Auch hier muss darauf geachtet werden, dass alles am Mobiltelefon / Tablet optimal dargestellt wird.  Der Code wurde mit siteorigin css generiert. Die Ergebnisse liegen dann einer css Datei für das aktuelle Theme (Bei mir das Astra Child) im upload/so-css/xxx.css

Hier der CSS-Code:
#reply-title.comment-reply-title {

  color: #2e4704;
  font-size: 200%;
  font-weight: 700;
}
.comments-area textarea#comment {
  font-size: 20px;

  height: 200px;
  line-height: 25px;
  text-align: left;
  white-space: pre;
}
#comments .submit {
  background-color: #2e4704;
}
a:hover {
  color: #2e4704;
}
input[type=“email“], input[type=“number“], input[type=“password“], input[type=“reset“], input[type=“search“], input[type=“tel“], input[type=“text“], input[type=“url“], select, textarea {
    color: #666;
    padding: .45em;
    height: 50px;
    border-width: 1px;
    border-style: solid;
    border-color: #eaeaea;
    border-radius: 2px;
    background: #fafafa;
    box-shadow: none;
    box-sizing: border-box;
    transition: all .2s linear;
}

Und so sieht es dann aus:

Den Text im Kommentar-Bereich habe ich einfach in der Sprachdatei für deutsch, angepasst. Die englischen Begriffe sind von der Textlänge her optimal, besonders für das Mobil-Telefon. Den Text auf der Schaltfläche werde ich auch noch verkürzen… Hier einmal eine Ansicht des Siteorigin css Tool für die Analyse und Änderung der Kommentieren-Überschrift. (Anklicken zu Vergrößerung) – Darunter die Ansicht in Firefox Browser mit dem internen DEV Tool. So kann man die Webseite virtuell verändern, ohne die Seite wirklich zu verändern. Der angezeigte Code kann aber kopiert und für die Anpassung im back front verwendet werden…


Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.