Spendenaktionen CSS-Design: Styling-Beispiele


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

Diese Funktion ist nicht in jeder FundraisingBox enthalten

Bei Fragen kontaktieren Sie uns.

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



Online URL: https://support.fundraisingbox.com/article/spendenaktionen-css-design-styling-beispiele-351.html