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

    • Pacco schrieb:

      Discord Button optional hinzugefügt
      Leider gibt es kein Font Awesome Symbol dafür - oder besser, es wurde erst mit V5.0.0 eingeführt. Aber die Version wird nicht vom WSC unterstützt. :(

      Nun dachte ich mir, ich nutze die Grafik, die du mitlieferst, aber damit sieht meine Social Bar gar nicht gut aus...



      In der Box nutze ich folgenden Code dafür:

      HTML-Quellcode

      1. <div class="boxFooterSocial">
      2. <ul class="boxFooterSocialIcon48">
      3. ...
      4. <li class="boxIconsstyle4"><a href="https://steamcommunity.com/groups/compiware/" rel="nofollow" target="_blank" class="jsTooltip" title="CompiWare auf Steam"><span class="icon icon48 fa-steam-square"></span></a></li>
      5. <li class="boxIconsstyle4"><a href="https://discord.gg/tUM5h92" rel="nofollow" target="_blank" class="jsTooltip" title="CompiWare in Discord"><span class=""><img src="https://www.compiware-forum.de/images/discord.png" style="width: 32px; height: 32px;"></span></a></li>
      6. </ul>
      7. </div>

      Hat jemand einen Tipp für mich, wie ich das mit dem Discord Icon besser hinbekomme? ?(
    • PoooMukkel schrieb:

      Leider gibt es kein Font Awesome Symbol dafür - oder besser, es wurde erst mit V5.0.0 eingeführt. Aber die Version wird nicht vom WSC unterstützt.
      Ja, da gebe ich dir recht. ;) Da muss dringend nachgebessert werden. Die Version 4.7.0 ist schon etwas älter :(

      Ich habe für dich mal was in der Holzwerkstatt geschnitzt. Evtl.kannst du es ja noch verbessern. ;)


      Um die Höhe anzupassen habe ich dem span eine Klasse gegeben und das Bild auf deine Grösse angepasst

      HTML-Quellcode

      1. <span class="discord-square">
      2. <img class=" lazyunload lazyloaded" data-src="http://....
      3. style="width: 48px; height: 48px;

      CSS:

      CSS-Quellcode

      1. .boxIconsstyle4 .discord-square img {
      2. margin-bottom: 19px;
      3. }
      Bilder
      • disord-square3.png

        5,07 kB, 227×222, 15 mal angesehen
      Mit freundlichen Grüßen

      Pacco
    • PoooMukkel schrieb:

      Pacco schrieb:

      Ich habe für dich mal was in der Holzwerkstatt geschnitzt. Evtl.kannst du es ja noch verbessern.
      Habe das Logo noch ein wenig bearbeitet und nun sieht das Ganze gut aus. Super. Ich danke dir vielmals! :)

      Hi @PoooMukkel,

      jetzt wirkt das Symbol von Discord recht unscharf auf der Seite. Habe mal was gebastelt guck mal ob das besser wirkt :)

      Wenn du noch eine höhere Auflösung brauchst sag bescheid.


      Grüße
      There are only 10 types of people in the world: Those who understand binary, and those who don't.
    • Ich habe mal wieder ein optisches Anliegen. Ich nutze 3 Footer Boxen die jeweils auf 33% gestellt sind.

      Bin ich auf dem Desktop unterwegs, sieht das auch alles so weit stimmig aus.



      Sobald ich das Browser Fenster jedoch schmaler mache, kann ich zuschauen, wie sich die Optik zum Schlechten ändert. Ist das Fenster noch relativ breit, schiebt sich die dritte Box nur unter die beiden anderen Boxen.



      Damit kann ich ja noch leben. Aber sobald es dann noch schmaler wird - so wie es auch auf meinem iPhone aktuell zu sehen ist, geht das für mich nun gar nicht mehr. :(



      Die dritte Box ist komplett zerfetzt...

      Folgenden CSS Code nutze ich bezüglich der Größenanpassung der Boxen:

      CSS-Quellcode

      1. /* Footer-Boxen - Größe der Boxen anpassen */
      2. @include screen-lg { /*@media (min-width:1025px)*/
      3. .footerBoxRow1 {
      4. padding-left: 70px;
      5. }
      6. .footerbox2 h2, .footerbox3 h2 {
      7. padding-left: 35px;
      8. }
      9. .footerbox2 {
      10. padding-left: 30px;
      11. }
      12. .boxFooterSocial {
      13. text-align: left;
      14. }
      15. .footerbox1 .box1Content {
      16. padding-right: 30px;
      17. padding-left: 30px;
      18. }
      19. .footerbox1 .boxContentHeader {
      20. padding-left: 30px
      21. }
      22. }
      23. @include screen-sm-md { /*@media (min-width: 545px) and (max-width:1024px)*/
      24. .footerBoxRow1 {
      25. padding-left: 20px;
      26. }
      27. .footerbox2 h2, .footerbox3 h2 {
      28. padding-left: 35px;
      29. }
      30. .footerbox2 {
      31. padding-left: 20px;
      32. }
      33. .boxFooterSocial {
      34. text-align: left;
      35. }
      36. }
      Alles anzeigen
      Vielleicht liegt hier schon der Hund begraben? Den Code hatte ich hier im Thema auch mal bekommen.

      Hätte jemand vielleicht einen Tipp für mich? Macht es Sinn, die Boxen vielleicht einfach ab einer bestimmten Breite des Browsers ausblenden zu lassen? So sieht das jedenfalls gerade sehr unprofessionell aus.
    • Das kommt daher das ich in der alten Version max-width mit angegeben habe.

      Sollte in der neusten Version eigentlich nicht mehr sein ;) bei dir ist es auch nur die dritte Box 8|

      Um den Fehler manuell zu beheben fügst das hinzu


      CSS-Quellcode

      1. .footerbox3 {
      2. max-width: 100% !important;
      3. }
      Mit freundlichen Grüßen

      Pacco
    • Pacco schrieb:

      Sollte in der neusten Version eigentlich nicht mehr sein
      pfff...da hab ich es vergessen in der dritten box :whistling:

      Update kommt in nächster Zeit ;)

      edit:


      com.cls-design.wsc.footerBoxes.3.1.0.Beta.3

      Ein Update von Footer Boxen 3.1.0 Beta 2 auf 3.1.0 Beta 3 wird nicht unterstützt!
      Mit freundlichen Grüßen

      Pacco

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