Mobirise WhatsApp Erweiterung Chat Button

[Volker]

Ich glaube nicht das man die Schrift einstellen kann. Bei mir sieht die Schrift so aus :

whatsapp2.png (8.58 KiB) 537 mal betrachtet

[Tommy Herrmann]

Moin Albert,

und willkommen bei uns im Forum


Das hat Mobirise so nicht vorgesehen und es wird nur eine Standard-Schrift vom Browser geladen.

Du könntest Deine Schrift dort bei den 3 Bereichen "Head", "Message" und "Input Message" hinzufügen. Ich habe das auf dieser Testseite mit meiner Schrift "Rubik" getan:

https://www.mobirise-tutorials.com/Test ... estseite3/

Natürlich muss die neu gewählte Schrift auch bereits über die CSS-Datei Deines Mobirise-Projektes vom Browser geladen worden sein. Sicherlich ist es dann der einfachste Weg eben den Schrifttyp zu wählen, den Dein Projekt bereits verwendet (wie bei mir eben "Rubik").

Komischerweise müssen die gesamten CSS-Klassen hier nochmals eingetragen werden, damit das funktioniert, nur eben zusätzlich den Font angeben, in meinem Beispiel ist es hier:

font-family: 'Rubik-Regular';

Code: Alles auswählen

/* START Edit Tommy - Fonts */
.floating-wpp .floating-wpp-popup .floating-wpp-head {
  text-align: left;
  color: white;
  margin: 0 -15px 15px -15px;
  padding: 15px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  font-family: 'Rubik-Regular';
}

.floating-wpp .floating-wpp-popup .floating-wpp-message {
  background-color: white;
  padding: 8px;
  border-radius: 7.5px 7.5px 7.5px 7.5px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.2s;
    transition-delay: 0s;
  max-width: 100%;
  font-family: 'Rubik-Regular';
}

.floating-wpp .floating-wpp-input-message {
  background-color: #e5ddd5;
  margin: 5px -15px -15px -15px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  font-family: 'Rubik-Regular';
}
/* ENDE Edit Tommy Fonts */

Diese Klassen schreibst Du in den Globalen Site-Style, da das WhatsApp-Icon ja auf allen Seiten des Projektes erscheint.

> Klicke auf den globalen Style am "Pinsel Symbol" unten rechts auf der Seite > dann auf den Button "Edit in Code Editor"

> Trage die oben angegebenen CSS-Klassen dort irgendwo in den Bereich "Static Styles" ein:

So sieht es dann aus:

P.S.:

Übrigens bei der Erweiterung "Popup-Chat" von "ElectricBlaze" habe ich genau aus diesem Grund das Popup-Fenster am Handy ausgeblendet, denn am Handy braucht das kein Mensch, weil man dort ja ohnehin WhatsApp für das Handy installiert hat.

Hier meine Beipielseite:

https://www.mobirise-tutorials.com/Tuto ... -Chat.html

Dazu habe ich diese 3 CSS-Klassen ab einem Display bis 767px Breite ausgeblendet, wobei die Namen dieser Klassen bei Dir andere sein könnten:

Code: Alles auswählen

@media (max-width: 767px) {
  .bRVohJ {
    display: none;
  }
  .jBrikC {
    display: none;
  }
  .hWATBB {
    display: none;
  }
}

[Albert R.]

Hallo ,
danke für die ausführliche Antwort.
Mir gefällt die Lösung mit dem ausblenden des Popup Fensters am Handy am besten.
Mit der Erweiterung ist auch nur eine Webseite des gesamten Projektes betroffen.

LG Albert