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 obszaru header pliki szablonu ja_templatetools.php, style.css, vdot2.gif, opaque.png, icon-search.gif, user-increase.png, user-decrease.png, user-reset.png oraz header-mask.png znajdują się w poniższych katalogach:

    templates/ja_purity
                 ja_templatetools.php
                 images/
		     user-increase.png
		     user-decrease.png
		     user-reset.png
                 styles/
                     header/XXXXXX ( XXXXXX należy zastąpić kolorem motywu - green albo blue ) 
                                style.css
                                images/
                                    vdot2.gif
                                    opaque.png
                                    icon-search.gif
                                    header-mask.png

Jeśli korzystasz z samouczka, możesz pobrać specjalną wersję ćwiczebną wersję szablonu i zainstalować ją w następującym katalogu:

    templates/my_japurity
                 ja_templatetools.php
                 images/
		     user-increase.png
		     user-decrease.png
		     user-reset.png
                 styles/
                     header/XXXXXX ( XXXXXX należy zastąpić kolorem motywu - green albo blue ) 
                                style.css
                                images/
                                    vdot2.gif
                                    opaque.png
                                    icon-search.gif
                                    header-mask.png

1. Aby dodać nowy wariant kolorystyczny stwórz najpierw w katalogu styles/header folder nazwany tak, jak nowy wariant kolorystyczny - np. white albo grey czy po polsku szary
2. Skopiuj do tego nowego katalogu zawartość jednego z już istniejących folderów z plikami wariantu kolorystycnego, np. z /blue
3. Skopiuj trzy pliki user-XXXX.png z katalogu templates/ja_purity/images przykładowo do katalogu templates/ja_purity/styles/grey/images dla nowego wariantu kolorystycznego grey. Oczywiście, jeśli korzystasz z wersji szablonu ćwiczebnego, głównym katalogiem będzie my_japurity.
4. 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):
5. Zmień wszystkie wystąpienia ciągu #006699 na #CCCCCC (w wierszach: 2,37,115 )
6. Zmień wszystkie wystąpienia ciągu #C3DFED na #444444 (w wierszach: 3,11,15,28,38,50,83,90,107,116)
7. Zmień wszystkie wystąpienia ciągu #1E7CAB na #BBBBBB (w wierszach: 19,29)
8. Dodaj w pliku style.css następujące deklaracje stylizujące znacznik h3 w obszarze Spotlight

   #ja-botsl h3 {

   color: #000000;

   }

9. Dostosuj plik header-mask.png do nowego wariantu kolorystycznego w ulubionym edytorze graficznym. Użyj narzędzia gradient, aby zapewnić przezroczystość tła.
10. Zmodyfikuj inne grafiki - vdot2.gif, user-XXXXX.png oraz icon-search.gif, aby dopasować je do nowego wariantu kolorystycznego.
11. Na koniec potrzebna będzie edycja pliku ja_templatetools.php, aby zmodyfikować metodę genToolsMenu, by kod wyglądał następująco:

    function genToolMenu($_array_tools=null, $imgext = 'gif'){

    $themedir = $this->templateurl();

    if(!is_array($_array_tools)) $_array_tools = array($_array_tools);

    if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);

    if ($this->getParam('theme_header') && $this->getParam('theme_header')!='-1') $themedir = $this->templateurl()."/styles/header/".$this->getParam('theme_header');

    if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools

     ?>

    <ul class="ja-usertools-font">

    <li><img style="cursor: pointer;" title="<?php echo JText::_('INCREASE FONT SIZE');?>" src="<?php echo $themedir;?>/images/user-increase.<?php echo $imgext;?>"

    alt="<?php echo JText::_('INCREASE FONT SIZE');?>" id="ja-tool-increase" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li>

    <li><img style="cursor: pointer;" title="<?php echo JText::_('DEFAULT FONT SIZE');?>" src="<?php echo $themedir;?>/images/user-reset.<?php echo $imgext;?>"

    alt="<?php echo JText::_('DEFAULT FONT SIZE');?>" id="ja-tool-reset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>',

    <?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li>

    <li><img style="cursor: pointer;" title="<?php echo JText::_('DECREASE FONT SIZE');?>" src="<?php echo $themedir;?>/images/user-decrease.<?php echo $imgext;?>"

    alt="<?php echo JText::_('DECREASE FONT SIZE');?>" id="ja-tool-decrease" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li>

    </ul>

    <script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>

    <?php

    }

    }

12. Teraz przejdź na zaplece administracyjne swojej witryny i na stronie menedżera szablonu ustaw nowy kolor nagłówka.
13. Efekt powinien być podobny do poniższego...

Pamiętaj o odświeżeniu strony, wyczyszczeniu pamięci podręcznej przeglądarki, etc., aby zmiany były widoczne.

 Informacja

 Jeśli zechcesz włączyć górne poziome menu, konieczne będzie również dopasowanie jego kolorystyki.

• © Ten materiał jest dokładnym albo swobodnym tłumaczeniem artykułu http://docs.joomla.org/Add_or_change_JA_Purity_header_colour_scheme udostępnionego na licencji JEDL na witrynie: Joomla! Official Documentation Wiki