Jeśli mowa o stopce, w szablonie Kasjopea, to akurat ta, ma chyba podział na kolumny o określonym rozmiarze. Ustawienie modułu na 12, pozwoli tylko na pełną szerokość, w kolumnie, a nie całej ramce.
Żeby osiągnąć efekt, o którym mowa czyli wiersz z podziałem i pełem wiersz pod spodem, trzeba dodać nową pozycję.
footer ma klasę:
<footer class="container-footer footer full-width">
</div>
z ramką
<div class="grid-child">
</div>
co nie będzie dawać pełnej szerokości, (container-footer jest w ogóle niezdefiniowany)
Należałoby dodać
<div class="grid-child container-nazwakontenera">
</div>
W praktyce powinno to wyglądać mniej więcej tak:
plik /templates/nazwaszablonu/index.php
<?php if ($this->countModules('footer', true)) : ?>
<footer class="container-footer footer full-width">
<div class="grid-child">
<jdoc:include type="modules" name="footer" style="none" />
</div>
<?php if ($this->countModules('nazwakontenera', true)) : ?>
<div class="grid-child container-nazwakontenera">
<jdoc:include type="modules" name="nazwakontenera" style="card" />
</div>
<?php endif; ?>
</footer>
plik /templates/nazwaszablonu/templateDetails.xml
<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>footer</position>
<position>debug</position>
<position>nazwakontenera</position>
</positions>
plik /media/templates/site/nazwaszablonu/css/template.css
.
.
.container-nazwakontenera {
position: relative;
}
.
.
.container-nazwakontenera > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0.5em 0;
}
.
.
@media (max-width: 991.98px) {
. .container-nazwakontenera {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.container-nazwakontenera > * {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
}
.
.
@supports (display: grid) {
.site-grid {
display: grid;
grid-template-areas: ".......". nazwakontenera nazwakontenera nazwakontenera nazwakontenera ."......
.
.
}
@media (min-width: 992px) {
.site-grid {
grid-template-areas: ".... ". nazwakontenera nazwakontenera nazwakontenera nazwakontenera .";
}
}
.
.
.
.container-nazwakontenera {
grid-area: nazwakontenera;
}