--=REKLAMA=--

JA Purity/Modyfikacja kolorystyki poziomego menu

Z Joomla!WikiPL

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.

  1. 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):
  2. Zmień wszystkie wystąpienia ciągu #1374A5 na #999999 (w wierszach: 57,70,75,82)
  3. Zmień wszystkie wystąpienia ciągu #4394BD na #BBBBBB (w wierszach: 56,76,95,97)
  4. Zmień wszystkie wystąpienia ciągu #005A87 na #555555 (w wierszach: 77,98)
  5. Zmień wszystkie wystąpienia ciągu #2A84B1 na #AAAAAA (w wierszach: 89,103)
  6. 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;
    }
  7. 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;
    }
  8. Dodaj poniższy styl:
    #ja-mainnav ul.menu li > a {
    border-left: 1px solid #BBBBBB;
    }
  9. 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;
    }
  10. 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.
  11. Dostosuj skopiowany plik arrow2.png odpowiednio do swojego wariantu kolorystycznego.
  12. Koniec

Oto przykładowy rezultat...
Ja purity horizontal menu grey.png


Dziękujemy za wkład

» Stefan Wajda [zwiastun],

Źródło „http://wiki.joomla.pl/index.php?title=JA_Purity/Modyfikacja_kolorystyki_poziomego_menu&oldid=21530