XF2.2 Nützliche Links über Teammitgliedern

[Amuria]

Hey!

Zunächst: Ich weiß nicht, ob ich das richtige Präfix gewählt habe. Falls nicht: Tut mir leid


Ich habe eine Frage bezüglich einer Vorstellung von mir.
Ich würde gerne einen Bereich auf der rechten Seite über "Zurzeit aktive Teammitglieder" erstellem, in dem nützliche Links aufgeführt sind. Wir nutzen Xenith und haben UI.X 2.2.0
Ich habe schon gefühlt das ganze Forum nach einer Lösung durchsucht, bisher ohne Erfolg.

Kann mir das jemand weiterhelfen?

 

[McAtze]

Dafür eignen sich die Widgets ganz gut.

 

[McAtze]

Um es dir mal kurz zu veranschaulichen.

1. Gehe im ACP zu Appearance -> Widgets (/admin.php?widgets/)
2. Klicke auf "Add Widget"
3. Wähle bei "Widget definition" -> HTML aus
4. Gib einen eindeutigen "Widget key" ein, z.B. someLinks
5. Wähle bei Position "Forum list: Sidebar" aus und definiere die Reihenfolge per Zahl
6. Nun kannst du im Feld "Template" deine nützlichen Links als Liste eintragen. Als Beispiel:

<ul class="block-body">
    <li class="block-row"><a href="#">Link #1</a></li>
    <li class="block-row"><a href="#">Link #2</a></li>
    <li class="block-row"><a href="#">Link #3</a></li>
    <li class="block-row"><a href="#">Link #4</a></li>
    <li class="block-row"><a href="#">Link #5</a></li>
</ul>

Das ganze sieht dann so aus:


Und hier das ganze nochmals als Video.

Um diese Inhalte anzuzeigen, benötigen wir die Zustimmung zum Setzen von Drittanbieter-Cookies.
Für weitere Informationen siehe die Seite Verwendung von Cookies.

Drittanbieter-Cookies akzeptieren

 

[Amuria]

Hey!
Wenn das kein super Support ist!
Vielen, vielen Dank.

Nun hab ich noch eine Frage:

Kann ich vor diese Links ein Icon setzen? Und wenn ja wie?

 

[McAtze]

Kann ich vor diese Links ein Icon setzen? Und wenn ja wie?

Ziemlich einfach mit den FontAwesome Icons. Einfach den HTML Code dementsprechend anpassen.
Beispiel:

<ul class="block-body">
    <li class="block-row">
        <a href="#">
            <i class="far fa-external-link"></i> Link #1
        </a>
    </li>
    <li class="block-row"><a href="#">Link #2</a></li>
    <li class="block-row"><a href="#">Link #3</a></li>
    <li class="block-row"><a href="#">Link #4</a></li>
    <li class="block-row"><a href="#">Link #5</a></li>
</ul>

 

[Amuria]

Hey!

Das hat fast geklappt
Alle Icons werden bei mir angezeigt, bis auf ein Teamspeak-Icon: Font Awesome

Gibt es dafür eine logische Erklärung?

 

[McAtze]

Ja, das erklärt sich ganz einfach am Aufbau der Icons.

<i class="far fa-ICON-BEZEICHNUNG"></i>

Es beginnt mit der Darstellung der Icons:



fas = Solid Style
far = Regular Style (Im Pro Paket, bei XenForo inklusive)
fal = Light Style (Im Pro Paket, bei XenForo inklusive)
fad = Duotone Style (Im Pro Paket, bei XenForo inklusive)
fab = Brands Style, also alle Icons die Marken betreffen.

Hier mal am Beispiel des Link-Icon:

<i class="fas fa-link"></i>


<i class="far fa-link"></i>


<i class="fal fa-link"></i>


<i class="fad fa-link"></i>

Und hier dein Teamspeak-Icon:


<i class="fab fa-teamspeak"></i>

 

[McAtze]

Und wenn du das ganze nun noch per EXTRA.less gestalten willst sieht das so aus.

Dein Widget HTML:

<ul class="block-body">
    <li class="block-row">
        <a href="#" class="link-icon link-icon--link1">
            <span class="link-text">Link #1</span>
        </a>
    </li>
    <li class="block-row">
        <a href="#" class="link-icon link-icon--link2">
            <span class="link-text">Link #2</span>
        </a>
    </li>
    <li class="block-row">
        <a href="#" class="link-icon link-icon--link3">
            <span class="link-text">Link #3</span>
        </a>
    </li>
    <li class="block-row">
        <a href="#" class="link-icon link-icon--link4">
            <span class="link-text">Link #4</span>
        </a>
    </li>
    <li class="block-row">
        <a href="#" class="link-icon link-icon--link5">
            <span class="link-text">Link #5</span>
        </a>
    </li>
</ul>

Deine EXTRA.less:

a.link-icon
{
    &:before
    {
        .m-faBase();
        .m-faContent(@fa-var-question-square);
        margin-right:5px;
        display:inline-block;
        text-align:center;
    }
 
    &--link1 { &:before { .m-faContent(@fa-var-home); } }
    &--link2 { &:before { .m-faContent(@fa-var-comments); } }
    &--link3 { &:before { .m-faContent(@fa-var-camera); } }
    &--link4 { &:before { .m-faBase('Brands'); .m-faContent(@fa-var-teamspeak); } }
    &--link5 { &:before { .m-faContent(@fa-var-glasses); } }
}

 

[Hoib3rgA]

Hy,
ich hoffe, es ist okay, wenn ich mich hier kurz mit rein hänge?
Ich hätte zwei Fragen:

1. Wie kann ich die PRO-Icons verwenden? Laut dieser Aussage, sind die bei Xenforo inklusive?

far = Regular Style (Im Pro Paket, bei XenForo inklusive)
fal = Light Style (Im Pro Paket, bei XenForo inklusive)
fad = Duotone Style (Im Pro Paket, bei XenForo inklusive)

2. Zum Widget an sich:
Was müsste ich wo eingeben, um ein Widget nur einer (oder zwei) bestimmter Benutzergruppe anzeigen zu lassen?

Gruß Chris

 

[McAtze]

1. Wie kann ich die PRO-Icons verwenden? Laut dieser Aussage, sind die bei Xenforo inklusive?

Habe ich doch oben im 2. Beitrag erklärt.

2. Zum Widget an sich:
Was müsste ich wo eingeben, um ein Widget nur einer (oder zwei) bestimmter Benutzergruppe anzeigen zu lassen?

Das geht über die Conditionals in den Widget Einstellungen. Dazu gibts verschiedene Statements die man bei XenForo.com nachlesen kann (Unmaintained - Conditional Statements for XenForo 2)