Tworzenie szablonu Joomla. Część 6 - stopka strony

W pierwszym artykule poświęconym tworzenie własnego szablonu dla joomla 3 Powiedziałem, że ten proces nie jest zbyt skomplikowany, ale wciąż czasochłonny i zajmuje stosunkowo dużo czasu. Na potwierdzenie tego, jest to szósty artykuł.

Wcześniej omawialiśmy główne punkty tworzenia szablonów dla CMS Joomla 3, uporządkowane według układu , nadrukowany i zaprojektowany nagłówek strony główne menu obszar zawartości i wiele więcej. W ten sposób płynnie dotarliśmy do ostatniej części dowolnego szablonu - stopki (lub jeśli chcesz piwnicy witryny).

Co to jest stopka , do czego służy i jakie informacje zawiera, mówiliśmy w artykule poświęconym edycja standardowego szablonu Aby nie powtarzać, natychmiast zaczniemy nakładać i udekorować stopkę naszego domowego szablonu.

Najpierw zobaczmy, co powinniśmy uzyskać:

Jak widać, nasza stopka jest dwukolorowa, co oznacza, że ​​zostanie podzielona na dwa oddzielne bloki - górny i dolny. W górnym bloku, analogicznie do nagłówka strony, umieszczamy logo i napis, a także tworzymy dwie pozycje dla modułów, aby wyświetlić dodatkową nawigację.

Po psychicznie podzielonym układzie stopki na oddzielne bloki, możesz przejść do układu. Będziemy mieć pierwszy blok dla całej stopki, przypiszemy mu odpowiedni identyfikator:

<div id = "footer"> </ div>

Wewnątrz tego kontenera umieścimy jeszcze dwa, które będą odpowiedzialne za górę i dół czapki, będą miały różne wysokości i kolory:

<div id = "footer"> <div class = "ft-top"> </ div> <div class = "ft-bottom"> </ div> </ div>

Na początek zajmiemy się dnem stopki, najłatwiejszym do wdrożenia. Dodaj kilka bloków i napisz zwykły tekst:

<div class = "ft-bottom"> <div class = "ft-bottom-cont"> <p> Wszystkie prawa zastrzeżone & # 169 <? php echo date ('Y')?> </ p> </ div > </ div>

Jak widać, wewnątrz dolnego bloku stopki znajduje się inny blok o stałej szerokości (w moim przypadku 1140 pikseli). Jeśli przeczytałeś już poprzednie części artykułów „Jak stworzyć własny szablon”, prawdopodobnie już wiesz, do czego służy ten kontener.

Dla etykiety użyto zwykłego tagu <p>. Ikona praw autorskich jest tworzona za pomocą specjalnych symboli - & # 169 . Wreszcie, używając PHP, wypisujemy bieżącą datę (a raczej bieżący rok) do stopki witryny - <? Php echo date ('Y')?> .

Na dole stopki obowiązują następujące style:

.ft-bottom {wysokość: 70px; kolor tła: # 222222;} .ft-bottom-cont p {color: #fff; text-align: center; wysokość: 70px; line-height: 70px;}

Wynik powinien być taki:

Jak widać, nie zawracałem sobie głowy ikonami sieci społecznościowych, jeśli to konieczne, zawsze można je dodać w dowolnym momencie.

Teraz przejdź na górę, można ją podzielić na trzy główne bloki - logo z tekstem, menu na środku i niektóre informacje kontaktowe po prawej stronie stopki. W związku z tym musimy utworzyć trzy zagnieżdżone bloki w bloku z klasą ft-top:

<div class = "ft-top"> <div class = "ft-top-cont"> <div class = "ft-menu-1"> </ div> <div class = "ft-menu-2"> </ div> <div class = "ft-logo"> </ div> </ div> </ div>

Czym są te pojemniki i do czego służą? W menu używamy pierwszych dwóch bloków z klasami ft-menu-1 i ft-menu-2, trzecie logo ft zawiera logo i tekst. Wszystkie te trzy kontenery są zamknięte w bloku z klasą ft-top-cont (kontener o ograniczonej szerokości) i wszystkie z nich znajdują się w kontenerze nadrzędnym z klasą ft-top (z pełną szerokością ekranu).

Chcę zwrócić uwagę na fakt, że blok, który będzie pojemnikiem na logo, znajduje się na samym dole, chociaż w układzie logo jest wyświetlane jako pierwsze. Nie ma pomyłki, wszystko odbywa się tak, że na urządzeniach mobilnych logo jest wyświetlane pod menu na samym dole strony. Na urządzeniach z dużymi ekranami zmieniamy kolejność renderowania bloków przy użyciu pewnych klas Bootstrap.

Zajmiemy się frameworkiem Bootstrap później, a teraz wypełnijmy nasze bloki treścią. W blokach z klasami ft-menu-1 i ft-menu-2 wyświetlimy moduły:

<div class = "ft-menu-1"> <jdoc: include type = "modules" name = "position-4" style = "xhtml" /> </ div> <div class = "ft-menu-2" > <jdoc: include type = "modules" name = "position-5" style = "xhtml" /> </ div>

Blok zaprojektowany dla logo, wypełnij zwykły obraz i tekst:

<div class = "ft-logo"> <img alt = "Joom4all.ru - stwórz swoją stronę od podstaw!" src = "<? php echo $ this-> baseurl. 'templates /'. $ this-> template. '/images/ft-logo-min.png'?>>> <p id =" ft-text "> <span> JOOM4ALL - UTWÓRZ SWOJĄ WITRYNĘ Z ZERO </ span> </ p> </ div>

Teraz stwórzmy kilka modułów (co najmniej 2) i ustawmy dla nich pozycje odpowiednio o nazwach pozycja-4 i pozycja-5. Użyłem zwykłego menu jako modułów, a raczej dwóch menu, które przypisałem do tytułu „Menu do stopki” i „Menu do stopki 2” (to nie jest tak bogata wyobraźnia). W rezultacie otrzymałem stopkę taką jak ta:

Teraz pora porozmawiać o klasach szkieletowych Bootstrap, za pomocą których możemy łatwo ozdobić stopkę i zmienić kolejność wyników bloków w zależności od rozdzielczości ekranu. W ten sposób otrzymujemy piękną i adaptacyjną stopkę dla naszego szablonu (i strony).

Dodajmy do naszych bloków kilka dodatkowych klas predefiniowanych przez Bootstrap:

<div class = "ft-menu-1 col-xs-12 col-sm-3 col-md-3 col-sm-push-6 col-md-push-5 </ div> <div class =" ft- menu-2 col-xs-12 col-sm-3 col-md-4 col-sm-push-6 col-md-push-5 "> </ div> <div class =" ft-logo col-xs- 12 col-sm-6 col-md-5 col-sm-pull-6 col-md-pull-7 "> </ div>

Zajęcia pokazały aż pięć elementów, tych, którzy znają framework Bootstrap na pewno jest jasny, do jakiego celu są potrzebni. Ale napiszę krótko, za co każdy z nich jest odpowiedzialny.

Wyobraź sobie, że cała szerokość określonego obszaru kontenera składa się z 12 równych pionowych części - oto istota systemu bloków Bootstrap. Aby bloki pływały i układały je poziomo, wystarczy wskazać, ile takich części zajmuje każdy blok, a suma części nie powinna przekraczać 12 sztuk, czyli ich całkowitej liczby. W przeciwnym razie ostatni blok się wyprowadzi.

Po zorientowaniu się w teorii przejdźmy teraz bezpośrednio do używanych klas:

• col-xs- * - ta klasa jest używana dla urządzeń o szerokości ekranu mniejszej niż 768 pikseli (telefony). Zamiast gwiazdki wskazywana jest liczba części, które ten blok będzie zajmował. W naszym przypadku wszystkie trzy bloki zajmą 12 części, innymi słowy, zostaną rozciągnięte na całej szerokości strony (to jest dokładnie to, co jest potrzebne dla urządzeń mobilnych).
• col-sm - * - ustawia rozmiar bloku na urządzeniach o szerokości ekranu od 768 do 991 pikseli (tablety). W naszym przypadku bloki z menu zajmą 3 części (łącznie 6), a blok z logo zajmie pozostałe 6 części.
• col-md - * - podobnie jak poprzednie klasy, ale działa z szerokością ekranu od 992 do 1199 pikseli (komputery stacjonarne o niskiej rozdzielczości). Liczba kolumn zajmowanych przez każdy blok, patrz wyżej.
• col - * - push - * i col - * - pull - * - klasy te ustawiają przesunięcie bloków w lewo (pull) i w prawo (push) w stosunku do ich bieżącej pozycji o określoną liczbę części. Konieczne jest również wskazanie, które ekrany zostaną przesunięte.

W naszym przypadku przesuwamy bloki przeznaczone dla menu w prawo o 6 części o szerokości ekranu od 768 do 991 pikseli (col-sm-push-6), a blok z logo ma również 6 części, ale w lewo (col-sm-pull) -6) Dlatego zmieniamy priorytet wyświetlania bloków na ekranie bez wpływu na kod znaczników.

Być może zastanawiałeś się, dlaczego przesunięcie jest dokładnie o 6 bloków po lewej stronie (w przypadku logo) na tabletach i 7 blokach na komputery. Wszystko jest proste, chcemy przenieść nasze logo do skrajnej lewej krawędzi, w tym celu konieczne jest przesunięcie go o różnicę między całkowitą szerokością pojemnika a samym blokiem. W naszym przypadku dla tabletów jest to 12-6 = 6, a dla komputerów 12-5 = 7.

Sytuacja z blokami menu jest nieco inna, ponieważ w tym przypadku przesuwamy się w prawo, musimy wziąć pod uwagę szerokość lewych bloków, a jeśli szerokość lewego bloku na tabletach mamy składa się z 5 części (blok z logo), dlatego pierwszy blok z menu musi zostać przeniesiony do 5 sztuk po prawej stronie. Wyjaśnienie nadziei jest dostępne.

Ogólny kod stopki powinien wyglądać następująco:

<div id = "footer"> <div class = "ft-top"> <div class = "ft-top-cont"> <div class = "ft-menu-1 col-xs-12 col-sm-3 col-md-3 col-sm-push-6 col-md-push-5 "> <jdoc: include type =" moduły "name =" position-4 "style =" xhtml "/> </ div> <div class = "ft-menu-2 col-xs-12 col-sm-3 col-md-4 col-sm-push-6 col-md-push-5"> <jdoc: include type = nazwa "modules" = "position-5" style = "xhtml" /> </ div> <div class = "ft-logo col-xs-12 col-sm-6 col-md-5 col-sm-pull-6 col-md- pull-7 "> <img alt =" Joom4all.ru - stwórz swoją stronę od podstaw! " src = "<? php echo $ this-> baseurl. 'templates /'. $ this-> template. '/images/ft-logo-min.png'?>>> <p id =" ft-text "> <span> JOOM4ALL - TWORZENIE WITRYNY Z ZERO </ span> </ p> </ div> </ div> </ div> <div class = "ft-bottom"> <div class = "ft-bottom-cont "> <p> Wszelkie prawa zastrzeżone & # 169 <? php echo date ('Y')?> </ p> </ div> </ div> </ div>

Pozostaje zastosowanie minimalnych stylów:

.ft-logo, .ft-menu-1, .ft-menu-2 {padding-top: 21px;} .ft-logo img {display: block;} p # ft-text {margin: 15px 0 27px 0; font-weight: 700; font-size: 20px;} .ft-top {overflow: hidden; kolor tła: # f3ece8;} .ft-bottom {wysokość: 70px; kolor tła: # 222222;} .ft-bottom-cont p {color: #fff; text-align: center; wysokość: 70px; line-height: 70px;}

W rezultacie na urządzeniach z dużym ekranem nasza stopka wygląda tak:

Na urządzeniach mobilnych o szerokości ekranu mniejszej niż 768 pikseli stopka wygląda inaczej:

Pozostaje dokonać ostatecznych zmian i zaaranżować całość za pomocą CSS. Jak widać, nie ma nic trudnego, dzięki Bootstrap można łatwo i łatwo rozwiązać prawie każde zadanie w najkrótszym możliwym czasie.