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.
10153

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-joomla/terraplanet-szablon-joomla#szablon-terraplanet-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
10155

plik templateDetails.xml
10156

plik template.css
10157
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
10159

[terra]

załaczniki nie działają

[james.bien]

plik index.php
10161

plik templateDetails.xml
10162

plik template.css
10163

10164

[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.

[rkonik]

Niech autor poda link aby móc to sprawdzić. Kolejna kwestia jest fakt wprowadzania elementów grid-area skoro wypełnia całe "rzędy". Tym bardziej że z przekazanego kodu jednoznacznie wynika to z faktu że dla wersji mobile ma to sens ale to samo robi dla wersji desktop

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

Więc dla wersji mobile i desktop umieszczane są elementy jeden pod drugim. By to uzyskać tak naprawdę wystarczy wpisać wyłącznie

display: grid;
i też się wyświetlą elementy jeden pod drugim.
jednak z jakiegoś powodu autor wprowadził ten fragment:

grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
który wyraźnie dzieli nam stronę na konkretne kolumny.
jeżeli chcesz umieszczać po kolei elementy to nie musisz stosować grid-area. Można to tak zrobić:

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

.element {
grid-column: main-start / span 2; /* Każdy div zajmuje dwie kolumny */
}

oczywiście możesz to zamienić tak aby zajmował jedną kolumnę czy inaczej nie ma potrzeby stosować grid-area. To jest znaczne ograniczenie kodu. Jednak cały problem polega na tym że autor nie podał linku i nie opisał na czym jeszcze polega dokładnie brak efektu który chce uzyskać.

[terra]

Trochę za bardzo kombinujesz :) , przeczytaj cały wątek, to jest localhost i operacja jaką kolega wykonuje to powielenie istniejącej pozycji w szablonie Cassiopeia.

[rkonik]

Może i kombinuję ale tworzenie kolejnych pozycji w taki sam sposób duplikując kod jest nieefektywne. Takie kopiowanie nie ma nic wspólnego z DRY i popełnienie błędu znacząco wzrasta co widać u autora.

[terra]

nie jestem pewien czy to jest powielanie kodu na nowo, czy tylko dopisywanie do istniejącego kodu.

[rkonik]

Moim zdaniem jest. Podkreślę jest to moje zdanie i nie musimy się w tej kwestii zgadzać. Ale z wcześniejszych Twoich wpisów i linku pokazujesz metodę jak powielać ten fragment kodu. Nazwijmy to obszarem "bottom" To można załatwić bardziej elegancko używając display:grid; Bez zbędnego kopiowania CSS-a.

Jednak nasze różne punkty spojrzenia na sposób pracy i kodowania jest tu bez znaczenia i nie wniesie znacząco dużo do rozwiązania problemu samego Autora.
Autor powinien przedstawić dokładniej co dalej jest nie tak. Nawet jeżeli jest to na maszynie lokalnej to zawsze istnieje sposób udostępnienia plików a w szczególności plików samego szablonu by móc przetestować ten problem przez innych.

[terra]

Moim zdaniem jest.....
Mówiłem o prezentacji kodu przez Autora

[james.bien]

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.

Tak, pokazuję bez wycinania (dla zawodowców to oczywiście zbędne, wystarczy Wam rzut oka i wiecie o co chodzi:up:).

Wrzucam zrzut fragmentu pliku index.php. Zrobię próbę na nowej instalacji cassiopei, ale wydaje się, że jest OK. Ale nie jest, inaczej już wątek byłby zamknięty:)
10168

[terra]

index.php ten fagment wygląda ok, dla pewności sprawdź resztę, powinienes mieć mniej więcej taki układ:



<html>
<head>

</head>

<body>
<header>
<div>
.
.
.
</div>
</header>

<div class="site-grid">
<div>
<main>
.
</main>
.
.
</div>
</div>

<footer>
<div>
.
.
.
</div>
</footer>

</body>
</html>


Upewnij się, że wszytkie tagi są poprawnie zamknięte oraz czy wszystkie if są poprawnie zamknięte i znaczniki php <?php ... ?> .

[rkonik]

@james.bien Wrzuć kod na jakiegoś git-a. Rozmawiamy o szablonie na otwartej licencji więc twoje modyfikacje zgodnie z licencją muszą być również otwarte.
W tym momencie wrzucasz fragmenty kodu i zaczyna to być zgadywanką a nie pomocą.

[james.bien]

Sorki, że zamęczam, ale walczę, walczę, walczę.... Zanim ewentualnie wrzuciłbym kod to:

Zainstalowałem sobie nową instalację z szablonem casiopeia bez żadnych danych, na czysto. Dodatkowy kod wpisałem do plików index.php, templateDetails.xml i template.css z palca - bez żadnego kopiuj-wklej. Oglądam kod w Notepad++ - wszystko wygląda tak, jak chyba powinno wyglądać. Zastąpiłem nimi pliki źródłowe.

Wynik - sytuacja bez zmian. Pozycja bottom-c pojawia się gdzieś w ogóle poza układem. W akcie desperacji (tak dla sprawdzenia) w pliku index.php na szybko wrzuciłem fragment kodu dla nowej pozycji top-c. Efekt jest taki, że ta nowa pozycja wchodzi w miejsce bottom-c, a bottom-c przechodzi na prawą stonę, też gdzieś poza układ.

Być może jest tak, jak pisał terra, że to w pliku index.php coś się rozjeżdża (jakaś spacja, wcięcie, znak - ale jak pisałem wygląda OK), ale ja nie potrafię tego znaleźć.

Poza tym, w wyborze pozycji dla modułu dla bottom-c pojawia się "Bottom c", dla pozycji już zdefiniowanych "Dół-a", "Dół-b". Może tak ma być, ale może to jakaś podpowiedź, a może bez znaczenia.
10171

10172

[rkonik]

Bez wglądu w kod będzie to tylko zgadywanka. Udostępnij go.
Przy okazji znam narzędzie jak Notepad++ ale z przed wielu wielu lat. Moja opinia na jego temat nie jest pozytywna. Podkreślę że nie znam obecnej wersji tego narzędzia. Jest wiele innych zdecydowanie lepszych i większych kombajnów IDE, które są w stanie zrobić więcej niż tylko zaznaczenie że na końcu zapomniałeś średnika. Począwszy od chyba bardzo popularnego visual studio, Netbens czy Sublime Text. Może dzięki któremuś z nich będzie Ci łatwiej znaleźć błędy.
Jednak bez udostępnienia kodu będzie Ci ciężko pomóc. Udostępnij kod a zobaczysz że dużo szybciej Ci podpowiedzą inni i pokażą błąd niż zgadując teraz.

[james.bien]

Jakie rozwiązanie lepsze:
- dostęp do zaplecza,
- udostępnienie na Githubie?

[rkonik]

Wrzuć pliki szablonu na GitHub i udostępnij link.
Pamiętaj że pliki szablonu to /templates/... i /media/templates/...

[james.bien]

Wysyłam link do plików - link (https://github.com/jamesbietb/cassiopeia.git)
Będę wdzięczny za wgląd i wskazówki.

[rkonik]

Wszystko poprawnie działa.
Powiedz który plik css zmieniałeś? Ponieważ Cassiopeia wczytuje również pliki .min.css Sprawdź to w narzędziach dla programisty jaki plik jest pobierany.
Zakładam że min.css więc te pliki też powinieneś zmienić. Prawdopodobnie to jest twój błąd.

[terra]

zmień nazwę template.min.css na np. atemplate.min.css i sprawdź działanie, zminimalizuj template.css na nowo

[james.bien]

Bingo, bingo, bingo...

Terra - jesteś WIELKI.
Rkonik, Zwiastun - dzięki za wsparcie.

Szperam dalej... i być może do następnego wątku.

Jeszcze raz DZIĘKI!!!!! O jakiś kolejny procencik wiem więcej.

JB