separator

[greggor78]

Witam
Moje pytanie dotyczy sposobu na dodanie separatora pomiędzy artykułami. Znalazłem kilka podobnych wątków, ale dotyczyły starszych wersji Joomli. Żaden z nich nie działa na 3.6. Artykuły bez separatora się zlewają i są nieczytelne.
Z góry dziękuję za pomoc

[zwiastun]

CSS i do dzieła. Artykuły są osadzone w znacznikach, które możesz dowolnie ostylować. Nie ma już czegos takiego, jaki niegdysiejsza klasa separator, bo jest niepotrzebna

[greggor78]

Robieniem stron zajmuję się sporadycznie. Przyznam, że nie bardzo wiem od czego mam zacząć, a w pomocy też nie znalazłem wskazówek. Mógłbym prosić o precyzyjniejszą odpowiedź?
Z góry dziękuję

[zwiastun]

Wybacz, ale co to znaczy "robieniem stron zajmuję się sporadycznie"? Zajmujesz się, czy nie?
Jeśli się zajmujesz, to co konkretnego mam Ci odpowiedzieć? Chyba tylko złośliwe: wstaw sobie kreskę albo odstęp między.
Odszukaj znacznik, od którego zaczyna się wyświetlanie artykułu, albo który zamyka wyświetlanie artykułu i dodaj mu dolną (górną) krawędź, margines pod czy co tam chcesz.
Jakiś link do strony?

[alex51]

Aby oddzielić artykuły np. przerywaną linią szarego koloru, szeroką na cały kontener treści, oddzieloną od ostatniego akapitu odstępem 30px, najprościej jest dodać w pliku stylów szablonu klasę .item-separator. Wszystkie powyższe warunki osiągniesz dodając następującą regułę w pliku template.css


.item-separator {
border-bottom: 1px dotted #cecece;
display: block;
margin: 30px 0;
width: 100%;
}

[greggor78]

Aby oddzielić artykuły np. przerywaną linią szarego koloru, szeroką na cały kontener treści, oddzieloną od ostatniego akapitu odstępem 30px, najprościej jest dodać w pliku stylów szablonu klasę .item-separator. Wszystkie powyższe warunki osiągniesz dodając następującą regułę w pliku template.css


.item-separator {
border-bottom: 1px dotted #cecece;
display: block;
margin: 30px 0;
width: 100%;
}

Dziękuję za precyzyjną odpowiedź. Przyznać jednak muszę, że CSS ma przede mną jeszcze wiele tajemnic, więc zadam jeszcze jedno pytanie.

Czy w jakimś konkretnym miejscu w pliku template.css muszę to wkleić? Pytam bo próbowałem już, ale jak na razie nie przyniosło to żadnego efektu.
Z góry dziękuję za pomoc

[alex51]

Zapomniałem sprecyzować, że do prawidłowego działania wskazanej klasy .item-separator konieczne jest umieszczenie diva określającą wspomnianą klasę w plikach widoków, a więc konieczne będzie ich nadpisanie szablonem. Szczegóły przeprowadzenia tego zabiegu dodam za chwilkę.
Już wyjaśniam.
1. Trzeba sprawdzić, czy zastosowany szablon posiada już własne pliki default dla treści. Można je zlokalizować w katalogu html szablonu: html/com_content/category/blog_item (to dla nadpisanego widoku w przeglądzie kategorii) oraz w html/com_content/featured/default_item (to dla nadpisanego widoku na stronie frontowej). Jeśli we wspomnianej lokalizacji znajdują się taki pliki to można zmienić ich nazwy np. dodając na ich początku frazę old, sugerującą starszą wersję pliku.
2. Następnie trzeba wstawić do wskazanych powyżej lokalizacji oryginalne pliki znajdujących się w folderze components. I tak do folderu będącego w szablonie html/com_content/category/ wstawiamy skopiowany plik components/com_content/views/category/tmpl/blog_item.php. Podobną operację przeprowadzamy, kopiując do folderu będącego w szablonie html/com_content/featured/ wstawiamy skopiowany plik components/com_content/views/featured/tmpl/default_item.php. W zasadzie można poszerzyć te operacje kopiując wszystkie pliki z widokami komponentu do folderu html.
3. Wklejone pliki blog_item.php i default_item.php trzeba edytować, wstawiając w ich zawartości diva określającego klasę .item-separator. Najlepiej zrobić to w przedostatnich wierszach, wstawiając tam kod:

<div class="item-separator"></div>
Po tej edycji dwa ostatnie wiersze w obu wskazanych plikach będą następujące:

<div class="item-separator"></div>
<?php echo $this->item->event->afterDisplayContent; ?>
4. Następnym zadaniem będzie dodanie kodu css dla klasy .item-separator.
W pliku css (najczęściej będzie to plik template.css), najlepiej na jego końcu należy wstawić kod zaopatrzony w stosowny komentarz:

/*linia oddzielająca artykuły*/
.item-separator {
border-bottom: 1px dotted #cecece;
display: block;
margin: 30px 0;
width: 100%;
}
Jeśli stosujesz nieszczęsny szablon od DD, to powyższy kod wstaw w pliku template.min.css