Module / Frontend Editior TinMCE Layout wieder herstellen / Optionen einbinden

    Hallo zusammen,


    ich bin neu hier und hoffe ihr könnt mir weiterhelfen. Ich habe ein eigenes Template mit Hilfe von Bootstrap erstellt, welches soweit auch läuft. Sofern ich aber bestehende Module einbinde und wie bei der Suche diese nutzen möchte, zerschießt sich das Layout des Moduls.
    Auch den Frontend-Editor TinMCE kann ich zwar aktivieren, aber die Buttons sind nicht sichtbar und wenn ich im Frontend die Bearbeitung öffne ist das komplette Layout zerschossen. Ich habe nun soviel schon heraus gefunden, dass ich wohl kaum "option" eingebunden habe. Ich finde aber nicht heraus, wie und wo ich das machen kann. Muss ich das für jedes Modul bzw. Komponente extra machen?


    Ich habe versucht aus dem Protostar-Template schlau zu werden, welche Befehle dafür nötig sind, es ist mir leider nicht gelungen.


    Ich selber habe gute html und css Kenntnisse, allerdings nur rudimentäre php-Kenntnisse.


    Die Index.php und TemplateDetails.xml habe ich mal angehängt


    Vielen Dank für eure Hilfe


    Eva

  • Zum hilfreichsten Beitrag springen

    Zitat von eva.skroch

    Ich habe ein eigenes Template mit Hilfe von Bootstrap erstellt, welches soweit auch läuft.


    Welche Boostrapversion hast Du verwendet?
    Joomla verwendet für seine Ausgabe immer noch Boostrap 2 die nicht die selben Klassen verwendet wie Bootsrap 3.


    Um Dir zu effektiv zu helfen ist eine Liveinstallation die wir analysieren können besser.

    Und wo soll es das Layout zerreißen?
    Außer dem Gridsystem und Nav, ist von Bootstrap kaum was zu sehen. Ich verstehe auch nicht, was Du mit "options" meinst und willst.


    Wie ich schon geschrieben habe, Joomla liefert Inhalte und den FE-Editor in Bootstrap 2 aus. Das alles kannst Du mit selbst erstellte Overrides beeinflussen.


    Wie die LESS Variablen heißen und wie Du Dir Dein eigenes Bootstrap-Theme erstellen kannst, steht hier. http://pikock.github.io/bootst…c/app/index.html#!/editor

    Hallo,


    also wenn ich zum Beispiel was in der Suche eingebe und sich dann die Suchergebnisseite öffnet, ist dort der Button neben dem Eingabefeld total klein. Wenn ich mich im Frontend anmelde und editiere möchte, sind die Buttons nicht sichtbar, aber fährt man mit der Mouse über die Stelle wo sie sein sollen, sind sie tatsächlich da und ich kann editieren, aber auch hier ist die komplette Formatierung schief.
    Ich habe dir mal Screenshots angehängt.


    Wie gesagt, sind meine php-Kenntnisse noch im Anfängerstadion. Ich würde gerne wissen, an welcher Stelle ich anfassen muss um diese Stilfehler zu beheben, ein Override, eine eigene CSS für jedes Modul, modultable???

    • Hilfreich

    Dafür benötigst Du keine PHP und keine options.
    Du musst die Dinge die nicht passen neu stylen.


    Folgende Möglichkeiten hast Du, da Du Bootstrap 3 statt 2 verwendet hast.


    1. Du erstellst für die Module Overrides mit den passenden Bootsrtap 3 Klassen
    2. Du machst Dir eine custom.css mit der Du die nicht deklarierten Klassen neu schreibst. Das muss nicht zwingend für jedes Modul eine eigene CSS sein. .mduletable ist eine joomlaeigene Klasse die Du verwenden kannst, aber nicht musst. Mit Modulklassensufixe kannst Du ein Modul mit Deinen eigenen Klassen erweitern.


    Zitat von eva.skroch

    sind die Buttons nicht sichtbar, aber fährt man mit der Mouse über die Stelle wo sie sein sollen


    Das ist der Editorbutton für Module. Der erscheint immer erst bei Mousover des Moduls. Ich schätze es fehlt hier der passende z-index.

    Hallo Tom,


    vielen Dank für deine Hilfe. Dann werde ich mich mal an die Arbeit machen. Noch eine FRage zum z-index. An welche Stelle gehört der hin, im Override des Editors vebunden mit der passenden Klasse?

    Zitat von eva.skroch

    sind die Buttons nicht sichtbar, aber fährt man mit der Mouse über die Stelle wo sie sein sollen

    Das findest Du mit jedem Entwicklungstool die es in den Browsern so gibt, raus. Drück mal im Browser F12.
    Zuständig ist /media/system/css/frontediting.css


    Ich würde den selektor .btn.jmodedit mit meiner eigenen CSS überschreiben.