Inspirowany pozytywnym zakończeniem dodania nowej pozycji modułu w sekcji footer (oddzielny wątek na forum, nieocenione wsparcie użytkownika terra) postanowiłem drogą ciekawości i eksperymentu dodać nową pozycję (bootom-c). Daleko mi do zaawansowanego użytkownika Joomla, dlatego przyjrzałem się plikom index.php, template.css i templateDetails.xml, wzorując się na czynnościach związanych ze wspomnianą wyżej operacją w sekcji footer, przeglądając sieć i szukając wskazówek - spróbowałem "dodać" pozycję bottom-c. Drogą na skróty - kod z "bottom-b" w tych plikach skopiowałem i wprowadziłem stosowne zmiany - zamiast bottom-b wpisałem bottom-c. Efekt jednak jest nie taki, jak mi się wydawało. Czy osiągnięcie zamierzonego efektu wymaga innych, bardziej zaawansowanych działań?


W załączniku wysyłam ilustrację położenia tej pozycji po wykonaniu wyżej opisanych czynności.
bottom-c.jpg

php.ini
Kod:
        <?php if ($this->countModules('bottom-b', true)) : ?>
        <div class="grid-child container-bottom-b">
            <jdoc:include type="modules" name="bottom-b" style="card" />
        </div>
        <?php endif; ?>
        
        <?php if ($this->countModules('bottom-c', true)) : ?>
        <div class="grid-child container-bottom-c">
            <jdoc:include type="modules" name="bottom-c" style="card" />
        </div>
        <?php endif; ?>
templateDetails.xml
Kod:
    <positions>
        <position>topbar</position>
        <position>below-top</position>
        <position>menu</position>
        <position>search</position>
        <position>banner</position>
        <position>top-a</position>
        <position>top-b</position>
        <position>main-top</position>
        <position>main-bottom</position>
        <position>breadcrumbs</position>
        <position>sidebar-left</position>
        <position>sidebar-right</position>
        <position>bottom-a</position>
        <position>bottom-b</position>
        <position>bottom-c</position>
        <position>footer</position>
        <position>footer-b</position>
        <position>debug</position>
    </positions>
template.css


Kod:
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b,
.container-bottom-c, 
.container-footer-b {
  position:relative;
}
.container-top-a > *,
.container-top-b > *,
.container-bottom-a > *,
.container-bottom-b > *,
.container-bottom-c > *,
.container-footer-b > *  {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0.5em 0;
}
@media (max-width: 991.98px) {
  .container-top-a,
  .container-top-b,
  .container-bottom-a,
  .container-bottom-b,
  .container-bottom-c,
  .container-footer-b {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .container-top-a > *,
  .container-top-b > *,
  .container-bottom-a > *,
  .container-bottom-b > *,
  .container-bottom-c > *,
  .container-footer-b > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
  }


.container-bottom-b {
  grid-area: bot-b;
}


.container-bottom-c {
  grid-area: bot-c;
}


@supports (display: grid) {
  .site-grid {
    display: grid;
    grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". comp comp comp comp ." ". side-r side-r side-r side-r ." ". side-l side-l side-l side-l ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". bot-c bot-c bot-c bot-c ." ". footer-b footer-b footer-b footer-b .";
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
    grid-gap: 0 1em;
  }




  @media (min-width: 992px) {
    .site-grid {
      grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". bot-c bot-c bot-c bot-c ." ". footer-b footer-b footer-b footer-b .";
    }
  }