Cassiopeia: bottom-c

[james.bien]

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

        <?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

    <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

.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 .";
    }
  }

[rkonik]

Nie wiem jaki efekt chciałeś uzyskać bo go nie sprecyzowałeś.
Faktem jest cassiopeia pozycja botton-b znajduje się w wewnątrz

<div class="site-grid">

Jeżeli chcesz to wewnątrz footer to przenieś to wewnątrz :

<footer class="container-footer footer full-width">

Pamiętaj jednak że sam footer ma również if-a musisz to uwzględnić.

[zwiastun]

Elementy siatki muszą być zadeklarowane w css.
Plik źródłowy z deklaracjami masz w katalogu /media/templates/site/cassiopeia/scss/blocks/_css-grid.scss.
Deklaracje wynikowe znajdują się w pliku /media/templates/site/cassiopeia/css/template.css (oraz w zminimalizowanym). Przejrzyj wpisy poniżej deklaracji
@supports (display:grid) {...

musisz dodać do user.css co najmniej takie fragmenty, które wzbogacają siatkę cassiopei o dodaną przez Ciebie, a więc np.:

@supports (display:grid) {
  .....
  .....
  ". bot-c bot-c bot-c bot-c ."
  .....
}

@media (min-width: 992px) {
  .....
  .....
  ". bot-c bot-c bot-c bot-c ."
  .....
}
}
}

i dalej

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

[terra]

1. Po pierwsze, tworzysz pozycję bottom-c , która potem zamieni się na bot-c, ponieważ stanie się elementem siatki.

2. czy wprowadzasz zmiany w php.ini ? czy w index.php , bo w przyładzie swojego kodu podajesz php.ini ?!?

3. Nie ma większego problemu żeby rozszerzyć pozycję, to mój szablon oparty na Kasjopei https://www.joomlaterra.pl/strony-jo...rraplanet-demo , z dodanymi pozycjami, ale zmiany dokonywane są kolejno :

- /templates/nazwa_szablonu/index.php
- /templates/nazwa_szablonu/templateDetails.xml
- /media/templates/site/nazwa_szablonu/css/template.css

4. ważne jest to o czym wspomniał zwiastun, czyli siatka i ramki, bo z Twojego kodu nie wynika, że umieściłeś swoją pozycję we właściwej ramce. bottom-b jest zamknięte w ramce site-grid, więc jeśli chcesz, aby Twoja nowa pozycja zachowywała się tak samo, musisz to powielić.
index.php

<div class="site-grid">
.
.
        <?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; ?>
</div>

templateDetails.xml

    <positions>
.
.
        <position>bottom-b</position>
.
.
    </positions>

plik template.css lub jeśli nie chcesz nadpisywać tego pliku to user.css (co do pliku _css-grid.scss , to nie polecam grzebania w nim, skoro jesteś początkujący, template.css zawsze można skompresować do template.min.css i efekt będzie taki sam). W pliku stylów jest kilka elementów do zdefiniowania:

/*-------------------------*/
.container-bottom-b {
  position: relative;
}
/*-------------------------*/
.container-bottom-b > * {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0.5em 0;
}

/*-------------------------*/
@media (max-width: 991.98px) {


  .container-bottom-b {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .container-bottom-b > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
  }
}
/*-------------------------*/
.container-bottom-b {
  grid-area: bot-b;
}

to wszystko jeśli definiujemy pozycję, ale konieczna jest korekta siatki, aby było wiadomo, gdzie umieścic tę pozycję

@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 .";
    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 .";
    }
  }

tak to powinno wyglądać.
Najprawdopodobniej masz błąd w strukturze index.php

[james.bien]

Wrzucę zrzuty ekranu i fragment kodu. Wydaje się, że jest ok, ale niestety nie.

plik index.php
Załącznik 10155

plik templateDetails.xml
Załącznik 10156

plik template.css
Załącznik 10157
Załącznik 10158

i kod

@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;
  }
  .site-grid > [class^=container-],
  .site-grid > [class*=" container-"] {
    width: 100%;
    max-width: none;
    -webkit-column-gap: 1em;
       -moz-column-gap: 1em;
            column-gap: 1em;
  }
  .site-grid > .full-width {
    grid-column: full-start/full-end;
  }
  @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 .";
    }
  }
}

Wybieram pozycję bottom-c
pozycja bottom-c.png

[terra]

załaczniki nie działają

[james.bien]

plik index.php
index.php.jpg

plik templateDetails.xml
templateDetails.xml.png

plik template.css
template.css.1.png

template.css.2.png

[terra]

Wszystko wygląda poprawnie, ale gdzieś masz błąd i najprawdopodobniej w index.php, to może być jeden zbędny znak. Nie widać czy umieściłeś to we właściwej ramce, wskazany wygląd sugeruje, że Twoja pozycja wylądowała w kolumnie sidebar-left .

[rkonik]

Nie rozumiem twojej koncepcji. Użyłeś:

  .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;
 }

A potem wpisujesz coś takiego:

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

Po co tyle kodu? Jak chcesz mieć jedno pod drugim to wywal zbędny kod i wstaw:

.site-grid {
  display: grid;
  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;
}


.banner {
  grid-column: main-start / main-end;
}

.top-a {
  grid-column: main-start / main-end;
}

.top-b {
  grid-column: main-start / main-end;
}

/* I tak dalej dla pozostałych elementów */

I tak będziesz miał jedno pod drugim. Taki jest grid. Po co komplikować sobie życie zbędnym kodem. Chyba że chciałeś uzyskać toś innego i uważasz że jest błąd. Moim zdaniem twoim błędem jest zbyt wiele kodu skoro poszczególne elementy mają być jeden pod drugim.

[terra]

Na tym etapie to bez znaczenia, problemem jest niewłaściwy układ, a nie nadmiar kodu. Jak sądzę kolega prezentuje kod tak jak on leci w cassiopei, bez wycinania nieznaczących fragmentów.