CSS Anpassungen - Wie kann das Tool an unser Corporate Design angepasst werden?

 

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 Webseite 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: 

Malteser International
DKHW
Förderkreis Krebskranke Kinder
 

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 das Selbe 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

#altruja .teaser-box-projekte {display: none}

Rahmen um Spendenformular ausblenden
#altruja .box {border: none;}

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

Schriftgröße und Schriftart verändern – fügen Sie bei Verdana und 10pt Ihre Daten ein:

body #altruja {font-family: Verdana;font-size: 10pt;}