Spendenaktionen CSS-Design: Styling-Beispiele

INHALTSVERZEICHNIS

• Gut zu wissen
• Anzahl Spendenaktionen pro Zeile
• Länge der Kästchen vereinheitlichen
• Spendenbalken einfärben
• Spendenbalken als Schachbrettmuster ohne Beschriftung
• Spendenbarometer ausblenden
• Runde Bilder
• Button mit Schatten versehen
• Teaser hellgrau hinterlegen
• Mini-Teaser, die maximal 200 Pixel breit sind
• Spendensammler-Name in Listendarstellung ausblenden
• Spendensammler auf Detailansicht groß und rot darstellen
  
  

In diesem Artikel finden Sie einige CSS-Beispiele, die Sie für das Spendenaktions-Tool oder die Teaser der Spendenaktionen schneller individualisieren können.

Gut zu wissen

• Sie können das Aussehen Ihres Spendenaktions-Tools mithilfe von eigenen CSS-Anweisungen individuell an Ihre Webseite anpassen.
• Die Beispiele in diesem Artikel beziehen sich auf den Standard-CSS-Code des Spendenaktions-Tools bzw. der Teaser.
• Die Farbcodes, Angaben zu den Pixeln, etc können Sie mit gewünschten Werten austauschen, um das Beispiel für Ihre Bedürfnisse genauer anzupassen.   

Anzahl Spendenaktionen pro Zeile

Die Anzahl der Spendenaktionen pro Zeile im Spendenaktions-Tool richtet sich automatisch nach der verfügbaren Breite. Hierfür verwenden wir den Standard bei Bootstrap, um das genauer steuern zu können.

Das kann bei Bedarf aber auch einfach via CSS so überschrieben, um die Anzahl der Aktionen pro Zeile genauer zu steuern:

• #page-teasers .teaser { width: 30% !important; }
• #page-teasers .clearfix { display: none !important; }

Hier kann bei "width: 30%" einen anderen Wert angegeben werden, um die Aktionen entsprechend kleiner oder größer zu machen. Je kleiner die Prozentanzahl, desto kleiner die Aktionen.

Länge der Kästchen vereinheitlichen

Standardmäßig passen sich die Länge der Kästchen der Spendenaktionen anhand der Länge des Titels an. So kommt es jedoch manchmal vor, dass einzeilige Aktionen kürzer als z. B. dreizeilige Aktionen dargestellt werden.

Dies kann mit etwas kurzem CSS-Code schnell angepasst werden, sodass alle Kästchen die gleiche Länge haben:

.titel {
height: 40px;
}

.thumbnail > p {
height: 40px;
} 

Spendenbalken einfärben

.progress-bar {
background-color:#ff5100;
} 

Spendenbalken als Schachbrettmuster ohne Beschriftung

div.progress-bar-success {
background-color: #eee;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 6px 6px;
background-position: 0 0, 3px 3px;
}

div.progress-bar-success span {
display: none;
} 

Spendenbarometer ausblenden

div.progress {
display: none;
} 

Runde Bilder

#page-image, #page-teasers .thumbnail .img {
padding: 0px;
margin-left: 10%
width: 80%;
height: 80%;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
overflow: hidden;
} 

Button mit Schatten versehen

.btn {
box-shadow: 10px 10px 10px grey;
} 

Teaser hellgrau hinterlegen

#page-teasers .teaser .thumbnail {
background-color: #eee;
} 

Mini-Teaser, die maximal 200 Pixel breit sind

 #page-teasers .teaser {
max-width: 200px;
} 

Spendensammler-Name in Listendarstellung ausblenden

#page-teasers p {
display:none;
} 

Spendensammler auf Detailansicht groß und rot darstellen

Selbst der Detailansicht einer Spendenaktion lässt sich mit individuellem CSS anpassen, um z. B. Elemente wie Titel individuell anzupassen.

#page-title small {
color: #F33;
font-size: 48px;
}