JM-Wedding06 - szablon responsive dla Joomla 2.5

W ostatnim czasie co raz więcej osób korzysta z urządzeń mobilnych do przeglądania internetu. Nic więc dziwnego, że pojawiają się nowe standardy pozwalające zoptymalizować strony internetowe pod kątem wyświetlania się na ekranach smartfonów, tabletów, czy netbooków.
Jednym z takich rozwiązań jest Responsive Design, który umożliwia dostosowanie szerokości strony internetowej do rozdzielczości ekranu na danym urządzeniu mobilnym.

Nasz najnowszy szablon JM-Wedding06 został wykonany w takim właśnie standardzie.
Warto zwrócić również uwagę na pozostałe funkcjonalności.

1) DJ-Menu - horyzontalny moduł menu
Szablon korzysta z najnowszej wersji modułu DJ-Menu, który został ostatnio przystosowany do templatek responsive. W parametrach tego modułu można znaleźć opcję "Display SELECT for small screens" (wyświetl SELECT dla małych ekranów) co oznacza, że dla ekranów z rozdzielczością poniżej 960px menu zostanie wyświetlone jako selectbox. Aczkolwiek szablon JM-Wedding06 posiada bardziej rozbudowane możliwości i style CSS, więc selectbox pojawia się dla rozdzielczości poniżej 650px.

2) Logo - pierwsza litera w kolorze
Użyliśmy tutaj specjalnego skryptu, który umieszcza poszczególne słowa oraz litery w osobnych klasach. Skrypt pochodzi ze strony http://letteringjs.com/, a poniżej możesz zobaczyć jak wygląda struktura kodu dla logo:

Dla wersji różowej umieściliśmy style w pliku css/style1.css, wyglądają one następująco:

h1#jm-logo .word1 .char1,
h1#jm-logo .word3 .char1 {
color: #E24B5F;
}

Gdzie klasa .word1 oznacza pierwszy wyraz, .char1 oznacza pierwszą literę, a .word3 oznacza wyraz trzeci.
Jak widzisz można łatwo zmodyfikować style, aby wyświetlić w kolorze obojętnie jaki wyraz lub literę.

3) Animowane efekty CSS3 dla zdjęć i opisów umieszczonych w module na pozycji "main-top2".
Najedź kursorem myszy, aby ujrzeć efekty:

Podobny efekt zastosowaliśmy w module "Floral Decorations" na stronie startowej.

W artykule dotyczącym typografii można znaleźć informację jak stosować tego typu efekty.

4) Filmy YouTube w okienku modal

Odpowiada za to wbudowana funkcjonalność Joomla, którą wywołuje się poprzez użycie tego kodu:

JHTML::_('behavior.modal');

W naszym szablonie znajduje się on w pliku lib/php/dj_setup.php.
Kod dla filmiku YouTube należy umieścić wewnątrz linku pamiętając o dodaniu klasy class="modal" jako atrybut dla tego linku.

5) Prosty i rozbudowany layout.

Templatka jest adresowana dla nowożeńców, aczkolwiek z doświadczenia wiemy, że webdeveloperzy potrafią dostosować szablony dla zupełnie innych celów. Chcielibyśmy zatem zwrócić uwagę, że templatka posiada dużo dostępnych pozycji modułów, więc można ją znacznie rozbudować. Zobacz na stronę frontową oraz podstronę: