Oryginalny szablon JA Purity został wydany przez JoomlArt.com jako archiwum w formacie ZIP oraz został umieszczony w pakiecie instalacyjnym Joomla!. Odnoszące się do poziomego menu pliki szablonu, które poddamy modyfikacji, ja_templatetools.php, style.css oraz arrow2.png znajdują się w poniższych katalogach:
templates/ja_purity
ja_templatetools.php
images/
arrow2.png
styles/
header/XXXXXX ( XXXXXX należy zastąpić kolorem motywu - green albo blue )
style.css
Jeśli korzystasz z samouczka, możesz pobrać specjalną wersję ćwiczebną wersję szablonu i zainstalować ją w następującym katalogu:
ja_templatetools.php
images/
arrow2.png
styles/
header/XXXXXX ( XXXXXX należy zastąpić kolorem motywu - green albo blue )
style.css
Zwykle można edytować pliki CSS w obszarze zaplecza Joomla!, ale w tym przypadku nie byłoby to dobre rozwiązanie. Lepiej skorzystać z zewnętrznego edytora, na przykład Vi albo Notepad.
- Zmodyfikuj plik style.css, aby dopasować nową kolorystykę. Przykładowo, korzystając z kopii pliku style.css dla koloru blue, zmodyfikuj wszystkie wystąpienia koloru dla wariantu grey (szary):
- Zmień wszystkie wystąpienia ciągu #1374A5 na #999999 (w wierszach: 57,70,75,82)
- Zmień wszystkie wystąpienia ciągu #4394BD na #BBBBBB (w wierszach: 56,76,95,97)
- Zmień wszystkie wystąpienia ciągu #005A87 na #555555 (w wierszach: 77,98)
- Zmień wszystkie wystąpienia ciągu #2A84B1 na #AAAAAA (w wierszach: 89,103)
- Popraw własności stylu #ja-mainnavwrap na następujące:
- #ja-mainnavwrap {
- border-top: 1px solid #BBBBBB;
- border-right: 1px solid #CCCCCC; <--- DODAJ TO
- border-left: 1px solid #BBBBBB; <--- DODAJ TO
- border-bottom: 1px solid #555555;
- background: #999999;
- }
-
- Popraw własności stylu #ja-mainnav > ul na następujące:
- #ja-mainnav > ul {
- background-color: #999999;
- border-left: 1px solid #BBBBBB; <--- <--- DODAJ TO
- padding-left: 20px;
- }
-
- Dodaj poniższy styl:
- #ja-mainnav ul.menu li > a {
- border-left: 1px solid #BBBBBB;
- }
-
- Dodaj poniższe style:
- /* Handles initial top-level active items */
- #ja-mainnav ul.menu li.active a {
- background: #CCCCCC url(images/arrow2.png) no-repeat bottom center;
- border-left: 1px solid #BBBBBB;
- color: #FFFFFF;
- }
- #ja-mainnav ul.menu li.active a span{
- color: #FFFFFF;
- }
- #ja-mainnav ul.menu li.active a:hover,
- #ja-mainnav ul.menu li.active a:active,
- #ja-mainnav ul.menu li.active a:focus {
- background: #DDDDDD url(images/arrow2.png) no-repeat bottom center;
- color: #FFFFFF;
- }
- /* Handles top-level hover/active/focus items */
- #ja-mainnav ul.menu li a:hover,
- #ja-mainnav ul.menu li a:active,
- #ja-mainnav ul.menu li a:focus{
- background: #DDDDDD url(images/arrow2.png) no-repeat bottom center;
- }
- #ja-mainnav ul.menu li a:hover span,
- #ja-mainnav ul.menu li a:active span,
- #ja-mainnav ul.menu li a:focus span{
- background: #DDDDDD;
- color: #FFFFFF;
- }
- #ja-mainnav ul.menu li:hover,
- #ja-mainnav ul.menu li.sfhover,
- #ja-mainnav ul.menu li.parentsfhover,
- #ja-mainnav ul.menu li.parent-activesfhover {
- background: #DDDDDD url(images/arrow2.png) no-repeat bottom center;
- }
- #ja-mainnav ul.menu li.parent ul > li,
- #ja-mainnav ul.menu li.parent ul li > a,
- #ja-mainnav ul.menu li.parent ul li a > span {
- background: transparent;
- }
- #ja-mainnav ul.menu li.parent > a {
- border-left: 1px solid #BBBBBB;
- }
- #ja-mainnav ul.menu li.parent ul > li:hover,
- #ja-mainnav ul.menu li.parent ul > li.sfhover,
- #ja-mainnav ul.menu li.parent ul > li.parentsfhover,
- #ja-mainnav ul.menu li.parent ul > li.parent-activesfhover {
- background: #DDDDDD url(images/arrow2.png) no-repeat bottom center;
- color: #FFFFFF;
- }
-
- Skopiuj plik arrow2.png z głównego katalogu obrazków do katalogu obrazków powiązanych z wariantem graficznym, na przykład styles/XXXX/images, gdzie XXXX to blue albo green albo Twój własny wariant kolorystyczny.
- Dostosuj skopiowany plik arrow2.png odpowiednio do swojego wariantu kolorystycznego.
- Koniec
Oto przykładowy rezultat...
