Edytowanie kodu szablonów

Kod szablonów zawarty jest zwykle w dwóch plikach: index.php oraz template_css.css. Pliki te można modyfikować w panelu administratora.

Aby edytować główny plik szablonu index.php, wywołaj w menu administratora okno menedżera szablonów, zaznacz w wykazie przy nazwie szablonu, który chcesz edytować pole wyboru, a następnie kliknij przycisk Edytuj HTML.

Plik zostanie otwarty w prostym edytorze.

Aby edytować arkusz stylów template_css.css, wywołaj w menu administratora okno menedżera szablonów, zaznacz w wykazie przy nazwie szablonu, który chcesz edytować pole wyboru, a następnie kliknij przycisk Edytuj CSS.

Modyfikowanie oryginalnych plików może przynieść niekiedy nieoczekiwane efekty. Warto więc przed dokonaniem jakichkolwiek zmian, sporządzić kopię zapasową obu plików.

Korzystanie z obu możliwości jest poręczne w przypadku, gdy chcemy dokonać drobnych zmian. Aby dokonać większych modyfikacji, trzeba skorzystać z dobrego edytora tekstowego czy edytora stron internetowych.

Wymiana elementów graficznych

Najprostszą drogą modyfikacji szablonu dołączonego do pakietu źródłowego jest podmiana elementów graficznych. Zobaczmy, jak nadać specyficzny wygląd templatce rhuk_solarflare_ii. Wystarczy w niej zmodyfikować dwa obrazki: header_short.jpg, wyświetlany w nagłówku strony oraz menu_bg.png, wykorzystywany jako tło w bocznym menu.

Potrzebujesz jakiegokolwiek programu do edycji grafiki - może to być zarówno upowszechniany bezpłatnie na warunkach GNU/GPL, ale bardzo dobryGIMP 2.2.x , jak i kosztowny, przeznaczony dla profesjonalistów Photoshop.

Modyfikacja obrazka menu_bg

Dokonamy jedynie zmiany koloru, dostosowując go do kolorystyki obrazka, jaki zostanie użyty w nagłówku. W programie Photoshop wczytujemy najpierw kopię oryginalnego obrazka, a następnie wybieramy w menu opcję Image ⇒Adjust ⇒ Color Balance:

Następnie, korzystając z suwaków dobieramy odpowiednie barwy:

W wyniku tego prostego zabiegu otrzmamy np. taki efekt.

Zapisujemy plik, uruchamiając z menu Plik [File] opcję Save for Web, a w oknie dialogowym ustawiamy: format .PNG, opcję [Adaptive] i 256 kolorów. Klikamu przycisk OK.

Obrazek w nagłówku

Potrzebujesz materiału graficznego - fotografii czy obrazu, a najlepiej wielu do wyboru. Przejrzyj swoje zbiory. Zapewne znajdziesz w nich niejedno zdjęcie, która mogłoby być wizytówką Twojej witryny. Jeśli nie znajdziesz takiego - wykonanie serii zdjęć, spośród których wybierzesz później to jedno, najciekawsze, nie stanowi dziś żadnego problemu.

Gdy już przygotujesz, co potrzebne, wykonaj następujące czynności:

1. Uruchom program graficzny, którym dysponujesz.
2. Zeskanuj wybraną fotografię lub wczytaj z aparatu cyfrowego, jeśli akurat posłużył Ci do jej wykonania,
   
   
   
   
3. Ustaw parametry funkcji Przytnij [Crop] w Twoim programie graficznym następująco: szerokość [Width] - 635 pikseli, wysokość [Height] - 150 pikseli, rozdzielczość [Resolution] - 72 pikseli/cal.
   
   
   
   
4. Narzędziem Przytnij [Crop] wyznacz na zdjęciu obszar, który posłuży Ci za winietę. Bądź niestandardowy! Zaznacz taki obszar, w którym będzie i coś symbolicznego, i coś intrygującego. To nie jest trudne. Możesz przecież przeprowadzić wiele prób.
   
   
   
   
5. Narzędziem do wprowadzania tekstu wpisz, ustalając odpowiedni rozmiar i krój czcionki, krótką nazwę Twojej witryny. Może to być np. nazwa firmy.
6. Potem skorzystaj z narzędzia definiowania efektów warstw [Layers] - zastosuj jeden z efektów do warstwy napisu. Na przykład uruchom Blending Options, by nadać napisowi pewien poziom przezroczystości, Drop Shadow czy też Bevel and Emboss, by uzyskać delikatny efekt dwuwymiarowości. Nie bój się eksperymentować - to szansa na uzyskanie satysfakcjonującego rezultatu.
7. Umieść napis w jednym z typowych miejsc - np. w lewym górnym czy w prawym dolnym rogu.
   
   
   
   
8. Wybierz z menu Plik [File] opcję Save for Web, a w oknie dialogowym ustaw: format .JPG, jakość [Quality] - 30 lub 60 (High).
9. Kliknij przycisk OK Nadaj obrazkowi nazwę header_short.
   
   
   
   
   Wskazówka:

   Nazwa pliku może być, oczywiście inna - tutaj zastosowaliśmy tę samą mazwę, jakiej użył autor szablonu rhuk_solarflare_ii. Dzięki temu nie ma potrzeby dokonywania jakichkolwiek zmian w skryptach.
10. Korzystając z FTP, prześlij plik z obrazkiem do katalogu /templates/twoj_szablon/images/ .
11. Wywołaj w przeglądarce swoją witrynę - zobaczysz efekt.

Nawet jeśli Cię jeszcze nie satysfakcjonuje w pełni, możesz przystąpić do kolejnych zadań. Przygotowanie witryny trochę przecież potrwa. W tym czasie Twoje myśli będą krążyć wokół koncepcji graficznej witryny, zwłaszcza winiety. Wrócisz do opracowania tej wymarzonej później.

Uwagi, źródła

Jeżeli masz sugestie odnośnie treści lub chcesz zgłosić poprawki do tego rozdziału, skomentuj go albo umieść wiadomość na forum: Dokumentacja - Propozycje, zmiany, poprawki

Dziękujemy!

Stefan Wajda, Zespół Dokumentacji PCJ