WS 3.0 Footer Box

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

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

      Source Code

      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.

      The post was edited 1 time, last by 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 Source Code

      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. }
      Display All
      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 Source Code

      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>
      Display All
      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... ;)

      The post was edited 8 times, last by PoooMukkel ().

    • PoooMukkel wrote:

      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 wrote:

      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 Source Code

      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 Source Code

      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 wrote:

      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 Source Code

      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 wrote:

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

      PoooMukkel wrote:

      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 wrote:

      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 wrote:

      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 Source Code

      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 wrote:

      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 wrote:

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

      CSS Source Code

      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 Source Code

      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 wrote:

      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 Source Code

      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 wrote:

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

      HTML Source Code

      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.