WS 3.0 Footer Box

    Zitat von Pacco

    Und wenn du die CSS anpasst für dein Steam-Icon wird dieser auch rund dargestellt, so wie bei den anderen auch.Voraussetzung du entfernst die Endungen -square ;)

    So einfach ist das leider nicht! Das "-square" hatte ich erst genutzt, als mir kein rundes Symbol für Steam angezeigt wurde. Und das passiert nun auch wieder, wenn ich nur den Code für das Steam-Icon nutze.

    HTML
    <li class="boxIconsstyle4"><a class="boxSteam boxRounded" href="https://steamcommunity.com/groups/compiware/"  target="_blank" data-tooltip="CompiWare auf Steam"><span class="icon icon48 fa-steam"></span></a></li>

    Das Ergebnis sieht dann so aus:
    Box_Steam.png


    Zitat von Pacco

    Und nun machen wir dein Steam-Icon rund :winki:

    Ich probiere das mal aus. :)


    Jetzt müssen die Symbole nur noch links ausgerichtet und nebeneinander stehen. :D

    Zitat von Pacco

    Und nun machen wir dein Steam-Icon rund :winki:


    CSS
    .boxFooterSocial .boxIconsstyle4 .icon48.fa-steam {
    background-color: #000;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
}

    Klappt leider nicht. Habe den Code in den Stil eingetragen und der HTML Code in der Box sieht nun so aus:

    HTML
    <li class="boxIconsstyle4"><a href="https://steamcommunity.com/groups/compiware/" target="_blank" data-tooltip="CompiWare auf Steam"><span class="icon icon48 fa-steam"></span></a></li>

    Das Symbol ist allerdings noch immer nicht rund...


    Box_Steam.png

    Zitat von PoooMukkel

    Klappt leider nicht. Habe den Code in den Stil eingetragen und der HTML Code in der Box sieht nun so aus:

    hmm...war nicht ganz richtig von mir :thumbdown:


    So sollte es aussehen


    CSS
    .boxFooterSocial > ul > li > a > .icon.fa-steam {
    background-color: #000;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
}
    Zitat von PoooMukkel

    Außerdem wird mir der Tooltip nicht angezeigt, wenn ich über einen Button fahre.

    Das müsste auch so aussehen:

    HTML
    <li class="boxIconsstyle4"><a href="https://steamcommunity.com/groups/compiware/" target="_blank" class="jsTooltip" title="CompiWare auf Steam"><span class="icon icon48 fa-steam"></span></a></li>

    Sprich du musst zu dem a Element noch die Klasse jsTooltip hinzufügen und den anzuzeigenden Text im Attribut title definieren. Das data-tooltip wird automatisch vom JavaScript das die Tooltip Funktionalität bereitstellt generiert und befindet sich daher nur im fertig gerenderten Layout.