TinyMCE + Bootstrap

Stef

Ich habe die user.css im Tiny Editor eingebunden als eigene Klassendatei. Wie kann ich auch noch Bootstrap einbinden?

bembelimen

Leg doch in den gleichen Ordner ein Bootstrap ab und importiere diesen in deine user.css.

Stef

Ja, die bootstrap.css ist im CSS Ordner schon vorhanden. Habs mit @import in der user.css und in verschiedenen Arten versucht, will aber nicht klappen. Cache mehrfach gelöscht … Ist nicht so dringend, werde es in den nächsten Tagen noch versuchen. Danke.

Stef

Nach vielen Tests:

row / col funktionieren im Editor nicht. Egal, welcher @import verwendet wird.

<div class="row">
<div class="col-md-6">Links</div>
<div class="col-md-6">Rechts</div>
</div>

Wird nur untereinander angezeigt.

drmenzelit

Wird die user.css auch geladen?

firstlady

Ich würde es zwar anders machen , aber das geht bei just joomla.

Stef

Zitat von drmenzelit

Wird die user.css auch geladen?

Tatsächlich wird die user.css nicht geladen.
Lasse ich "Eigene CSS-Klassendatei" leer, wird ja die editor.css geladen. Aber auch wenn ich in der editor.css das @import url('../media/templates/site/cassiopeia_stef/css/bootstrap.css'); einfüge, wird row/col nicht angezeigt.

Zitat von firstlady

Ich würde es zwar anders machen , aber das geht bei just joomla.

Wie würdest du es machen?

firstlady

Eher d-flex und je nachdem was du möchtest:
Entweder nur col wenn es gleich verteilt ist oder eine definition auch für small devices. Aber das war nicht gefragt und dein code funktioniert auch

Code

<div class="d-flex">
<div class="col">Links</div>
<div class="col">Rechts</div>
</div>
<div class="d-flex">
<div class="col-sm-12 col-md-6">Links</div>
<div class="col-sm-12 col-md-6">Rechts</div>
</div>

Stef

Danke, werde ich später mal anschauen.

Aber im Editor auch untereinander.

drmenzelit

Zitat von Stef

Tatsächlich wird die user.css nicht geladen.

Versuche mal mit umbenennen in user.min.css

Stef

Umbenennen in user.min.css keine Wirkung.
Zurück zur editor.css und Umbenennen der bootstrap.css in bootstrap.min.css, auch keine Wirkung.

Stef

OK, hier die Lösung.
Ich behalte die editor.css mit folgenden import:
@import url('/media/templates/site/cassiopeia_stef/css/bootstrap-grid.css');

Mit der bootstrap-grid.css funktioniert es jetzt.

Tags