Schriftart in WhatsApp

[inno]

Hallo Tommy,

wie kann ich die Schrift beim Text im WhatsApp-Popup anpassen?
Danke für die Hilfe.

Grüße

[Tommy Herrmann]

Moin,

das ist eine kleine Ewigkeit her, dass ich das mal gemacht habe. Hier hatte ich es beschrieben:

viewtopic.php?p=11349#p11349

Kannst ja mal gucken - eigentlich sollte das noch genauso gehen.

[inno]

Hi Tommy, das Haut beim M5-Theme leider nicht so hin.
Ich hab dir mal den Code kopiert. Was muss ich hier anpassen? Ordner assets/chatbutton/floating-wpp.css

Code: Alles auswählen

.floating-wpp {
    position: fixed;
    bottom: 15px;
    left: 15px;
    font-size: 14px;
    transition: bottom 0.2s;
    z-index: 1021;
}

.floating-wpp .floating-wpp-button {
    position: relative;
    border-radius: 50%;
    box-shadow: 1px 1px 4px rgba(60, 60, 60, 0.4);
    transition: box-shadow 0.2s;
    cursor: pointer;
    overflow: hidden;
}

.floating-wpp .floating-wpp-button img,
.floating-wpp .floating-wpp-button svg {
    position: absolute;
    width: 100%;
    height: auto;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 50%;
}

.floating-wpp:hover .floating-wpp-button {
    box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.4);
}

.floating-wpp .floating-wpp-popup {
    /*border: 2px solid white;*/
    border-radius: 8px;
    background-color: #e5ddd5;
    position: absolute;
    overflow: hidden;
    padding: 0;
    box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.25);
    width: 0px;
    height: 0px;
    bottom: 0;
    opacity: 0;
    transition: bottom 0.1s ease-out, opacity 0.2s ease-out;
    transform-origin: bottom;
}

.floating-wpp .floating-wpp-popup.active {
    padding: 0 15px 12px 15px;
    width: 280px;
    height: auto;
    bottom: 82px;
    opacity: 1;
}

.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;
    max-width: 100%;
}

.floating-wpp .floating-wpp-popup.active .floating-wpp-message {
    opacity: 1;
    transition-delay: 0.2s;
}

.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;
}

.floating-wpp-headName {
    margin: 0;
}

.floating-wpp .floating-wpp-popup .floating-wpp-head .close {
    position: absolute;
    top: 14px;
    right: 8px;
    color: #ffffff;
    text-shadow: none;
    opacity: 1;
    font-size: inherit;
}

.floating-wpp .floating-wpp-input-message {
    background-color: #e5ddd5;
    margin: 5px -15px -15px -15px;
    padding: 0 15px;
    display: flex;
    align-items: center;
}

.floating-wpp .floating-wpp-input-message textarea {
    border: 1px solid #ffffff;
    border-radius: 21px;
    box-shadow: none;
    padding: 8px 12px;
    margin: 10px 0 15px 0;
    width: 100%;
    max-width: 100%;
    font-family: inherit;
    font-size: inherit;
    resize: none;
    outline: none;
    color: #4a4a4a;
    box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.25);
    visibility: visible !important;
    animation-delay: 0s;
    animation-duration: 0s;
}

.floating-wpp .floating-wpp-btn-send {
    margin: 10px 0 15px 12px;
    font-size: 0;
    cursor: pointer;
    box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.25);
    border-radius: 50%;
}

Grüsse

[Tommy Herrmann]

Kann erst später gucken, bin unterwegs und nur am Handy.

Es wäre gut, wenn Du die URL zu der Seite posten würdest. Dann kann ich mit den Browser Werkzeugen in die CSS gucken.

Code: Alles auswählen

font-family: inherit;

... sollte doch aber die verwendete Schrift deiner Seite nehmen.

[inno]

Geht aber leider nicht! Wird immer mit Times ersetzt.

[Tommy Herrmann]

Probierst Du das auch nach dem Publizieren?

Ich brauche nachher die URL der Seite, sonst kann ich es nicht nachsehen.

Bin in ca. 30 Minuten zu Hause.

[Tommy Herrmann]

Moin,

da Du offensichtlich Deine URL nicht posten magst (warum auch immer), habe ich mir die Mühe gemacht und nochmals schnell ein Testprojekt erstellt.

Übrigens müsstest Du auch gucken, welche Schrift bei Dir als "Text" tatsächlich gewählt ist, in der Darstellung der Mobirise class="display-7", damit Du die gleiche Schrift hast, wie im Text Deiner Seite. Das ist also nicht zwingend die im `<body>` Tag angegebene Schrift, die vom WhatsApp-Chat per Default verwendet wird.

... das alles kann man eben nur sagen, wenn man auch Deine Seite (URL) sieht, sonst kann man nur raten. Das ist mühsam und viel aufwendiger.

Es funktioniert auch in "Mobirise5" ganz genauso wie in meinem zuvor verlinkten Tutorial beschrieben. Man braucht allerdings nur diese eine class="floating-wpp" anzupassen.

Ich habe jetzt hier, damit man es gut sehen kann, die Schriftgröße auf 24px und die Schrift selbst von "Jost" auf "Arial" geändert:

Code: Alles auswählen

.floating-wpp {
  font-size: 24px;
  font-family: Arial;
}

Diese Class habe ich dann in den Globalen Site-Styles Editor - am Pinsel unten rechts auf der Arbeitsseite - eingetragen:

Natürlich muss die angegebene Schrift auch in Mobirise, ergo später am Server, existieren. Browser können ansonsten nur die Standardschriften darstellen, ohne dass man diese Standardschriften besonders hochladen müsste.

Hier kannst Du Dir Deine gewünschte Schrift auch als .ttf Datei bei Google downloaden:

https://fonts.google.com/

Wenn Du eine Schrift downloadest, die Mobirise noch nicht kennt, musst Du diese im Site-Style Editor als Font zusätzlich in Dein Mobirise-Projekt importieren. Wie man Schriften in Mobirise importiert habe ich z.B. auch hier beschrieben:

https://www.mobirise-tutorials.com/Local-Fonts/

Die von Dir importierten Schriften findest Du dann am Reiter "Site Fonts" des Schrift-Editors von Mobirise. Sobald Deine Schrift dann dort aufgeführt steht, kannst Du diese für jede Schrift innerhalb des Projektes verwenden oder eben auch als Schrift in der WhatsApp class="floating-wpp", wie oben dargestellt, angeben:

Meine Standard-Schrift vom `<body>`, die automatisch für WhatsApp verwendet wird, ist "Jost" und das sieht eigentlich so aus:

So sieht es dann nach meiner Änderung auf "Arial" 24px aus:

[inno]

Danke dir für deine Mühe. Versuche ich später gleich mal und melde mich dann wieder!

[inno]

Funktioniert! Besten Dank nochmal für Deine Hilfe!!!

[Tommy Herrmann]

Prima