Tekst źródłowy strony Beez/Nadpisywanie szablonem

{{SpisPoPrawej}}
==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ą.

[[Grafika:Beez_01_ov.png|500px]]

== 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.<!--

Ponieważ treść jest odseparowana od prezentacji

Treść może być zaprezentowana w różny sposób, z wykorzystaniem różnych układów (ang. ''layouts''). Użytkownicy mogą użyć do przedstawienia treści odpowiadającego im układu. 

Rozmiar czcionek jest skalowalny. 

Jakość projektu można zmienić przez zastosowanie nowoczesnych technik
Szablon może być dostosowany do potrzeb użytkownika. -->

=== 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 -> 

[[Grafika:Beez_02_ov.png|500px]]

joomla1.5 -> components ->

[[Grafika:Beez_03_ov.png|500px]]

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

[[Grafika:Beez_04_ov.png|500px]]

 


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

[[Grafika:Beez_05_ov.png|500px|center]]

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:

[[Grafika:Beez_06_ov.png|500px]]

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

[[Grafika:Beez_07_ov.png|500px]]

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

[[Grafika:Beez_08_ov.png|500px]]

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

[[Grafika:Beez_09_ov.png|500px]]

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

[[Grafika:Beez_10_ov.png|500px]]

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

Z rdzennym modułem&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Z podmienionym modułem


[[Grafika:beez_11_ov.png|500px]]

[[Grafika:beez_12_ov.png|500px]]

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 &lt;div&gt;, &lt;ul&gt;, &lt;li&gt;.

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.

[[Grafika: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 <code>/twój_joomla/templates/beez/html</code>. Jest tam katalog <code>/mod_login</code> 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.

<div id =”login-wrap1”>
<div id =”login-wrap2”>

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

[[Grafika:Beez_krok19.jpg]]

[[Grafika: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]
<pre>
/* 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; }
</pre>
[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:

[[Grafika:Beez_krok17.jpg]]

login_right.gif, jak na ilustracji.

[[Grafika:Beez_krok18.jpg]]

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

[[Grafika: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:

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

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

[[Grafika:beez_ex_03_krok_03.jpg]]

Po wklejeniu tej zawartości.

[[Grafika: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:

[[Grafika:beez_ex_03_krok_05.jpg]]

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

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

[[Grafika: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ę".

[[Grafika:beez_ex_03_krok_07.jpg]]

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

[[Grafika:beez_ex_03_krok_08.jpg]]

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

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

[[Grafika:beez_ex_03_krok_10.jpg]]

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

[[Grafika: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:

[[Grafika:beez_ex_03_krok_12.jpg]]

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

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

[[Grafika: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 [http://dinishi.com/hashani/ghop/Issue_59/Getting_Started_with_Template_Overrides_v2.tar.gz Getting_Started_with_Template_Overrides_v2.tar.gz]


<noinclude>
[[Kategoria:Beez]][[Kategoria:Szablony]]


{{Nawigacja|Poradnik:Szablony 1.5 - Spis treści|
  [[Poradnik:Czcionka i typografia|Czcionka i typografia]]|
  [[Poradnik:Lokalizacja szablonu|Lokalizacja szablonu]]|
}}
</noinclude>