Cassiopeia: bottom-c

**rkonik** · 19-10-2023, 11:12

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

Kod:

@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

Kod:

display: grid;

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

Kod:

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ć:

Kod:

.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** · 19-10-2023, 13:06

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** · 19-10-2023, 14:45

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** · 19-10-2023, 15:38

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

**rkonik** · 20-10-2023, 12:34

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** · 20-10-2023, 12:50

Wysłane przez rkonik

Moim zdaniem jest.....

Mówiłem o prezentacji kodu przez Autora

**james.bien** · 21-10-2023, 17:07

Wysłane przez terra

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

).

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

index.php2.jpg

**terra** · 21-10-2023, 20:00

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

Kod:

<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** · 22-10-2023, 12:00

@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** · 24-10-2023, 00:35

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.
Załącznik 10171

Załącznik 10172

Temat: Cassiopeia: bottom-c

Przybornik

Widok

Podobne tematy

Szablon cassiopeia

[FAQ] Cassiopeia child

Zmiana koloru tła "bottom"

obrazek w bottom

Podkreślenie "border-bottom" w menu

Reguły pisania