Neue Positionen in Protostar einfügen

    Hallo,

    für Protostar möchte ich oberhalb 'footer' (also unterhalb 'rowfluid') drei neue Positionen horizontal/nebeneinander einfügen.

    Dazu benutze ich die freien 'position-9, 10, 11' aus 'templateDetails.xml'.


    In 'index.php' habe ich 3 Codeblöcke für die 3 Positionen eingefügt.

    Neuer Codeblock:

    PHP
    <?php if ($position9ModuleCount) : ?>

    <div id="left" class="span4">

    <!-- Begin Bottom-left -->

    <div class="bottom-let">

    <jdoc:include type="modules" name="position-9" style="xhtml" />

    </div>

    <!-- End Bottom-left -->

    </div>

    <?php endif; ?>

    Die 3 Positionen erscheinen aber:

    Erstes Problem: (www.test.derkps.de)

    Mit class="span4" müssten ja eigentlich (3x4=12) alle 3 Positionen neben einander passen. Tun sie aber nicht!

    Warum?


    Zweites Problem mit 'Adjusting content width' kommt später.


    vG

    Ahh, jetzt ja, <div class='row-fluid'> wie bei sidebar.

    Danke für den Hinweis!


    Das Problem 'Adjusting' hat sich erledigt: Ich muss natürlich eine eigene Variable nehmen und nicht die schon benutzte $span pardon


    Den Code habe ich oberhalb <!-- Footer --> eingebunden, also unterhalb vom Container, row-fluid.


    Um CSS auf die Positionen anzuwenden habe ich in index.php 'style=bottom' zugeweisen und in user.css eine Klasse '.bottom' eingerichtet. Aber nichts passiert.

    Wähle ich 'style=well', werden die Einstellungen von .well übernommen, was mir jedoch nicht weiter hilft.

    Das irritiert mich :/

    Ich kann aber einen Modulklassensuffix zuweisen diese Klassenzuweisung funktioniert:)


    Jetzt suche ich nur noch einen gemeinsamen Container für die 3 Positionen, dem ich einen Background zuweisen kann hmm



    vG

    Das mit dem style="" hast du falsch verstanden. Damit ist der Modulstil, auch modChrome oder ähnlich unverständlich genannt, gemeint, den du quasi empfiehlst. Der wird gezogen, wenn im Feld Modul-Stil des Moduls "Vererbt" steht.

    Hier also der Modulstil "xhtml", wenn nichts anderes gewählt ist:

    Zitat von suederland

    <jdoc:include type="modules" name="position-9" style="xhtml" />

    Ich kann auch empfehlen "xhtml" nicht mehr zu verwenden, sondern "html5". Aber nur, weil ersterer in Joomla 4 rausfliegen wird.


    Einen Modulstil "well" gibt es allerdings im Protostar, der ein class="well" einschleppt. Deshalb siehst du eine Veränderung. https://github.com/joomla/joom…/html/modules.php#L37-L57


    Hier mehr zum Thema eigene Modulstile, falls interessiert:

    https://ghsvs.de/programmierer…en-verstehen-eigene-coden

    Aber auch das ändert sich in Joomla 4. Da wird nicht mehr die Datei modules.php dafür verwendet, sondern man ist auf JLayouts umgestiegen. (Keine Ahnung, ob die Datei modules.php dann trotzdem noch weiter verwendet werden kann.)

    Hallo again!

    Den o.g. Code habe ich aktuell in index.php eingesetzt unterhalb von


    PHP
    <!-- End Right Sidebar -->

    </div>

      <?php endif; ?>

        </div>

          </div>

          ...

    Die Positionen/Module verteilen sich über den gesamten Bildschirm (static).


    Deshalb habe ich Code zwischen

    Code
    <div class="row-fluid">

      ...

    </div>


    eingeklammert in

    PHP
    <bottom class="bottom" role="bottomCSS">

      <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">

        <div class="row-fluid">

          ...

        </div>

      </div>

    </bottom>


    Die Positionen/Module passen sich jetzt dem Container/row-fluid gem. static/fluid (wie bei sidebars) an.


    Nun hätte ich aber auch erwartet, dass ich die neue Klasse .bottom (wie class="header", class="footer") in user.css ansprechen kann.

    Dem ist aber nicht so. <bottom ... scheint unbekannt zu sein (Farbe). Sattdessen erhalte ich 2 senkrechte Striche.
    Warum? Muss ich neue Klassen irgendwo eintragen?


    vG

    Wenn du nicht gerade custom elements bzw. web components benutzt, würde ich dir empfehlen, bei gültigen HTML-Elementen und gültigen Werten für das role-Attribut zu bleiben. Sprich:

    PHP
    <div class="bottom">

      <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">

        <div class="row-fluid">

          ...

        </div>

      </div>

    </div>

    Dann solltest du das Element mit .bottom ansprechen können.

    Weil zwar ein Tag <bottom> in modernem HTML erlaubt ist, er aber nicht üblich ist. Deshalb musst du ihm per CSS mindestens ein display: block; geben, sonst wird er als Inline-Element angezeigt.


    Weiters eine role="" ist für Barrierefreiheit gedacht (Accessibility). Deshalb solltest du nur sinnvolle verwenden, also welche die offiziell spezifiziert sind.

    OK,


    die Notation #6 funktioniert. Ich muss nur noch die beiden oberen Zeilen (zielgerichtet) tauschen.

    Danke für den Hinweis.


    Ich habe versucht, vorhandenen Code aus index.php für meine neue Aufgabenstellung zu verwenden.

    <header class="header" role="banner"> funktioniert im (alten) protostar

    <bottom class="bottom"> funktioniert nicht.

    <div class="bottom"> funktioniert wieder.

    <div class="body" id="top"> funktioniert im (alten) protostar aber auch. hmm


    Heute abend ziehe ich mir mal die Literatur von #4 rein.

    Danach habe ich wohl fertig.dance


    vG