Spendenaktionen CSS-Design Styling-Beispiele

Zurück zur Startseite

Spendenaktionen CSS-Design Styling-Beispiele

Sie können das Aussehen Ihres Spendenaktions-Tools mit Hilfe von eigenen CSS-Anweisungen individuell an die Webseite anpassen.

Beachten Sie bitte, dass Spendenaktions-Tools nicht in jeder FundraisingBox enthalten sind.

Nachfolgend finden Sie dazu einige Beispiele:

Spendenbalken einfärben (schwarze Schrift auf gelben Hintergrund)
div.progress-bar-success {
    background-color: #fcff24;
    color: #000000;
}


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 ausbelden
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 in Listendarstellung ausblenden

#page-teasers p {
display:none;
}


Spendensammler auf Detailansicht groß und rot darstellen
#page-title small {
    color: #F33;
    font-size: 48px;
}

Artikel drucken als PDF exportieren