---
title: "Sterne-Bewertungen: Eigene Grafiken"
description: "### Grundlagen Standardmäßig sind die Sterne-Bewertungen wie folgt aufgebaut: - 1 Grafik für den grauen (inaktiven) Hintergrund - 1 Grafik für den gelben (aktiven) Vordergrund Bei einer Produkt-Bewertung von 4 Sternen, werden demnach 4 aktive und 1 inaktiver Stern zu…"
url: "https://aawp.de/docs/article/sterne-bewertungen-eigene-grafiken/"
updated: "2016-10-19"
category: Ausgabe erweitern und anpassen
---

# Sterne-Bewertungen: Eigene Grafiken

### Grundlagen

Standardmäßig sind die Sterne-Bewertungen wie folgt aufgebaut:

- 1 Grafik für den grauen (inaktiven) Hintergrund
- 1 Grafik für den gelben (aktiven) Vordergrund

Bei einer Produkt-Bewertung von 4 Sternen, werden demnach 4 aktive und 1 inaktiver Stern zu sehen sein.

### Quellen für eigene Grafiken

Du kannst dir eigene Sterne-Grafiken mit einem Bildbearbeitungs-Programm selbst erstellen oder auf Ressourcen wie z.B. [Iconfinder](https://aawp.de/link/iconfinder) zurückgreifen. Als Format sollte SVG gewählt werden. Alternativen wären PNG und GIF. Anschließend die Dateien auf deinem Server (z.B. über die WordPress Mediathek) hochladen.

### Standard-Größen

Über die Plugin-Einstellungen (oder per Shortcode) kann für die Darstellung der Sterne-Bewertungen zwischen den folgenden drei Größen gewählt werden:

- Klein = 16px * 16px
- Mittel = 20px * 20px
- Groß = 30px * 30px

Bei der Auswahl der eigenen Grafiken sollte deshalb auf eine SVG (oder PNG/GIF) Datei mit mind. 30px * 30px geachtet werden.

## Grafiken per CSS austauschen

In den Plugin-Einstellungen unter dem Reiter "Ausgabe", Abschnitt "Sterne-Bewertungen" bitte **"Eigener Style" auswählen**. Anschließend können die Grafiken ganz einfach via CSS ausgetauscht werden:

#### Variante 1: Beide Grafiken ersetzen

 CSS

```
.aawp .aawp-star-rating--custom,
 .aawp-star-rating--custom,
 a.aawp-star-rating--custom {
     background-image: url('https://domain.de/path-to-images/star.png');
 }
```

 CSS

```
.aawp .aawp-star-rating--custom > span,
 .aawp-star-rating--custom > span,
 a.aawp-star-rating--custom > span {
     background-image: url('https://domain.de/path-to-images/star-active.png');
 }
```

---

#### Variante 2: Beide Grafiken ersetzen und eigene Größe festlegen

In diesem Beispiel verwenden wir eine horizontale Grafik und legen als Größe 32px * 16px fest.

 CSS

```
.aawp .aawp-star-rating--custom,
 .aawp-star-rating--custom,
 a.aawp-star-rating--custom {
     height: 16px;
     width: 32px;

background-size: 32px 16px;
background-image: url('https://domain.de/path-to-images/star.png');
}

.aawp .aawp-star-rating--custom > span,
.aawp-star-rating--custom > span,
a.aawp-star-rating--custom > span {
height: 16px;
width: 32px;

    background-size: 32px 16px;
     background-image: url('https://domain.de/path-to-images/star-active.png');
 }
```

---

#### Variante 3: Nur noch eine Vordergrundgrafik verwenden

In diesem Beispiel wollen wir nur noch die aktive Sternanzahl ausgeben und verzichten auf den *nicht verfügbaren* Stern.

 CSS

```
.aawp .aawp-star-rating--custom,
 .aawp-star-rating--custom,
 a.aawp-star-rating--custom {
     background-image: none;
 }

.aawp .aawp-star-rating--custom > span,
 .aawp-star-rating--custom > span,
 a.aawp-star-rating--custom > span {
     background-image: url('https://domain.de/path-to-images/star-active.png');
 }
```

---

Die zuvor genannten CSS-Styles sollten in den Plugin-Einstellungen (Reiter "Ausgabe"), in das Feld "Eigenes CSS" eingegeben werden. Alternativ kannst du sie auch in dein Child-/Theme auslagern, wenn du vor jede Deklarierung *.aawp-custom* voranstellst: z.B.

 HTML

```
<code lang="css">.aawp-custom .aawp .aawp-star-rating--custom { ... }</code>
```