Mastodon Icon in Mosaico Versafix-1-Vorlage

Hi zusammen,
wir nutzen seit kurzem die Mosaico Integration in Civi zur Erstellung unserer Newsletter. In der Versafix-1-Vorlage vermissen wir jedoch das Icon für Mastodon.
Ich weiß, dass es einen Beitrag hier im Forum aus 2022 gibt, in dem schon einmal erklärt wurde, wie das Icon hinzugefügt werden kann. Ich habe jedoch keinerlei Programmier-Erfahrung.
Daher stelle ich hier die Frage einmal in den Raum, ob Menschen mir eine entsprechende Vorlage erstellen können, die ich dann nutzen kann? Oder muss ich das stets selbst einrichten?
Ich freue mich auf Rückmeldung, danke vorab!
Liebe Grüße
Franzi

Hi @Franzi,

du wünscht dir wahrscheinlich eine Social Media Leiste, bei der Mastodon dabei ist und die Du per Drag & Drop in Mosaico einfügen kannst? Dafür müsste idealerweise der “Maintainer” dieser Erweiterung diese Blöcke erweitern.

Du kannst dir aber auch ganz einfach mit HTML eine eigene Leiste bauen. Ich habe hier mal ein vereinfachtes Beispiel mit 2 einfachen Buttons gemacht (bzw. hat ChatGPT das erledigt):slight_smile:

<center>
<div class="social-buttons"><a href="https://mastodon.social/@DEINPROFIL" target="\_blank" rel="noopener"> <button class="btn mastodon">Mastodon</button></a> <a href="https://facebook.com/DEINPROFIL" target="\_blank" rel="noopener"> <button class="btn facebook">Facebook</button> </a></div>
</center>

Du schreibst, dass Du selbst noch keine Programmier-Erfahrung hast - das muss ja nicht so bleiben :). Probier es vielleicht einfach mal mit einem Prompt in einem beliebigen KI Chatbot, der in etwa so aussieht:

Bitte erstelle eine horizontale Leiste mit Social Media Icons für Mastodon, … , …. und … in HTML Code. Greife auf die aktuellen Icons dieser Portale zurück. Hinterlege für die Icons bitte folgende Links:

Mastodon: https://
Facebook: https://

und so weiter.

Dann fügst Du in euer Template einfach ein Textfeld ein, löscht den Inhalt und fügst den neuen Code über den Button “Source Code” hinzu:

Dann speichern und Du siehst hoffentlich deine Leiste. Eventuell braucht es ein bisschen PingPong mit dem ChatBot, bis es dir gefällt. Vielleicht musst Du auch Links zu den gewünschten Icons bereitstellen.

Noch eine simplere Alternative: Du kannst auch einfach das Button Template benutzen, dem Button die Namen deiner Social Media Kanäle geben und jeweils selbst die Links hinterlegen. Mit Text geht das natürlich genauso.

Viel Erfolg!

Hey Lucas,
vielen lieben - und viel zu späten - Dank für deine Nachricht!
Ich kam erst jetzt dazu, deine Anleitung auszuprobieren. Nach einigem Hin und Her hats geklappt! Ich hätte die Icons eigentlich auch gerne in monochrom gehabt, da klemme ich mich dann vllt mit mehr Zeit nochmal dahinter.
Ich danke dir für deinen Support! :slight_smile: Falls nochmal eine Frage aufkommt, melde ich mich nochmal.
Viele liebe Grüße, Franzi

Schön, dass es geklappt hat :). Für monochrome Icons könntest Du ggf. einen CSS Filter ( grayscale() CSS function - CSS | MDN ) auf die Bilddateien verwenden oder die Bilder selbst bearbeiten und irgendwo bereitstellen, sodass Du darauf verlinken kannst.

Der Vollständigkeit halber hier auch nochmal der grundlegende Weg, wie man einen Block in einem Template selbst erstellen oder bestehende anpassen kann.

  1. CiviCRM mit Mosaico beibringen, dass es Custom Templates berücksichtigen soll.
  • Folge dem Pfad Administration > CiviMail > Mosaico-Einstellungen
  • Dort ist angegeben, wo nach dem Ordner für Mosaico Custom Templates gesucht werden soll, Standard ist in Standalone beispielsweise: [civicrm.files]/mosaico_tpl
  • Dieser Ordner existiert nicht standardmäßig und muss auf dem Webspace erst erzeugt werden. In einem Standalone wäre der Pfad: (z.B. var/www/)/civicrm/public/mosaico_tpl
  • In diesen neuen Ordner kopiert ihr die versafix-1 Vorlage von CiviCRM (oder eine andere, wie benötigt). Die findest sich für Standalone in der Regel hier: civicrm/ext/uk.co.vedaconsulting.mosaico/packages/mosaico/templates/
  • Der kopierten Vorlage gibt man dann einen eigenen Namen. Statt versafix-1 heißt der Ordner dann z.B. “Organisationsname” und die .html Datei darin “template-Organisationsname.html”. Wichtig: Das muss genau so eingehalten werden, d.h. template- und Organisationsname auch jeweils gleich geschrieben. Sonst wird das Template in Civi nicht gefunden.
  • Wenn das passt, dann sollte das neue Template bereits in Mosaico zu Auswahl stehen, ggf. nochmal den CiviCRM Cache löschen.
  1. Im neuen Template (hauptsächlich die HTML-Datei) kann man dann auf Basis der vorhandenen Strukturen einen weiteren Block mit eigenem Code hinzufügen oder auch Blöcke entfernen. Im Code sind auch einige Bild-Dateien (für Vorschaubilder oder Icons) hinterlegt, die findet ihr im Template Ordner (Ordner img) und könnt dort ggf. weitere hinzufügen. Wem das manuell zu hakelig ist, der kann sicherlich eine KI zur Hilfe nehmen, die das Template analysiert und die gewünschten Anpassungen vornimmt.

Der Vorteil gegenüber der vorher beschriebenen Lösung mit dem eigenen HTML Code Block ist, dass Template Blöcke über verschiedene Entwürfe für das eigene Template hinaus identisch verfügbar sind und man nicht hin und herkopieren muss.

Theoretisch kann man die Änderungen auch im Ursprungstemplate von CiviCRM vornehmen, ohne die Custom Templates zu nutzen - aber das ist nicht updatesicher, bei einem Mosaico Update wären die Anpassungen voraussichtlich futsch.

Falls jemand dabei individuell Hilfe benötigt, meldet euch gern.

Hi,
mega gut. Vielen Dank für die gesamte Info. Und natürlich für das Angebot für individuellen Support! Beste Grüße