--=REKLAMA=--

Stosowanie przyrostków klas w Joomla! 1.5

Z Joomla!WikiPL

Mergefrom.png
Zasugerowano, aby z tym artykułem zintegrować artykuł: Stosowanie przyrostków klas CSS. (dyskusja)

Samouczek objaśnia, jak stosować przyrostki klas CSS strony, modułu i menu w Joomla 1.5 do dostrojenia wyglądu witryny. W samouczku posłużono się przykładami z Joomla 1.5.9

Tło

Kiedy Joomla! generuje strony, opisuje zastosowane w ich kodzie znaczniki HTML atrybutami klas CSS. Nazwy tych klas są zaprojektowane przez programistów Joomla!. Ale Joomla! umożliwia ich modyfikację za pomocą parametru nazwanego przyrostek klas' - zależnie od elementu, do którego się odnosi - strony, modułu lub menu. W efekcie stylizacja wyglądu stron jest łatwa, nie wymaga wielkiego nakładu pracy. Najlepszą drogą do zrozumienia, o co chodzi, są przykłady.

Kiedy stosować przyrostki klas CSS?

Powiedzmy, że na twojej witrynie jest kilka przeglądów sekcji, każdy dla artykułów z innej sekcji. Jeśli zadowala cię jednakowy wygląd wszystkich stron, o przyrostek klas CSS strony nie jest ci potrzebny. Ale jeśli chcesz uzyskać inny wygląd każdej z tych sekcji, przyrostek klas CSS będzie przydatny. Na przykład jeśli chcesz zastosować w każdej sekcji inny kolor tła albo grafiki.

Albo powiedzmy, że chcesz, by nagłówki - śródtytuły na stronie startowej witryny różniły się od nagłówków na innych stronach.

W obu przypadkach, jeśli zmodyfikujesz standardowe style w twoim pliku "template.css", to efektem będą zmiany na wszystkich stronach używających tych klas. Przykładowo, jeśli zmienisz własności klasy "componentheading", efektem będzie inny wygląd nagłówka na wszystkich stronach, na których tą klasę zastosowano.

Jeśli jednak ustawisz unikalne przyrostki klas CSS strony w parametrach pozycji menu, to dla każdej pozycji możesz zdefiniować inne formatowanie nagłówka.

Przyrostek klasy strony

Przed rozpoczęciem upewnij się, że twoja testowa strona Joomla! jest dostępna. Upewnij się także, że jako domyślny włączony jest standardowy szablon "rhuk_milkyway" (w Rozszerzenia → Szablony).

Jak to działa bez przyrostka klas CSS strony

Zanim dodamy przyrostek klas strony, zobaczmy, jak strona działa bez przyrostka. Na stronie frontowej wybierz z modułu Koncepcja odnośnik Przykłady stron, a następnie z modułu Przykłady stron odnośnik Sekcja - Przegląd. Teraz z menu przeglądarki wybierz podgląd dokumentu źródłowego. Np. w Firefox naciśnij klawisze Ctrl+U, w Internet Explorer zaznacz Widok → Źródło, w Safari podobnie - Widok → Pokaż źródło. Potem skorzystaj z polecenia Znajdź, i wyszukaj pierwsze wystąpienie słowa "componentheading". Powinno to wyglądać tak:
<div class="componentheading">

Przewiń plik w dół i znajdź następujące znaczniki:

<table class="blog" cellpadding="0" cellspacing="0"> 
<table class="contentpaneopen">
<td class="contentheading" width="100%">
<table class="contentpaneopen">
Ikona informacja.png
 Informacja

 Poniższy zrzut ekranu został stworzony w Firefox, w którym zainstalowano bezpłatny dodatek Firebug. Firebug pozwala rozpoznać szybko związki między elementami HTML w źródle strony a tekstem i grafikami wyświetlanymi na stronie. To niezwykle użyteczne podręczne narzędzie znajdziesz tutaj. Zobacz także film - samouczek, pokazujący, jak wykorzystać Firebug w administowaniu Joomla!.


Zdjęcie poniżej pokazuje klasę "componentheading". Jest to obszar tytułu strony ponad artykułem z przeglądem.

15 componentheading class firebug.png

To zdjęcie pokazuje całą klasę "blog". Formatuje ona tabelę obejmującą wszystkie artykuły w przeglądzie.

15 blog class firebug.png

Następne zdjęcie pokazuje klasę "contentpaneopen", stosowaną do nagłówka artykułu. Klasa ta obejmuje tytuł artykułu oraz przyciski Utwórz PDF, Drukuj i Poleć znajomemu.

15 contentpaneopen class title firebug.png

To zdjęcie pokazuje klasę "contentpaneopen" stosowaną do "ciała artykułu" - głównej treści. Klasa obejmuje także nazwę autora oraz datę utworzenia artykułu (dokładniej - umieszczenia tekstu w witrynie).

15 contentpaneopen class article firebug.png

Te przykłady powinny pomóc w zrozumieniu, jak Joomla! oznacza elementy na stronie typu przegląd - artykuły w sekcji. Joomla! umieszcza te klasy w kodzie HTML, a szablon zawiera arkusz CSS, w którym umieszczone są reguły formatowania różnych elementów i klas.

Przyrostek klasy strony (bez spacji)

Skoro już wiemy, jak to działa bez przyrostka klas CSS strony, spróbujemy z przyrostkiem. W menu zaplecza wybierz Menu → Przykłady stron → Sekcja - przegląd. Znajdziesz się na stronie edytora własności pozycji menu Pozycja menu [Zmień]. Po prawej stronie naciśnij odnośnik do karty Parametry : systemu. Następnie w polu Przyrostek klas CSS strony wpisz wartość "_myBlogClass" i naciśnij przycisk Zapisz

Teraz wróć na stronę główną i przejdź na stronę Koncepcja → Przykłady stron → Sekcja - przegląd. Zauważ, że straciliśmy stylizowanie strony i tytułów w artykułach. Przyjrzyjmy się bliżej, dlaczego.

Otwórz źródło strony i korzystając z polecenia Znajdź odszukaj pierwsze wystąpienie napisu "_myBlogClass". Znajdziesz go jako atrybut klasy w znaczniku div. Powinien wyglądać tak:

<div class="componentheading_myBlogClass">

Jeśli przejrzysz źródło, zobaczysz też kolejne klasy: blog_myBlogClass, contentpaneopen_myBlogClass oraz contentheading_myBlogClass.

Dodając w parametrach pozycji menu przyrostek klas CSS strony, zmieniliśmy nazwy wszystkich tych klas. W efekcie reguły stylizowania odnoszące się do podstawowych klas Joomla!, takich jak componentheading, blog itd.) nie zostały zastosowane, ponieważ takich klas nie ma na stronie.

Możesz teraz naprawić ten problem, dodając w pliku arkusza stylów twojego szablonu reguły dla nowych klas (np. dla "componentheading_myBlogClass"). Jest jednak łatwiejsza droga - zastosowanie odstępu (spacji) zamiast łącznika w przyrostku dodanym w parametrach pozycji menu!

Przyrostek klas CSS strony (z poprzedzającą go spacją)

Ponownie przejdź na zaplecze na stronę Menu → Przykłady stron → Sekcja - przegląd. Zmienimy wartość przyrostka klasy CSS strony - usuniemy dolny łącznik, a w jego miejsce dodamy odstęp, a więc [spacja] + "myBlogClass", jak poniżej:

15 page class suffix space.png

Teraz wróć na witrynę i odśwież stronę Sekcja - przegląd artykułów. Zwróć uwagę, że mimo dodanego przyrostka, odzyskaliśmy poprzednie stylizowanie strony. Zajrzyjmy do źródła HTML, aby zobaczyć, dlaczego. Otwórz podgląd źródła i znajdź pierwsze wystąpienie napisu "myBlogClass". Powinno to wyglądać tak:

<div class="componentheading myBlogClass">

Ponieważ poprzedziliśmy przyrostek klas CSS strony spacją, to oryginalna nazwa klasy componentheading nie uległa zmianie, natomiast dodaliśmy w atrybucie class dodatkową nową klasę. Wszystkie współczesne przeglądarki obsługują takie rozwiązanie! W efekcie nie zniszczyliśmy aktualnego stylizowania strony. (Jedna uwaga: musimy się upewnić, że użyliśmy nazwy różnej od innych klas, aby nie otrzymać nieoczekiwanych efektów.

Ikona informacja.png
 Informacja

 W Joomla! 1.0.x nie można zastosować takiego rozwiązania! Spacja przed nazwą przyrostka zostanie automatycznie usunięta!


Dodanie reguł CSS stylizujących nową klasę

Dodaliśmy do HTML nową klasę, by uzyskać dodatkową możliwość stylizacji strony. Aby zastosować tę klasę do zmiany wyglądu, musimy ustalić reguły, według jakich klasa ta ma formatować oznaczone nią elementy strony. Najpierw znajdźmy odpowiedni plik CSS - w naszym przypadku jest to joomla/templates/rhuk_milkyway/css/template.css

Załóżmy, że chcemy dodać kolor tła dla tego przeglądu sekcji. (Pamiętasz, aby zmienić wystrój wszystkich przeglądów, zmienilibyśmy reguły standardowych klas takich jak "componentheading" czy "blog"). Musimy zdecydować, który obszar ("componentheading", "blog", czy "contentpaneopen") chcemy stylizować. Załóżmy, że chcemy zmienić wystrój obszaru "componentheading".

Najpierw skorzystamy z selektora "div.myBlogClass" i dodamy następujący kod do swojego pliku CSS:

/* Wlasne style */
div.myBlogClass {
	background-color: #FFE4E1; /* mistyrose */	
}

W efekcie nagłówek strony będzie teraz mieć kolorowe tło, jak widać poniżej.

15 div styling example.png

Taki ścisły selektor potomka powoduje, że styl odnosi się tylko do elementu div, a nie wpływa na elementy tabeli, które nie mają znacznika div. Zwykle jednak lepiej jest, aby własny selektor wybierał do stylizacji tylko te elementy, które zawierają obie klasy - bazową i nową. Przykładowo, zastąpmy powyższy kod następującym:

/* Custom Styling */
.blog.myBlogClass {
	background-color: #FAFAD2; /* lightgoldenrod */	
}

Taki selektor powoduje, że nowy styl będzie się odnosić jedynie do elementów, które mają przypisaną zarówno klasę "blog", jak i klasę ".blog.myBlogClass". Efektem jest - w naszym przypadku - kolor tła na całym obszarze "blog", jak pokazano poniżej:

15 blog styling example.png

Najistotniejszą właściwością nowo tworzonej klasy (stosowanie przyrostka poprzedzonego spacją) jest to, że nie musimy powielać reguł stylizowania stosowanych w klasach bazowych. Możemy skupić się jedynie na stylizacji nowej klasy - jeśli chcemy.

W omawianym przykładzie skupiliśmy się na układzie strony typu Przegląd artykułów w sekcji (krócej: Sekcja - przegląd). Nazwy klas w różnych komponentach mogą być inne, ale procedura jest taka sama. W tabeli poniżej przedstawiamy kilka układów w Joomla! i nazwy stosowanych w nich klas, które mogą być uzupełniane o przyrostek klas CSS strony.

Układ Nazwy stosowanych klas CSS
Arykuł componentheading, contentpaneopen, contentheading, contentpagetitle
Kategoria - przegląd, Sekcja - przegląd, Strona startowa - przegląd componentheading, contentpagetitle, blog, contentpaneopen, contentheading, readon, blog_more
Kategoria - lista artykułów, Sekcja - lista kategorii componentheading, contentpane, contentdescription
Kontakty w kategorii componentheading, contentpane, contentdescription, sectiontablefooter, sectiontableheader, category
Kontakt componentheading, contentpaneopen, contentheading

Podsumujmy zatem, czego nauczyliśmy się o stosowaniu parametru Przyrostek klas CSS strony:

  1. Stosujemy poprzedzającą spację, by stworzyć nową klasę CSS. Ten sposób nie niszczy formatowania ustalanego przez standardowe klasy Joomla!
  2. Przeglądamy źródłowy kod HTML, by znaleźć klasy podstawowe i nowe
  3. Jeśli masz ochotę, korzystaj z Firebuga, by zobaczyć, jakie elementy HTML odpowiadają obszarom widocznym na stronie
  4. Dodajemy własne style na końcu pliku "template.css", wyszczególniając obie nazwy, zarówno podstawową jak i własną w formie .klasabazowa.wlasnaklasa jak w przykładzie powyżej.

Przyrostek klas CSS modułu

Przyrostek klas CSS modułu działa w taki sam sposób, jak przyrostek klas CSS strony. Zobaczmy to na przykładzie modułu Nowości, używanego do prezentacji najnowszych wiadomości.

Z menu zaplecza administracyjnego wybierz opcję Rozszerzenia → Moduły i znajdź moduł Nowości', a następnie kliknij jego nazwę, aby otworzyć edytor własności modułu. Dodaj parametr Przyrostek klas CSS modułu, umieszczając w polu tekstowym [ spację ]+ "customLatestClass", jak pokazano poniżej

15 module class suffix space.png

Następnie przejdź na stronę główną i podejrzyj kod źródłowy. Poniższe zdjęcie wykonano w przeglądarce Firefox z zainstalowanym rozszerzeniem Firebug. Pokazuje ono zarówno fragment strony, kod HTML i style dostrajanego modułu "Nowości".

15 latest news custom class.png

W górnej części ekranu, podświetlonej niebieskim tłem znajduje się element div obejmujacy moduł. Poniżej w części okna z lewej strony widzimy kod HTML, jak następuje:

<div class="moduletable customLatestClass">

oraz

<ul class="latestnews customLatestClass">

Klasy "moduletable" i "latestnews" są standardowymi klasami Joomla! dodawanymi automatycznie. Nowa klasa, "customLatestClass" została umieszczona dodatkowo, ponieważ skonfigurowaliśmy parametr Przyrostek klas CSS modułu, dodając nazwę poprzedzoną jednym odstępem.

Wykorzystamy teraz tę nową klasę, by dodać jakieś stylizowanie. Przejdź na koniec pliku templates/rhuk_milkyway/css/template.css i dodaj poniższy kod:

div.customLatestClass {
	background-color: #FFFFD2;
}
 
div.customLatestClass h3, ul.customLatestClass, ul.customLatestClass a {
	color: #8B4513;
}

Następnie zapisz plik i odśwież stronę. Powinna wyglądać jak na poniższym zdjęciu:

15 latest news styled.png

Selektor CSS div.customLatestClass ustawia kolor tła dla całego obszaru. Trzy kolejne selektory div.customLatestClass h3, ul.customLatestClass, ul.customLatestClass a nadają ustalony kolor odpowiednio nagłówkowi "h3", punktorom (znacznik "ul") oraz odnośnikom (znacznik "a"). Zwróć uwagę, że gdybyśmy chcieli stylizować jedynie listę (element "ul"), przyrostek klas CSS modułu nie byłby nam potrzebny, wystarczyłoby w arkuszu stylów zmodyfikować reguły dla standardowej klasy "latestnews".

Przyrostek klas CSS menu oraz Znacznik ID menu

Wszystkie rdzenne moduły umożliwiają – jak przedstawialiśmy powyżej – umieszczanie przyrostka klasy CSS modułu. Moduły menu mają dwa dodatkowe parametry: Znacznik ID menu oraz Przyrostek klasy CSS menu. Zobaczmy, jak to działa. W menu zaplecza przejdź na stronę Rozszerzenia -> Moduły i otwórz do edycji Menu witryny. Kliknij zakładkę Parametry : Rozszerzone (Advanced Parameters). Zwróć uwagę, że przyrostek klasy CSS modułu ustawiony jest na "_menu", bez poprzedzającej spacji.

Teraz przejdź na stronę startową witryny i obejrzyj kod źródłowy (albo użyj Firebuga). Poniższe zdjęcie ekranu przedstawia HTML głównego menu witryny.

15 main menu div.png

Zwróć uwagę, na nazwę atrybutu klasy: module_menu. Zauważ ponadto, że style klasy "module_menu" zdefiniowane zostały w plikach "template.css" oraz "blue.css" . Na przykład określony w niej jest niebieski obrazek tła, który daje efekt niebieskiej otoczki dookoła menu.

Możemy potwierdzić, że tak jest, usuwając w ustawieniach modułu menu witryny parametr przyrostek klasy CSS modułu. Wróć potem na stronę startową i odśwież. Teraz główne menu witryny będzie widoczne bez stylizacji określonej w klasie module_menu, jak widać poniżej:

15 main menu no suffix.png

This shows an important point. Existing modules, especially menus, may already have CSS styling that depends on Module Class Suffixes. So we need to be careful when making changes.

Co zrobić, jeśli chcemy dodać jakieś specjalne formatowanie tylko głównego menu witryny? Jedną z dróg jest dodanie drugiego przyrostka klasy CSS modułu do istniejącego przyrostka, jak można zobaczyć poniżej. Aby sprawdzić to rozwiązanie, wróć do menedżera modułu i w polu Przyrostek klasy CSS modułu dodaj spację, a następnie kolejny przyrostek myNewClass, jak widać poniżej:

15 module class suffix tricky.png

Teraz dodaj następujący kod na końcu pliku templates/rhuk_milkyway/css /template.css:

div.myNewClass {
	font-size: 1.2em;
	}

Przejdź na stronę startową i odśwież ją, by przekonać się, że czcionka w głównym menu witryny jest teraz większa, jak widać poniżej.

15 main menu custom style.png

Jeżeli otworzymy Firebug, zobaczymy, że HTML i CSS wyglądają, jak poniżej:

15 firebug custom menu class.png

Umieszczając spację między "_menu" i "myNewClass", dodaliśmy do HTML nową klasę. Następnie, za pomocą selektora nowej klasy w pliku CSS zmieniliśmy rozmiar czcionki.

Teraz przyjrzyjmy się parametrowi Znacznik ID menu. Przejdź na zaplecze, otwórz moduł Menu witryny do edycji i w polu Znacznik ID menu wpisz "myTagID".

Dodaj następujący kod na końcu pliku templates/rhuk_milkyway/css /template.css:

#myTagID {
	list-style-type: square;
}

Odśwież stronę startową witryny, by zobaczyć zmianę. Kółeczka punktorów w głównym menu powinny być zastąpione kwadracikami, jak pokazano poniżej:

15 main menu square bullets.png

Na koniec możemy zobaczyć HTML i CSS za pomocą Firebuga:

15 menu tag id code.png

Joomla! dodał atrybut id="myTagID" do znacznika "ul" z głównym menu. To pozwoliło nam, zmienić styl dla tego identyfikatora. Zwróć uwagę, że dla selektora identyfikatora używamy znaku hasz (krzyżyka), a nie kropki #myTagID.

Konkluzja

Parametry Przyrostek klas CSS i Znacznik ID menu wzbogacają możliwości stylizowania wyglądu witryny. Używając spacji między nazwami przyrostków, możemy oznaczyć element nową klasą. To jest zwykle preferowana metoda, pod warunkiem, że nazwa nowej klasy nie koliduje z już istniejącą, co spowodowałoby zniszczenie stylizacji.

Zobacz także

Using the Page Class Suffix in Template Code

© Ten materiał jest dokładnym albo swobodnym tłumaczeniem artykułu http://docs.joomla.org/Tutorial:Using_Class_Suffixes_in_Joomla!_1.5 udostępnionego na licencji JEDL na witrynie: Joomla! Official Documentation Wiki

Dziękujemy za wkład

» Stefan Wajda [zwiastun],