WS 3.0 Layout Extension Kit

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

    • Das Extension Kit ist nur für eine Darstellung innerhalb einer Box geeignet, das funktioniert boxübergreifend nicht. Dafür müsste man sich eine eigene Lösung überlegen. Prinzipiell möglich, aber es gibt nichts fertiges in der Richtung.
      TwitterFacebook

      Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum
      :eyes:
    • Ich habe eine neue Version hochgeladen. Die funktioniert nun auch in WoltLab Suite 3.1 und es gibt einen neuen Button:



      Das Paket ist jetzt auch auf unserem Paketserver zu finden:

      https://www.cls-design.com/update/vortex/stable/
      TwitterFacebook

      Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum
      :eyes:
    • Ich hätte eine Frage zu einem speziellen Layout. Ich bin nicht der HTML-Profi, deshalb muss ich nachfragen.

      Ich würde es gerne innerhalb einer Box folgendermaßen darstellen: wireframe.cc/TRoABm

      Ich hätte gerne drei Bilder jeweils nebeneinander. Also nur die Bilder ohne Text. Alle mit verschiedener Verlinkung. Diese sollten sich logischerweise responsive mit anpassen.

      Wer könnte mir hierzu helfen?
    • Du kannst dafür den Code für drei Spalten nehmen. Da müsste dann noch eine Anweisung für die Skalierung mit rein, das müßte:

      .gridLayout img {width: 100%;}

      sein.

      Falls nicht kann dir vielleicht jemand anders die richtige Klasse sagen, ich bin heute und morgen nicht zu Hause.
      TwitterFacebook

      Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum
      :eyes:
    • Tom wrote:

      Du kannst dafür den Code für drei Spalten nehmen. Da müsste dann noch eine Anweisung für die Skalierung mit rein, das müßte:

      .gridLayout img {width: 100%;}

      sein.

      Falls nicht kann dir vielleicht jemand anders die richtige Klasse sagen, ich bin heute und morgen nicht zu Hause.

      Ja das wäre super, wenn mir hierzu jemand den Code nennen könnte :)
    • @Tom,

      reicht hier nicht einfach der Code für drei Spalten? Es wirkt nämlich dann sehr erdrückend mit width: 100%;
      Die Bilder über CSS einzubinden ist zwar besser zum anpassen, aber so ist es erstmal möglich, wenn ich deinen Post richtig verstanden habe @DominikPinzenoehler

      HTML Source Code

      1. <div class="gridLayout row">
      2. <div class="gridBox col-md-4">
      3. <div class="gridBoxContent gridBoxIcon gridBoxJustify">
      4. <div class="gridBoxContentHeroIcon gridBoxCenter">
      5. <a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
      6. </div>
      7. </div>
      8. </div>
      9. <div class="gridBox col-md-4">
      10. <div class="gridBoxContent gridBoxIcon gridBoxJustify">
      11. <div class="gridBoxContentHeroIcon gridBoxCenter">
      12. <a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
      13. </div>
      14. </div>
      15. </div>
      16. <div class="gridBox col-md-4">
      17. <div class="gridBoxContent gridBoxIcon gridBoxJustify">
      18. <div class="gridBoxContentHeroIcon gridBoxCenter">
      19. <a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
      20. </div>
      21. </div>
      22. </div>
      23. </div>
      Display All
      Grüße
      There are only 10 types of people in the world: Those who understand binary, and those who don't.
    • lacritz wrote:

      @Tom,

      reicht hier nicht einfach der Code für drei Spalten? Es wirkt nämlich dann sehr erdrückend mit width: 100%;
      Die Bilder über CSS einzubinden ist zwar besser zum anpassen, aber so ist es erstmal möglich, wenn ich deinen Post richtig verstanden habe @DominikPinzenoehler

      HTML Source Code

      1. <div class="gridLayout row">
      2. <div class="gridBox col-md-4">
      3. <div class="gridBoxContent gridBoxIcon gridBoxJustify">
      4. <div class="gridBoxContentHeroIcon gridBoxCenter">
      5. <a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
      6. </div>
      7. </div>
      8. </div>
      9. <div class="gridBox col-md-4">
      10. <div class="gridBoxContent gridBoxIcon gridBoxJustify">
      11. <div class="gridBoxContentHeroIcon gridBoxCenter">
      12. <a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
      13. </div>
      14. </div>
      15. </div>
      16. <div class="gridBox col-md-4">
      17. <div class="gridBoxContent gridBoxIcon gridBoxJustify">
      18. <div class="gridBoxContentHeroIcon gridBoxCenter">
      19. <a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
      20. </div>
      21. </div>
      22. </div>
      23. </div>
      Display All
      Grüße

      Danke für den Code. Das sieht schon sehr gut aus :)

      Also ohne .gridLayout img {width: 100%;} zeigt es mir die Bilder in Original Größe an. Somit müsste das mit .gridLayout img {width: 100%;} schon passen.


      Könntest du mir noch bei der Anpassung der Bildergröße behilflich sein? Am besten wäre wenn man einfach eine maximal Höhe festlegt? Das wäre dann auch für Smartphones gut.
      Auf Desktop und Tablet sieht es gut aus, nur auf dem Smartphone sind die Bilder ja logischerweise alle untereinander und sehr groß.
    • DominikPinzenoehler wrote:

      Danke für den Code. Das sieht schon sehr gut aus

      Also ohne .gridLayout img {width: 100%;} zeigt es mir die Bilder in Original Größe an. Somit müsste das mit .gridLayout img {width: 100%;} schon passen.


      Könntest du mir noch bei der Anpassung der Bildergröße behilflich sein? Am besten wäre wenn man einfach eine maximal Höhe festlegt? Das wäre dann auch für Smartphones gut.
      Auf Desktop und Tablet sieht es gut aus, nur auf dem Smartphone sind die Bilder ja logischerweise alle untereinander und sehr groß.
      Jetzt ohne es ausprobiert zu haben:


      CSS Source Code

      1. @include screen-lg { /*DESKTOP */
      2. .gridLayout img {
      3. width: 100%;
      4. }
      5. }
      6. @include screen-md-down { /*Smartphone/Tablet */
      7. .gridLayout img {
      8. width: 50%;
      9. }
      10. }
      Display All
      probier es mal aus und spiel mit dem Wert 50% bisschen rum ;)

      grüße
      There are only 10 types of people in the world: Those who understand binary, and those who don't.
    • lacritz wrote:

      DominikPinzenoehler wrote:

      Danke für den Code. Das sieht schon sehr gut aus

      Also ohne .gridLayout img {width: 100%;} zeigt es mir die Bilder in Original Größe an. Somit müsste das mit .gridLayout img {width: 100%;} schon passen.


      Könntest du mir noch bei der Anpassung der Bildergröße behilflich sein? Am besten wäre wenn man einfach eine maximal Höhe festlegt? Das wäre dann auch für Smartphones gut.
      Auf Desktop und Tablet sieht es gut aus, nur auf dem Smartphone sind die Bilder ja logischerweise alle untereinander und sehr groß.
      Jetzt ohne es ausprobiert zu haben:

      CSS Source Code

      1. @include screen-lg { /*DESKTOP */
      2. .gridLayout img {
      3. width: 100%;
      4. }
      5. }
      6. @include screen-md-down { /*Smartphone/Tablet */
      7. .gridLayout img {
      8. width: 50%;
      9. }
      10. }
      Display All
      probier es mal aus und spiel mit dem Wert 50% bisschen rum ;)

      grüße


      Ne funktioniert leider nicht :/
      Das ändert leider nur den Abstand vom Bild zum Seitenrand. Auf dem Smartphone hätten eigentlich auch zwei Bildern nebeneinander noch Platz.
    • Du willst also Mobil die höhe und die breite anpassen? Entweder so oder du machst es mit Zahl px Angaben. Und wie gesagt ungetestet. Ansonsten musst du mir mal nen Link geben :)

      Source Code

      1. @include screen-lg { /*DESKTOP */
      2. .gridLayout img {
      3. width: 100%;
      4. }
      5. }
      6. @include screen-md-down { /*Smartphone/Tablet */
      7. .gridLayout img {
      8. width: 50%;
      9. height: 50%;
      10. }
      11. }
      Display All
      There are only 10 types of people in the world: Those who understand binary, and those who don't.
    • lacritz wrote:

      Du willst also Mobil die höhe und die breite anpassen? Entweder so oder du machst es mit Zahl px Angaben. Und wie gesagt ungetestet. Ansonsten musst du mir mal nen Link geben :)

      Source Code

      1. @include screen-lg { /*DESKTOP */
      2. .gridLayout img {
      3. width: 100%;
      4. }
      5. }
      6. @include screen-md-down { /*Smartphone/Tablet */
      7. .gridLayout img {
      8. width: 50%;
      9. height: 50%;
      10. }
      11. }
      Display All

      Ich möchte eigentlich nur, dass auch Mobil die Bilder nicht übergroß angezeigt werden. Es geht nur um Symbolbilder für Foren-Kategorien.

      Ich habe es hier nochmal aktualisiert wie ich mir die Darstellung vorstelle. Oben auf größeren Geräten, unten z.B. auf Smartphones. wireframe.cc/TRoABm
    • lacritz wrote:

      Ok, ich komm grad nicht auf die Lösung mit dem Grid Boxen. Musst du auf @Tom warten.

      PS: Ja es kann manchmal ärgerlich sein, zu warten dennoch bleib bitte bei einem Post
      community.woltlab.com/thread/2…ostID=1644964#post1644964

      Grüße

      Das ist kein Problem. Ich hoffe nur auf weitere Lösungsvorschläge, da ich hier ja speziell mittels des Layout Extension Kits von cls-design gefragt habe.

      Und ein erster Lösungsvorschlag kam ja bereits. Der ist zwar nicht ideal, aber warum eigentlich nicht so machen.
    • Hallo zusammen,

      ich wollte die "Demofooter mit drei Boxen" einbinden, aber das zeigt es nur über die Hälfte der Seite an. Wie kann ich es machen, dass es über die ganze Seite angezeigt wird?

      -> Hab raus gefunden, dass es an der Anzeigeoption liegt.
      Fusszeile geht nicht, im Inhaltsbereich unten geht.

      Gruss

      Wasserlasser
    • Users Online 2

      2 Guests