Wiki-Quellcode von Logos und Kundenbereich-CSS
Zuletzt geändert von MACH ProForms GmbH am 19.08.2025
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | (% class="box floatinginfobox" %) | ||
| 2 | ((( | ||
| 3 | **Inhaltsverzeichnis** | ||
| 4 | |||
| 5 | {{toc start="2"/}} | ||
| 6 | ))) | ||
| 7 | |||
| 8 | Für einen erhöhten Wiedererkennungswert und gestärktes Vertrauen in Ihre **Formulare** statten Sie diese mit Ihrem Logo aus. | ||
| 9 | Auch den **Kundenbereich** können Sie mit Ihrem Logo und eigener Formatierung durch CSS gestalten. | ||
| 10 | |||
| 11 | Die Anpassung der Bürgersicht-Darstellung mit CSS finden Sie im Formulareditor. Zum Artikel: [[CSS Einstellungen Bürgersicht>>doc:Main.05_Assistenten.09_CSSEinstellungen.WebHome]]. | ||
| 12 | |||
| 13 | == Voraussetzungen == | ||
| 14 | |||
| 15 | Benutzerrecht: "Layout verwalten" | ||
| 16 | |||
| 17 | == Anpassen von Logos == | ||
| 18 | |||
| 19 | Rufen Sie den Menüpunkt auf: Einstellungen > Eigenen Mandanten verwalten > Details | ||
| 20 | In den Mandantendetails öffnen Sie den Abschnitt: Logos und CSS | ||
| 21 | |||
| 22 | === Logo hinzufügen oder austauschen === | ||
| 23 | |||
| 24 | 1. Logodatei nach den unten stehenden Vorgaben für den jeweiligen Bereich vorbereiten | ||
| 25 | 1. zum Absatz mit dem Datei-Hochladen-Feld des jeweiligen Logos navigieren | ||
| 26 | 1. Schaltfläche **Logo auswählen/neues Logo auswählen** anklicken | ||
| 27 | 1. im Datei-öffnen-Dialogfeld die vorbereitete **Datei auswählen** und öffnen | ||
| 28 | 1. Schaltfläche **Speichern **unterhalb der Mandanteneinstellungen anklicken | ||
| 29 | 1. Die Seite lädt neu. | ||
| 30 | Oben erscheint eine grün hinterlegte Erfolgsmeldung: "Der Mandant //Mandantenname (Mandantennummer) //wurde gespeichert." | ||
| 31 | 1. das neue Logo wird jetzt in den Mandantendetails und im jeweiligen Bereich angezeigt | ||
| 32 | |||
| 33 | === Logo entfernen === | ||
| 34 | |||
| 35 | 1. zum Datei-Hochladen-Feld des jeweiligen Logos navigieren | ||
| 36 | 1. Schaltfläche **Logo löschen** (Mülleimersymbol) anklicken | ||
| 37 | 1. Abfragedialog mit der **Löschen**-Schaltfläche bestätigen | ||
| 38 | 1. Das Logo ist entfernt. | ||
| 39 | |||
| 40 | |||
| 41 | |||
| 42 | == Verschiedene Logos und ihre Platzierung == | ||
| 43 | |||
| 44 | |= |=Bezeichnung|=optimale Bildgröße in Pixeln BxH|=Dateiformate | ||
| 45 | |=1|Logo für PDF-Formulare|140 x 520 (maximal)|JPEG/JPG | ||
| 46 | |=2|Logo für den Kundenbereich|110 x 46|JPEG/JPG, PNG | ||
| 47 | |=3|Logo für Assistenten|228 x 90 (maximal)|JPEG/JPG, PNG | ||
| 48 | |=4|Logo für den Identitätsbereich|750 x 90 (maximal)|JPEG/JPG, PNG | ||
| 49 | |=5|Logo für das SB-Terminal|200 x 90|PNG | ||
| 50 | |||
| 51 | Dateigröße: maximal 2 MB | ||
| 52 | Abweichungen von den empfohlenen Bildmaßen können zu ungewollten Skalierungen und Verzerrungen führen. | ||
| 53 | |||
| 54 | |||
| 55 | (% cellspacing="0" style="border-collapse:collapse; border:0; width:100%" %) | ||
| 56 | |(% style="border-top:none" %)[[image:schema für logos_Kundenbereich.png||alt="Logo 2, Platzierung Kundenbereich" height="300" width="536"]]|(% style="border-top:none" %)[[image:schema für logos_Buergersicht.png||alt="Logo 3/4, Platzierung Bürgersicht" height="300" width="536"]]|(% style="border-top:none" %)[[image:schema für logos_PDF.png||alt="Logo 1, Platzierung PDF-Formular" height="300" width="212"]]|(% style="border-top:none" %)[[image:schema für logos_generiertes PDF.png||alt="Logo 3/4, Platzierung generiertes PDF-Formular" height="300" width="212"]] | ||
| 57 | |(% style="border-top:1px solid #000000" %)//Kundenbereich//|(% style="border-top:1px solid #000000" %)//Bürgersicht//|(% style="border-top:1px solid #000000" %)//PDF-Formular//|(% style="border-top:1px solid #000000" %)//generiertes PDF-Formular// | ||
| 58 | |||
| 59 | |||
| 60 | |||
| 61 | == Anpassen von CSS == | ||
| 62 | |||
| 63 | CSS Anweisungen können direkt in den Mandantendetails eingegeben werden oder aus einer extern abgelegten CSS-Datei abgerufen werden. | ||
| 64 | |||
| 65 | === CSS-Datei einbinden === | ||
| 66 | |||
| 67 | Die Datei muss für den Formularserver zugänglich im Internet verfügbar sein. | ||
| 68 | |||
| 69 | Rufen Sie den Menüpunkt auf: Einstellungen > Eigenen Mandanten verwalten > Details | ||
| 70 | In den Mandantendetails öffnen Sie den Abschnitt: Logos und CSS | ||
| 71 | |||
| 72 | 1. zum Feld **URL des externen CSS** navigieren | ||
| 73 | 1. Internetadresse eingeben, unter der die CSS-Datei erreichbar ist | ||
| 74 | 1. Schaltfläche **Speichern **unterhalb der Mandanteneinstellungen anklicken | ||
| 75 | 1. Die Seite lädt neu. | ||
| 76 | Oben erscheint eine grün hinterlegte Erfolgsmeldung: "Der Mandant //Mandantenname (Mandantennummer) //wurde gespeichert." | ||
| 77 | 1. Der Kundenbereich ist jetzt nach den CSS-Anweisungen gestaltet. | ||
| 78 | |||
| 79 | |||
| 80 | |||
| 81 | === CSS-Code eingeben === | ||
| 82 | |||
| 83 | Rufen Sie den Menüpunkt auf: Einstellungen > Eigenen Mandanten verwalten > Details | ||
| 84 | In den Mandantendetails öffnen Sie den Abschnitt: Logos und CSS | ||
| 85 | |||
| 86 | 1. zum Feld **CSS-Code** navigieren | ||
| 87 | 1. Gestaltungsanweisungen in das Feld eingeben | ||
| 88 | zum Beispiel: {{code language="CSS"}}body { color: #cc1216 !important; }{{/code}} | ||
| 89 | 1. Schaltfläche **Speichern **unterhalb der Mandanteneinstellungen anklicken | ||
| 90 | 1. Die Seite lädt neu. | ||
| 91 | Oben erscheint eine grün hinterlegte Erfolgsmeldung: "Der Mandant //Mandantenname (Mandantennummer) //wurde gespeichert." | ||
| 92 | 1. Der Kundenbereich ist jetzt nach den CSS-Anweisungen gestaltet. |