Generell lässt sich mit CSS das komplette Aussehen der Seite nach Ihren individuellen Wünschen verändern.
Es können alle CSS Regeln innerhalb des Spendenformulars überschrieben werden. Dadurch kann das Altruja Spendenformular per CSS an das Design der eigenen Website angepasst werden. Die Änderungen sind global für alle Spendenseiten möglich oder individuell für einzelne Spendenseiten.
Was sich mit CSS anpassen lässt:
- Stilsprache (Aussehen bzw. Optik eines HTML-Dokuments definieren)
- Farben
- Schrift Fett, kursiv, unterstrichen, durchgestrichen etc.
- Schriftart
- Einzelne Ränder, Umranden von Elementen etc.
- Definieren von Höhen, Breiten, innere sowie äußere Abstände von Elementen
- Einfügen von Hintergrundbildern, Hintergrundfarben etc.
Externe Bilder und Schriftarten müssen auf https/SSL-gesicherten Servern liegen. Feste Vorgaben gibt es nur durch den Aufbau der Formulare und des Prozesses. Das bedeutet, dass es nur sehr schwer möglich ist, die Reihenfolge der Felder und des Spendenprozesses zu ändern (z.B. erst Zahlungsdaten, dann Adresse).
Selbst gebaute und gehostete Formulare können nicht übernommen werden. Allerdings ist es möglich, Betrag, Name und E-Mail an das Altruja-Formular zu übergeben und so z.B. das Altruja-Formular als Bezahlschritt in einem Spendenshop zu integrieren.
Es ist möglich, ein JavaScript zu verwenden - wenn es jedoch die Funktionalität oder Sicherheit der Seite gefährdet, behalten wir uns vor, JavaScript abzulehnen. Analytics- oder Tracking-Scripte der Organisation sind aber normalerweise kein Problem.
Im Folgenden finden Sie eine Reihe von CSS - Codes, die Sie verwenden können.
Weitere Beispiele von Organisationen, die Ihr Spendenformular mit CSS angepasst haben:
- Deutsches Kinderhilfswerk e.V.
- help alliance gGmbH
- Deutsche Welthungerhilfe e.V.
- OroVerde - Die Tropenwaldstifung
- Mellifera e.V.
- Fairventures Worldwide gGmbH
- Global Volunteer Services gGmbH
- DRF Stiftung Luftrettung
- eva Evangelische Gesellschaft Stuttgart e.V.
Beispiele
Sie möchten Ihr Formular verändern?
Das können Sie mittels CSS Anpassungen tun. Die CSS Anpassungen können Sie für alle Ihre Spendenseiten global vornehmen oder für jede einzelne Spendenseite individuell. Das Vorgehen ist dasselbe wie bei Javascript (nur dass Sie statt Eigenen Javascript-Code verwenden, die Option Eigene CSS-Regeln verwenden auswählen).
Hier sind einige Beispiele für CSS Anpassungen, die Sie verwenden können:
Header ausblenden (obere Box im Spendenformular)
#altruja .teaser-box-projekte {display: none}
Rahmen um Spendenformular ausblenden
#altruja .box {border: none;}
Breite des Spendenformulars anpassen – fügen Sie bei 700px Ihren Wert ein
#altruja {max-width: 700px;}
Schriftgröße und Schriftart verändern – fügen Sie bei Verdana und 10pt Ihre Daten ein
body #altruja {font-family: Verdana;font-size: 10pt;}
Hintergrundfarbe ändern
body, body #altruja {background-color: #FFFF8A;}
Social Media Buttons – alle ausschalten
div.social-bookmarks{display:none;}
Social Media Buttons – einzeln ausschalten
Email
.emailbutton_container {display:none}
Facebook
.facebookbutton_container {display:none}
Twitter
.twitterbutton_container {display:none}
“Ich möchte im Namen einer Firma spenden” – ausblenden
#alsfirma {display: none ;}
“Ich möchte weitere Informationen erhalten” – ausblenden
#newsletter {display:none;}
Login-Link ausblenden
#altruja #loginlink {display: none;}