WS 3.0 Footer Box

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Funktioniert, Perfekt ;)

      Wenn ich die Footer Box installiere und die Boxen ausschalte, ist der Bereich wo das Copyright drin steht um 10 PX höher.

      Hier durch.

      Quellcode

      1. .pageFooterCopyright > .layoutBoundary > div:not(:first-child) {
      2. margin-top: 10px;
      3. }

      Wenn ich die Footer Box deinstalliere ist alles normal.

      Auch wäre es Optisch schöner wenn sich das Copyright (Hintergrundfarbe) von der Footerbox farblich Unterscheidet.

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von HTMH ()

    • Erstmal danke für dieses super Plugin! :)

      Ich nutze vier Footer Boxen.
      In der ersten Box habe ich etwas mehr Text geschrieben. Dadurch und durch die Blocksatz-Ausrichtung des Textes habe ich zwischen Box 1 und 2 nicht viel Platz. Das sieht nun etwas zusammengestaucht aus.
      Außerdem wird in der zweiten Box ein Teil des Textes durch den Blocksatz etwas merkwürdig auseinander gezogen. Das sieht nicht schön aus.



      Ist es möglich, den Blocksatz zu entfernen, so dass der Text nur rechtsbündig ausgerichtet wird? Vielleicht haben sich meine beiden Probleme damit bereits in Luft aufgelöst. ;)
    • @PoooMukkel

      Deine Boxen haben unterschiedliche Inhaltsgrössen (z.B: Box3)
      Die können wir kleiner machen und machen dafür deine Box2 grösser ;)

      Dann versuch es mal damit

      CSS-Quellcode

      1. .footerbox1 .boxContentHeader,
      2. .box1Content {
      3. padding-left: 10px;
      4. padding-right: 10px;
      5. }
      6. .footerbox2 .boxContentHeader,
      7. .box2Content {
      8. padding-left: 10px;
      9. }
      10. .box2Content {
      11. text-align: left;
      12. }
      13. .footerbox2 {
      14. flex: 0 0 30% !important;
      15. }
      16. .footerbox3 {
      17. flex: 0 0 20% !important;
      18. }
      Alles anzeigen
      Mit freundlichen Grüßen

      Pacco
    • Darf ich nochmal eine Frage zu den Boxen stellen?

      Ich habe mir eine Box wie folgt eingerichtet:



      Das ist der passende Code dafür:

      HTML-Quellcode

      1. <li class="footerItem-101">
      2. <span class="icon icon16 fa-check-circle"></span>
      3. <a href="../terms/"> Nutzungsbestimmungen</a>
      4. </li>
      5. <li class="footerItem-102">
      6. <span class="icon icon16 fa-arrow-circle-right"></span>
      7. <a href="../datenschutzerklaerung/"> Datenschutzerklärung</a>
      8. </li>
      9. <li class="footerItem-103">
      10. <span class="icon icon16 fa-info-circle"></span>
      11. <a href="../legal-notice/"> Impressum</a>
      12. </li>
      13. <li class="footerItem-104">
      14. <span class="icon icon16 fa-envelope"></span>
      15. <a href="../contact/"> Kontaktformular</a>
      16. </li>
      17. <div class="boxFooterSocial">
      18. <ul class="boxFooterSocialIcon48">
      19. <li class="boxIconsstyle4"><a href="#" target="_blank" data-tooltip="CompiWare auf Facebook"><span class="icon icon48 fa-facebook-square"></span></a></li>
      20. <li class="boxIconsstyle4"><a href="#" rel="nofollow" target="_blank" data-tooltip="CompiWare auf Twitter"><span class="icon icon48 fa-twitter-square"></span></a></li>
      21. <li class="boxIconsstyle4"><a href="#" rel="nofollow" target="_blank" data-tooltip="CompiWare auf Youtube"><span class="icon icon48 fa-youtube-square"></span></a></li>
      22. <li class="boxIconsstyle4"><a href="#" rel="nofollow" target="_blank" data-tooltip="CompiWare auf Steam"><span class="icon icon48 fa-steam-square"></span></a></li>
      23. </ul>
      24. </div>
      Alles anzeigen
      Wollte eigentlich runde Social Buttons, aber für Steam wurde mir keiner angezeigt. Woher weiß ich denn, welche runden Buttons es gibt?
      Außerdem wird mir der Tooltip nicht angezeigt, wenn ich über einen Button fahre.

      Wie bekomme ich die Social Buttons links ausgerichtet und so angezeigt, wie es hier der Fall ist?



      Fragen über Fragen... ;)

      Dieser Beitrag wurde bereits 8 mal editiert, zuletzt von PoooMukkel ()

    • PoooMukkel schrieb:

      Außerdem wird mir der Tooltip nicht angezeigt, wenn ich über einen Button fahre.
      WCF 2.1 ja..aber
      dann zeige mir doch mal wo du das im WSC3 schon mal gesehen hast ;)
      Diese Funktion gibt es nicht mehr soweit ich erkennen kann, es sei denn man ändert das entsprechende Template dafür.
      Über die HTML-Box lässt sich das nicht einstellen oder es denn, ein anderer hätte eine Idee dazu. ;)

      Zusätzlich müsste das footerbox Template auch dafür angepasst werden.

      PoooMukkel schrieb:

      Woher weiß ich denn, welche runden Buttons es gibt?
      Das regelst du über CSS und nicht über das Icon ;)
      Schreib doch mal bitte dein HTML-Code von den Social-Icons und deine CSS hier rein.
      Ohne Liveansicht wird das sonst ein Ratespiel.
      Mit freundlichen Grüßen

      Pacco
    • Fällt dir was auf ;)

      HTML-Quellcode

      1. <li class="boxIconsstyle4"><a href="#" target="_blank" data-tooltip="CompiWare auf Facebook"><span class="icon icon48 fa-facebook-square"></span></a></li>

      und meiner sieht so aus

      HTML-Quellcode

      1. <li class="boxIconsstyle4"><a class="boxFacebook boxRounded" href="#" target="_blank" data-tooltip="Follow us on Facebook"><span class="icon icon16 fa-facebook"></span></a></li>
      woran mag es nun liegen das deine Icons eckig dargestellt werden!!?? ;)
      Mit freundlichen Grüßen

      Pacco
    • Pacco schrieb:

      woran mag es nun liegen das deine Icons eckig dargestellt werden!!??
      Ich habe diesen Code mit Absicht so modifiziert, dass die runden Icons nicht mehr angezeigt werden, denn es wurde mir kein rundes Icon für Steam angezeigt. Und das sah etwas unschön aus, wenn 3 von den 4 Icons rund sind und 1 davon nicht. ;)

      Dieser Code funktionierte bei mir nicht. Es wurde kein rundes Steam-Icon angezeigt:

      HTML-Quellcode

      1. <li class="boxIconsstyle4"><a class="boxSteam boxRounded" href="#" target="_blank" data-tooltip="CompiWare auf Steam"><span class="icon icon48 fa-steam-square"></span></a></li>
      Inzwischen gefällt es mir aber ohne runde Icons. :D

      Aber hast du vielleicht eine Idee, wie ich die Icons links ausgerichtet bekomme, so dass diese bündig zu dem darüber liegenden Text angezeigt werden?



      Der komplette Code der Box ist hier zu finden:
      WS 3.0 Footer Box

      Ich habe das leider nicht hinbekommen...
    • PoooMukkel schrieb:

      Inzwischen gefällt es mir aber ohne runde Icons
      Faule Ausrede :D

      PoooMukkel schrieb:

      Dieser Code funktionierte bei mir nicht. Es wurde kein rundes Steam-Icon angezeigt:
      Dein HTML-Code für dein Steam kann auch nicht rund dargestellt werden, weil du alle deine Icon´s mit -square angegeben hast .
      Was bedeutet "Square"?? Quadratische Darstellung der Icons ;)


      PoooMukkel schrieb:

      denn es wurde mir kein rundes Icon für Steam angezeigt.
      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 ;)
      Mit freundlichen Grüßen

      Pacco
    • Pacco schrieb:

      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-Quellcode

      1. <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:


      Pacco schrieb:

      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
    • Pacco schrieb:

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

      CSS-Quellcode

      1. .boxFooterSocial .boxIconsstyle4 .icon48.fa-steam {
      2. background-color: #000;
      3. border-radius: 50%;
      4. color: #fff;
      5. font-size: 30px;
      6. }
      Klappt leider nicht. Habe den Code in den Stil eingetragen und der HTML Code in der Box sieht nun so aus:

      HTML-Quellcode

      1. <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...

    • PoooMukkel schrieb:

      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-Quellcode

      1. .boxFooterSocial > ul > li > a > .icon.fa-steam {
      2. background-color: #000;
      3. border-radius: 50%;
      4. color: #fff;
      5. font-size: 30px;
      6. }
      Mit freundlichen Grüßen

      Pacco
    • PoooMukkel schrieb:

      Außerdem wird mir der Tooltip nicht angezeigt, wenn ich über einen Button fahre.
      Das müsste auch so aussehen:

      HTML-Quellcode

      1. <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.