Hilfe & Support (deutsch)WebsiteBaker Support (2.12.x) > Hilfe & Support (deutsch)
Flexbox
peitman:
Hallo zusammen,
ich möchte gerne Flexboxen im wysiwyg einsetzen, bzw. gibt es ein Modul dafür?
Es sollen drei Boxen nebeneinander sein.
In jeder Box soll links ein Icon links positioniert sein und rechts davon eine Headline mit einem kurzen Text.
Über Items habe ich es schon versucht, habe es aber nicht hinbekommen.
Hat jemand einen Lösungsvorschlage?
Vorab schon mal Danke.
hgs:
Hast du hier schon mal geschaut?
https://dev4me.com/modules-snippets/opensource/bootstrap-multiple-columns/
dbs:
Kenne itemz nicht, wenn es aber ähnlich gebaut ist wie topics, members, OFA, dann ist nicht ganz klar wo dein Problem liegt.
Vielleicht beschreibst du es etwas genauer.
Gast:
eine ganz einfache Lösung ohne ein anderes Modul wäre die Erstellung einer Formatvorlage für den Editor in der editor.templates.js entweder im Ordner modules/ckeditor/wb_config oder in einer zu deinem Template kopierten Datei mit diesem Namen.
Benötigt wird ein Gridsystem, etwas CSS z.b. aus W3CSS oder Bootstrap und ein Code für diesen Block, ein paar HTML- oder zumindest Kopierkenntnisse, ein Editor deiner Wahl zum Anpassen der editor.templates.js
Möchte man es schön haben, vielleicht noch eine kleine Grafik, die bei der Auswahl des Templates gezeigt wird
Im Beispiel mal eine responsive Art solcher Box, die das Grundprinzip zeigt, wie man solche Templatevorlagen erstellt. Dies entspricht nun nicht genau dem Flexboxprinzip, welches ja noch dynamischer ist. Während eine "echte" Flexbox eher die Einträge summiert und auch 5 oder 13 aneinanderreiht, sind im Beispiel nur 3 Boxen fix, aber eben responsive. Sie ordnen sich mit schmaler werdenem Display untereinander an. Eine "echte" Flexbox ließe sich nach diesem Schema aber genau so darstellen, in dem man statt der hier gezeigten Dreierbox nur eine einzelne Box erstellt und diese mit dem entsprechenden Tag drum herum versieht.
Das Verfahren wäre dann analog. Man erstellt sich zuerst eine Vorlage für das Rahmengerüst um die Einzeleinträge drum herum und dann noch eine Vorlage für solch Einzeleintrag. Dann wird zuerst der Rahmen eingefügt und in das erstellte Element eine weitere Vorlage, die solch Einzeleintrag enthält. Dieser Vorgang läßt sich dann unendlich wiederholen und mit dem entsprechendem CSS wird so eine "echte" Flexbox draus
Mit solchen Vorlagen kann ich eigentlich jede Ausgabe von x-beliebigen Modulen "kopieren", von einer FAQ-Liste bis hin zu OneforAll oder Bakery oder irgendwelche Kalender mit Terminen. Der Vorteil von Einzelmodulen ist aber die vereinfachte Bedienung über Eingabemasken im Backend.
Im Bild 1 die Auswahl im CKEditor - Vorlagen bzw Templates
Im Bild 2 die Ansicht nach dem Einfügen im Editor
Hier wird nun einfach der Text ersetzt - erledigt ;-)
Ich habe hier aus Zeitgründen eine meiner Vorlagen kopiert und darum einen h1-Tag als Überschrift gewählt. Braucht man statt dessen ein Bild oder gar ein anderes HTML, muß man es entsprechend anpassen.
Im Anhang die editor.templates.js dazu zum Reinschauen und die Grafik für die Vorschau
Diese Grafik gehört in den Ordner modules/ckeditor/ckeditor/plugins/templates/templates/images
Lesestoff zum Thema mit Tips und Beispielen -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/
P.S.: die Vorlage nutzt das W3CSS, das ich in allen neueren Templates benutze. Es müßte also entsprechend integriert werden oder man passt den Code an für ein anderes System
Infos zu W3CSS -> https://www.w3schools.com/w3css/
LudwigSt:
--- Quote from: peitman on December 13, 2018, 11:48:18 PM ---Hallo zusammen,
ich möchte gerne Flexboxen im wysiwyg einsetzen, bzw. gibt es ein Modul dafür?
Es sollen drei Boxen nebeneinander sein.
In jeder Box soll links ein Icon links positioniert sein und rechts davon eine Headline mit einem kurzen Text.
Über Items habe ich es schon versucht, habe es aber nicht hinbekommen.
Hat jemand einen Lösungsvorschlage?
Vorab schon mal Danke.
--- End quote ---
Hallo,
dafür brauchst du nicht unbedingt ein Modul. Nur etwas HTML und CSS Kenntnisse. Im Editor gehst du auf "Quelltext" und gibst z. B. etwas in dieser Art ein
--- Code: ---<div class="columns">
<div class="column">
<article class="media">
<figure class="media-left">
<span class="icon">
<i class="fab fa-css3-alt"></i>
</span>
</figure>
<div class="media-content">
<div class="content">
<h1 class="title">Flexboxen</h1>
<p>DFKJLAKSDJLKADSJFLDSJFDLSKFJakdjfasdkf</p>
</div>
</div>
</article>
</div>
<div class="column">
<article class="media">
<figure class="media-left">
<span class="icon">
<i class="fab fa-css3-alt"></i>
</span>
</figure>
<div class="media-content">
<div class="content">
<h1 class="title">Flexboxen</h1>
<p>DFKJLAKSDJLKADSJFLDSJFDLSKFJakdjfasdkf</p>
</div>
</div>
</article>
</div>
<div class="column">
<article class="media">
<figure class="media-left">
<span class="icon">
<i class="fab fa-css3-alt"></i>
</span>
</figure>
<div class="media-content">
<div class="content">
<h1 class="title">Flexboxen</h1>
<p>DFKJLAKSDJLKADSJFLDSJFDLSKFJakdjfasdkf</p>
</div>
</div>
</article>
</div>
</div>
--- End code ---
Und in deinem css-File, oder inline im Quelltext als style, definierst du dann die benutzten css-Klassen nach deinen Wünschen. Hier ein Beispiel:
--- Code: --- .columns {
display: flex;
}
.column {
display: block;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
padding: .75rem;
}
.article{
display:block;
}
.media {
align-items: flex-start;
display: flex;
text-align: left;
}
.media-left,
.media-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
--- End code ---
In die icon-Klasse kommt dein Bild, wenn du kein Fontawesome Grafiken benutzen möchtest, rein und in den <p>-Tag dein Text. Wenn die 3 Boxen jeweils Überschriften haben sollen, kommt das in den <h1>-Tag. Viel Spaß beim Probieren!
Navigation
[0] Message Index
[#] Next page
Go to full version