--=REKLAMA=--

Beez/Nadpisywanie szablonem

Z Joomla!WikiPL

Getting Started with Template Overrides

Szablon Joomla!

Szablon można sobie wyobrazić jako stronę internetową prezentującą treści z bazy danych. Sam szablon nie jest kompletną witryną, jest jedynie szkieletem, wzorcem wyglądu strony. Wygląd w systemach zarządzania treścią może być modyfikowany przez zastosowanie szablonu.

Beez Template.

Beez jest jednym ze standardowych szablonów stworzonych dla Joomla!. Szablon ten zapewnia większą dostępność i dużą elastyczność w zarządzaniu treścią.

Beez 01 ov.png

Korzyści z zastosowania w szablonie zamienników

Dostępność

Since the content present in a completely separated file. Then the content can be presented by using various layouts. So the users can use the layout as their thoughts to present the content. So the things like font sizes are scalable. So the quality of the design can change by using modern techniques. So the adjustments can be done according to the user needs.

Elastyczność

Jest elastyczny w zastępowaniu przestarzałych technologii. Na przykład coraz mniej witryn używa tabel do rozmieszczania treści. Układ może być zarządzany tylko przez arkusze stylów. Arkusze stylów odgrywają najważniejszą rolę od kiedy pojawiła się w systemach zarządzania treścią. Użyteczność może być uzyskana przez zastosowanie więcej niż jednego arkusza stylów.


Comfort ability with Jump labels concept Since the linear way of presenting content has more difficulties Beez uses a concept called jump labels. With this technique users enable to jump to the specific areas rather than reaching the content areas in a long way.

Skalowalność

The change of the contents with the different sixes of browser windows is a one of anonymous problem with web pages. So the Beez uses a semi scalable layout with full width size to overcome those problems.

Template overriding with Beez

Beez jest szablonem, w którym zastąpiono kilka rdzennych modułów i komponentów. Podmienione moduły i komponenty są przechowywane w katalogu /html szablonu Beez. Przykładowo jest tam siedem rdzennych komponentów i pięć rdzennych modułów zastąpionych przez Beez.

Przejdź do joomla1.5 -> modules ->

Beez 02 ov.png

joomla1.5 -> components ->

Beez 03 ov.png

joomla1.5 -> templates ->beez->html

Beez 04 ov.png



Przyklad 1: -

Override newsflash module with beez.

Krok 1:

Usuń chwilowo folder /mod_newsfalsh z katalogu /templates/beez/html (możesz też zmienić jego nazwę). Standardowy moduł Migawki nie będzie teraz zastąpiony skryptem dodanym w bezz. Zobacz, jak po tej zmianie moduł Migawki prezentuje się na stronie Joomla! w szablonie Beez.

Beez 05 ov.png

W wyniku usunięcia katalogu /mod_newsfalsh z /templates/beez/html moduł Migawki nie jest zastępowany przez szablon Beez. Ukazuje się tak, jak definiuje to moduł standardowy.

Tak wygląda źródło strony:

Beez 06 ov.png

Tak natomiast wygląda kod dla migawek wyświetlanych w układzie poziomym:

Beez 07 ov.png

Krok 2:

Skopiuj teraz z powrotem usunięty folder mod_newsflash do katalogu katalogu /templates/beez/html (bądź przywróć jego właściwą nazwę). Teraz moduł Migawki będzie prezentowany w sposób zdefiniowany przez beez. Spójrz, jak prezentowane są Migawki na stronie witryny.

Beez 08 ov.png

Tak wygląda źródło strony:

Beez 09 ov.png

Tak natomiast wygląda kod dla migawek wyświetlanych w układzie poziomym:

Beez 10 ov.png

Krótkie podsumowanie: Porównaj różnicę w kodzie modułu Migawek w układzie poziomym

Z rdzennym modułem         Z podmienionym modułem


Beez 11 ov.png

Beez 12 ov.png

So the way Beez overriding technique can understand easily by looking above two steps.

To są dwa różne źródła strony. Rdzenny moduł Migawki (mod_newsflash) stosuje układ tabeli do rozmieszczenia treści (danych). Ale wiele nowoczesnych witryn o wiele rzadziej korzysta z tabel, by rozmieszczać dane. Tak uczyniono w szablonie Beez, w którym przestarzała technologia została zastąpiona nowszą, znaczniki tabeli zostały zastąpione znacznikami <div>, <ul>, <li>.

W efekcie kod źródłowy modułu Migawki w szablonie Beez jest semantycznie znacznie poprawniejszy.

Przykład 2:-

Zastąpienie modułu Logowanie i dodanie zaokrąglonych naroży

Zastosowanie zaokrąglonych naroży da przyjemne wrażenie profesjonalnej witryny. W szablonach Joomla! możemy mieć zaokrąglone naroża dla takich formularzy, jak Logowanie.

Zobaczymy, jak uzyskać efektowne zaokrąglone naroża w module Logowanie w szablonie Beez.

Formularz logowania znajduje się w prawej kolumnie (w prawym rogu). Domyślnie nie jest umieszczony w ramce z zaokrąglonymi narożami.

Beez krok13.jpg

W kilku krokach zamienimy narożniki modułu na zaokrąglone.

Krok 1:

Przejdź na zaplecze. Wybierz z menu pozycję Rozszerzenia -> Moduły [Extensions -> Module Manager].

Krok 2:

Znajdź moduł nazwany Logowanie [Login form] i naciśnij jego nazwę.

Krok 3:

Przejdziesz do edytora własności modułu. Zmienimy teraz jeden z parametrów modułu. Odkryj kartę rozszerzonych parametrów i ustal przyrostek klasy modułu na "_login". Zapisz zmienione własności.

Krok 4:

Przejdź do katalogu /twój_joomla/templates/beez/html. Jest tam katalog /mod_login z dwoma plikami nazwanymi default.php i index.php.

Krok 5:

Otwórz do edycji plik default.php. Wpinacz logowania i formularz logowania używają dwóch elementów div.

Then put the closing tags for
tags at the end of <form> tag.

Beez krok19.jpg

Beez krok11.jpg

Krok 6:

Ponownie wybierz z menu pozycję Rozszerzenia -> Moduły. Kliknij nazwę beez. Następnie naciśnij w przyborniku w prawym rogu przycisk Popraw CSS [Edit CSS]. Wybierz plik „template.css”

Krok 7:

Skopiuj poniższy kod i wklej na końcu pliku, a następnie zapisz zmieniony plik.

[Kod CSS]

/* Formularz Logowanie z zaaokraglonymi narozami */ 

div#left div.moduletable_login { 
  margin-left: 10px; 
  background: url(../images/login_right.gif) top right no-repeat; 
} 

div#left div.moduletable_login h3 { 
  margin: 0; 
  padding: 10px 10px 0 10px; 
  background: url(../images/login_left.gif) top left no-repeat; 
} 

div#left div.moduletable_login div#login-wrap1 { 
  margin: 0; 
  padding: 0 0 0 10px; 
  background: url(../images/login_left.gif) bottom left no-repeat; 
   
} 

div#left div.moduletable_login div#login-wrap2 { 
  margin: 0; 
  padding: 0 10px 10px 0; 
  background: url(../images/login_right.gif) bottom right no-repeat; 
} 

div#left div.moduletable_login form.form-login, div#left div.moduletable_login form.log { 
 margin: 0; 
 padding: 0; 
 background-color: transparent; 
} 

div#left div.moduletable_login form p {  margin: 0; }

[Koniec kodu CSS]

Powyższy kod wymaga zastosowania obrazków umieszczonych poniżej. Obrazki muszą znajdować się w folderze /templates/ beez/images.

login_left.gif wyglądający tak:

Beez krok17.jpg

login_right.gif, jak na ilustracji.

Beez krok18.jpg

Odśwież teraz swoją witrynę Joomla! i zobacz zmieniony formularz logowanie.

Beez krok15.jpg

Przykład 3:

Zmiana rozplanowania artykułu.

Zmienimy sposób prezentacji treści na stronie frontowej (startowej)

Artykuł na stronie frontowej Joomla z szablonem Beez:

Beez ex 03 krok 01.jpg

Chcemy teraz, aby oba szczegóły ‘Ostatnia modyfikacja’ oraz ‘Napisany przez’ wyświetlane były poniżej artykułu. Zobaczymy, jak to zrobić.

Krok 1:

Przejdź do katalogu /twoj_joomla/templates/beez/com_content/frntpage.

Beez ex 03 krok 02.jpg

Krok 2:

Dokonamy modyfikacji w pliku default_item.php.

Chcemy nadal wyświetlać datę utworzenia artykułu na górze, a nazwę autora oraz datę i czas ostatniej modyfikacji poniżej treści artykułu.

W tym celu wypisywanie wartości opcji Autor i Ostatnia modyfikacja trzeba dodać na dole kodu. Aby tak uczynić, skopiuj kod od linii 60 do linii 80 i wklej go od linii 99.

Beez ex 03 krok 03.jpg

Po wklejeniu tej zawartości.

Beez ex 03 krok 04.jpg

Krok 3:

Teraz nie musimy sprawdzać wartości parametru Autor i Ostatnia modyfikacja na początku, natomiast parametr daty musimy sprawdzić na początku.

Zaznacz poniższy fragment:

Beez ex 03 krok 05.jpg

Usuń zaznaczoną powyżej część i wstaw w jej miejsce następującą instrukcję:

<?php if ($this->item->params->get('show_create_date')) : ?>

Beez ex 03 krok 06.jpg

Następnie zaznacz podświetloną część kodu i usuń ją. Usuwamy z górnej części zawartości "Autora" i "Ostatnią zmianę".

Beez ex 03 krok 07.jpg

Teraz kod generujący górną część informacji artykułu będzie wyglądać następująco:

Beez ex 03 krok 08.jpg

Teraz przenieśliśmy teksty "Ostatnia modyfikacja" oraz "Napisany przez" na dół, jak widać.

Beez ex 03 krok 09.jpg

Krok 4:

Teraz chcemy usunąć datę i czas utworzenia z dołu artykułu. Zaznacz kod widoczny poniżej. To kod sprawdzający zmienną ‘show_create_date’. Ponieważ nie jest nam to potrzebne, możemy usunąć tę linię z kodu.

Beez ex 03 krok 10.jpg

Po usunięciu tej części kod będzie wyglądać następująco:

Beez ex 03 krok 11.jpg

Teraz możemy usunąć kod, który wyświetla datę na dole. W tym przypadku usuń jedynie część kodu podświetloną poniżej:

Beez ex 03 krok 12.jpg

Po usunięciu tej części kod będzie wyglądać następująco:

Beez ex 03 krok 13.jpg

Przejdź teraz na stronę frontową witryny i odśwież ją. Strona będzie się prezentować tak, jak chcieliśmy. Data utworzenia będzie wyświetlana na górze artykułu, autor i data modyfikacji na dole.

Beez ex 03 krok 14.jpg

Powyższe przykłady dowiodły, że szablon beez korzysta z nowocześniejszych technik prezentacji modułów i komponentów, zastępując przestarzałe technologie. Jasne jest również, że dzięki temu szablon jest elastyczniejszy i bardziej dostępny.

Zobacz Getting_Started_with_Template_Overrides_v2.tar.gz


Dziękujemy za wkład

» Stefan Wajda [zwiastun],