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, style.css oraz arrow2.png znajdują się w poniższych katalogach:
templates/ja_purity
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:
templates/my_japurity
images/
arrow2.png
styles/
header/XXXXXX ( XXXXXX należy zastąpić kolorem motywu - green albo blue )
style.css
Zanim wypróbujesz omówione tu modyfikacje, wykonaj zadania omówione w samouczku Modyfikacja kolorystyki poziomego menu w ja purity.
- W ulubionym edytorze graficznym, za pomocą narzędzia gradient, stwórz nowy obraz dostosowany do swojego wariantu kolorystycznego. Wystarczy, że obrazek będzie mieć 1 piksel szerokości i 40px wysokości. Zapisz plik obrazu w katalogu styles/header/XXXXXX/images, gdzie XXXX to blue albo green albo Twój własny wariant kolorystyczny.
- Skopiuj plik arrow2.png do katalogu styles/header/XXXXX/images.
- Dostosuj skopiowany plik arrow2.png odpowiednio do swojego wariantu kolorystycznego.
- 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łąd 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):
- Popraw następująco plik style.css:
- /*--------------------------- VISUAL ----------------------------*/
- /* -------- All levels -------- */
- #ja-mainnavwrap {
- border-top: 1px solid #CCCC99 !important;
- border-right: 1px solid #BFB050 !important;
- border-bottom: 1px solid #BFB050 !important;
- border-left: 1px solid #FFFF93 !important;
- background: transparent url(images/menubg_m.png) repeat-x !important;
- background-color: inherit;
- }
- #ja-mainnav ul, #ja-mainnav ul li {
- background: transparent url(images/menubg_m.png) repeat-x !important;
- list-style: none;
- }
- #ja-mainnav span.separator {
- display:none;
- }
- #ja-mainnav span{
- color: #000000;
- }
- #ja-mainnav > ul {
- padding-left: 20px;
- }
- /* Handles initial top-level active items */
- #ja-mainnav ul.menu li.active a {
- background: transparent url(images/arrow2.png) no-repeat bottom center !important;
- color: #FFFFFF;
- }
- #ja-mainnav ul.menu li.active a span{
- 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: transparent 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: transparent;
- 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: transparent 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 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: transparent url(images/arrow2.png) no-repeat bottom center;
- }
-
- Finish
Oto przykładowy rezultat...
