Runde Rang labels erstellen

Joooonathan · 22. Oktober 2017

Hey,

ich möchte folgendes Label auch in meinem Forum verwenden.

Mit Lightshot geschossen

Dieses Label ist in Xenforo.

Gibt es irgendeine Möglichkeit, das auch in WBB zu machen?

LG Jonathan

Simon · 22. Oktober 2017

Hey!

Die Labels sind doch abgerundet? Oder was meinst du?

Joooonathan · 25. Oktober 2017

Dass man die halt so größer macht wie auf dem Screen.

Joooonathan · 25. Oktober 2017

Bei Xenforo geht das mit folgendem Code. Wie geht das aber bei WBB?

Code

.custom-title-admin {
    background-color: @primaryMedium;
    border: 1px solid @primaryDarker;
    border-radius: 4px;
    padding: 4px;
    margin: 4px 0;
    text-align: center;
    color: white;
}

.sidebar .custom-title-admin {
    margin-left: 43px;
    max-width: 80px;
}

Alles anzeigen

Simon · 25. Oktober 2017

Ich habe das nun so bei mir umgesetzt:

In den erweiterten Einstellungen des Stils steht folgende CSS-Klasse drin:

CSS

.custom-title-admin {
    background-color: #cc0000;
    border: 1px solid #980202;
    border-radius: 4px;
    padding: 4px;
    margin: 4px 0;
    text-align: center;
    color: white;
}

Als letztes musst du dann nur noch unter Benutzerränge die CSS-Klasse angeben. Diese legt man da fest, wo die Darstellung des Ranges ausgewählt wird.

Grüße

Joooonathan · 25. Oktober 2017

Danke

Joooonathan · 26. Oktober 2017

Die Länge der Box passt sich ja immer dem TExt an, der drinnen steht.

Wie mach ich das, dass die Box immer gleich groß, bei allen Rängen, ist?

Joooonathan · 1. November 2017

Simon

Simon · 1. November 2017

Probier mal folgendes:

CSS

.custom-title-admin {
max-width: 200px;
}

Damit wird die maximale Breite angegeben. Du kannst das natürlich beliebig mit der px-Angabe anpassen.

Joooonathan · 30. Dezember 2017

Simon

Wie bekommt man solche Labels?
http://prntscr.com/hubql1

Habe es selbst nicht geschafft.

Mit freundlichen Grüßen und einen guten Rutsch

Jonathan

Simon · 30. Dezember 2017

Was möchtest du denn davon genau haben?

Joooonathan · 31. Dezember 2017

dieses vergrößerte längere label mit größerer schriftart

Simon

Simon · 31. Dezember 2017

Größere Schrift:

CSS

.userTitleBadge {
font-size: 14px; /* oder was weiß ich */
}

Wie man das Label dann noch selbst vergrößert habe ich bereits weiter oben erklärt.

Joooonathan · 31. Dezember 2017

Simon

Wenn ich das mache, wird es trotzdem nicht breiter:

Code

max-width: 200px;

Runde Rang labels erstellen

Jetzt mitmachen!

Teilen