Mobirise Tutorials

CSS Kommentar-Box

nach oben 

Weiterhin liegt dem Download eine CSS-Datei "kommentar.css" bei, deren Inhalt ich teilweise direkt in den "Code Editor" in den Bereich "CSS Editor" vom Block des Einbaus kopiert habe, wie ihr auch im Screenshot oben teilweise erkennen könnt.

Diese CSS bezieht sich nur auf die Kommentar-Box und kann natürlich beliebig modifiziert werden. Ich habe hier einige Einstellungen an meine Wünsche angepasst und auch Anweisungen hinzugefügt. Stellt sicher, dass ihr dem Kommentar-Feld "input" zusätzlich die Breite von 100% gebt, denn sonst wird dieses Eingabefeld am Smartphone zu breit dargestellt.

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;
 }
}
@media (max-width: 991px) {
 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;
}
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;
}

Wer diese "Sprechblasen" mag, der kann noch die CSS (unten) hinzufügen. Diese CSS-Klassen sind bereits in dem Script mit eingefügt:

dt.name {
  margin-left: 15px;
  margin-bottom: 20px;
}
dd.text {
  position: relative;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 15px;
  background-color: #e1e1e1;
}
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 #e1e1e1;
}