Twitch? & Icons zentrieren

Trollgon · 10. Januar 2016

Hey!

Ich bin gerade dabei dein Plugin in meine Website einzubinden und habe zwei Fragen:

1. Wie kann man die Icons in der Box zentrieren? Ich habe mich mal an css probiert bin aber gnadenlos gescheitert, da ich keine Ahnung habe wie ich den Inhalt genau ansprechen kann.

2. Könntest du mir bitte zeigen wie man einen Twitch Account hinzufügt?

Vielen Dank im Voraus

Trollgon

The_Waiters · 10. Januar 2016

Moin Moin.

Ich mach dir morgen (Montag) früh alles fertig und melde mich.

1. Den Code gebe ich dir. Und erkläre es dir kurz.

2. Twitch hatte ich glaub ich noch gar nicht drin. Würde dir morgen eine Beta fertig machen.

Trollgon · 10. Januar 2016

Super!

Vielen Dank

The_Waiters · 11. Januar 2016

Huhu,

ich hab noch eine kurze Frage. Der Twitch-Account, ist der von dir als Person oder eher auf eine Community bezogen. Bzw. geht es bei deiner Webseite eher um dich (z.B. Blog) oder seit ihr eine Gemeinschaft.

Ich habe noch eine abgewandelte Version des Plugins, welche eher für die Sozialen Profile einer einzelnen Person gedacht ist. Das ganze kann man hier sehen http://sweetlifesunshine.de/page/videos/. Neben der Box für die Sidebar gibt es auch eine für den Content-Bereich. (s. Link; auf der Seite ganz unten)

Trollgon · 11. Januar 2016

Es geht um eine Organisation, die aber nur einen Twitch-Account hat

Also bräuchten wir nur die Möglichkeit den einen Twitch-Account in die Seitenleiste hinzuzufügen

The_Waiters · 11. Januar 2016

Um die Icons zu zentrieren, muss du folgenden CSS-Code in die Styleeinstellungen kopieren:

CSS

li.socialnetworks { text-align: center; float: none;}

Im Spoiler steht noch eine kleiner Erklärung dazu.

Spoiler anzeigen

CSS muss man sich wie ein Paket vorstellen wo mehrere kleine Päckchen drin sind. Die kleinen Päckchen können Bereich <div></div>, Links <a></a> oder z.B. Bilder <img></img> sein.

Wenn man sich z.B. diesen Code anschaut

HTML

<div> <a href="https://google.de">Google</a> <a href="https://gmx.de">Gmx</a> <a href="https://Woltlab.de">Woltlab</a></div>

...dann sind in dem Paket (Bereich) 3 Päckchen (Links) drin.
Wenn man nun die Hintergrundfarbe von dem Bereich Ändern will würde man das so im CSS schreiben.

CSS

div { background-color: red;}

Wenn man die Farbe aller Links ändern will dann

CSS

div { a { color: blue; }}

oder

CSS

div > a { color: blue;}

Mann arbeitet sich also von außen nach innen.

Wenn man nun nicht alle Links ändern will, sondern nur die ersten beiden, dann benutzt man Klassen (für mehrere Elemente). Wenn man nur einen Link (z.B. den 3.) ändern will benutzt man ID`s (für ein einzelnes Element). ID`s (#) und Klassen (.) kann man auch direkt ansprechen.

Ändert man nun den HTML-Code so ab:

HTML

<div> <a class="abc" href="https://google.de">Google</a> <a class="abc" href="https://gmx.de">Gmx</a> <a id="123" href="https://Woltlab.de">Woltlab</a></div>

wäre der CSS-Code nun:

CSS

div { .abc { color: red; } #123 { color: blue; }}

oder

CSS

div > .abc { color: red;}div > #123 { color: blue;}

oder direkt:

CSS

.abc { color: red;}#123 { color: blue;}

oder direkt aber geknüpft an den Link falls die klasse auch bei z.B. einem Bild verwendet wird.

CSS

a.abc { color: red;}

Wie du siehst gibt es verschiedene Varianten. Je genauer du den Weg zu einem Element hin definierst, desto genauer triffst du es auch. Gerade wenn die Klasse mehrfach verwendet wird, kannst du die Auswahl eingrenzen.

Bezogen auf mein Plugin ist mein html-Code ohne Schnick-Schnack dieser:

HTML

<fieldset class="dashboardBox"> <legend></legend> <div> <ul class="sidebarBoxList"> <li class="socialnetworks"> <a> <span></span> </a> <a> <span></span> </a> <a> <span></span> </a> <a> <span></span> </a> .... </li> </ul> </div></fieldset>

Ich hab hier dem Element <li> eine Klasse gegeben. Das reicht hier für mich aus. Wenn ich irgendwann man eine Box für den Content-Bereich mache würde dort das <li> die gleiche Klasse kriegen und es sieht überall gleich aus...Aber auch hier könnte man es anders machen.

mein CSS-Code sieht wie folgt aus:

CSS

li.socialnetworks { margin-left: -5px;}.socialnetworks { float: left; .icon { font-size: 40px; } a { display: inline-block; margin-left: 5px; margin-bottom: 5px; }}

Für deinen Fall müsst man das float: left weg bekommen und zentrieren.

Code

li.socialnetworks {
text-align: center;
float: none;
}

Sprich alle innerhalb der Klasse .socialnetworks werden nicht mehr gefloated und mittels text-align: center; zentriert.

Für Twitch befindet sich im Anhang die Beta der neuen Version. Beta deshalb, da ich die noch offiziell verteilen werde. Voll funktionsfähig ist sie aber.

Trollgon · 11. Januar 2016

Also erstmal vielen Dank für die ausführliche Erklärung bzgl CSS! Hat geklappt, danke!

Das Twitch Addon wird bei mir nicht angezeigt im Dashboard. Im ACP konnte ich die Url aber einfügen.

The_Waiters · 11. Januar 2016

Wie lautet die Adresse der Webseite? Ich will mir kurz den angezeigten Code anschauen.

Trollgon · 11. Januar 2016

die an der ich arbeite?

http://beta.ac-whispers.com

The_Waiters · 11. Januar 2016

Ich hab das Problem gefunden. Beim WCF2.0 gibts Twitch noch nicht. Installiere bitte mal diese Beta im Anhang.

Trollgon · 11. Januar 2016

Also ich habe jetzt ein Rechteck anstatt dem Twitch-icon. Der Link funktioniert aber

The_Waiters · 11. Januar 2016

Das Problem sind die fonts von fontawesome. Das alte Framework unterstützt nur die alte Version und es wird dafür auch kein Upgrade geben. Man könnte zwar manuell was machen, aber sobald ein Update von Woltlab kommt, würde manches falsch angezeigt werden.

Ich weiß nicht wie umfangreich deine Seite bereits ist... aber wenn du die gerade neu aufbaust...würde ich zum neuen Framework wechseln. Da hat sich vieles getan.

Ich kann dir hier leider nicht weiterhelfen...

Trollgon · 12. Januar 2016

Vielen Dank für deine Mühe!

Du hast mir sehr geholfen.

Twitch? & Icons zentrieren

Teilen

Rechtliches

Informationen

Über Destinaja

Soziale Netzwerke