Style i ich modyfikacja - podstawy

Zaczęty przez Kǝmac, 1 Lipiec 2007, 03:29

0 użytkowników i 1 Gość przegląda ten wątek.

Kǝmac

PODSTAWY
System szablonów (stylów, skinów, templatek) oparty jest o PHP, jednak nie jest wymagana dokładna znajomość tego języka. Jeśli miałeś styczność z jakimkolwiek językiem programowania edycja szablonów nie sprawi problemu.

Trochę banałów na początek (które ciągle wracają w pytaniach):

ZNAKI UCIECZKI
Ponieważ edytowany jest skrypt PHP, a nie strona HTML i kod strony jest "wyrzucany" przez funkcję echo więc dodając lub modyfikując linie należy pamiętać o tzw. znakach ucieczki (escape characters).
Np: echo '<input type="button" value="', $txt['spell_check'], '" onclick="spellCheck(\'postmodify\', \'message\');" tabindex="5"/>';

Więcej na ten temat: http://www.php.net/types.string


EDYTOR
Edytor którego używamy powinien mieć kolorowanie składni - wygląd niektórych linii w templatkach potrafi odstraszyć np. pomieszane pojedyncze i podwójne cudzysłowie:
echo '<img src="', $settings['header_logo_url'], '" style="margin: 4px;" alt="', $context['forum_name'], '" />';
Jednak przy kolorowaniu składni taki kod wygląda (w miarę) czytelnie:
echo '<img src="', $settings['header_logo_url'], '" style="margin: 4px;" alt="', $context['forum_name'], '" />';?>



SPIS PLIKÓW I FUNKCJI STYLÓW
Pliki stylu znajdują się w katalogu /Themes/nazwa_stylu i nazywają się *.template.php. Jeśli brakuje jednego z plików w katalogu stylu, wówczas używany jest odpowiadający mu plik ze stylu default. Dzięki temu modyfikując styl, możemy zmienić i udostępnić tylko kilka plików (lub sam css i index.template.php), w miejsce brakujących plików nowego stylu SMF użyje plików z katalogu default.
Każdy plik (template) w katalogu stylu odpowiada za wygląd przypisanego mu fragmentu strony i jest podzielony na funkcje (sub-templates) które zawierają wyświetlany kod HTML. Np. lista wiadomości wysłanych przez użytkownika widoczna profilu: Profile.template.php, funkcja (sub-template) template_showPosts().

Spis plików zawartych w stylu i przypisanych mu funkcji, podkreślone zostały najważniejsze pliki:

Admin - Panel Administracyjny
Funkcje: admin_above, admin_below, admin, credits, edit_news, edit_agreement, view_versions, edit_censored, maintain
BoardIndex - Indeks działów, "strona główna" forum
Funkcje: main
Calendar - kalendarz
Funkcje: main
Display - wygląd wiadomości (treść, informacja o użytkowniku itp)
Funkcje: main
Errors - informacje o błedach
Funkcje: fatal_error, error_log
Help - pomoc w Administracji
Funkcje: popup, find_members
index - wszystko co otacza zawartość strony (nagłówki, stopka, menu)
Funkcje: init, main_above, main_below, menu
Login - logowane (w tym logowanie administratora)
Funkcje: login, kick_guest, maintenance, admin_login, retry_activate, resend
ManageAttachments - zarządzanie załącznikami
Funkcje: main
ManageBoards - zarządzanie działami
Funkcje: main, modify_category, confirm_category_delete, modify_board
ManageMembers - zarządzanie użytkownikami
Funkcje: main, new_group, edit_group, group_members, email_members, email_members_compose, view_members, ban_list, ban_edit, ban_log, edit_reserved_words, trackUser, trackIP, showPermissions, announce, announcement_send
ManagePermissions - zarządzanie uprawnieniami
Funkcje: main, modify_group
ManageSmileys - zarządzanie uśmieszkami
Funkcje: settings, editsets, modifyset, editsmileys, modifysmiley, addsmiley, setorder
Memberlist - lista użytkowników
Funkcje: main, search
MessageIndex - lista wątków w dziale (podgląd działu)
Funkcje: main
Modlog - log moderacji
Funkcje: main
MoveTopic - szabln przenoszenia wątku
Funkcje: main
Notify - potwierdzenie włączenia/wyłączenia powiadomień o wątkach i wiadomościach
Funkcje: main, notify_board
Packages - zarządzanie pakietami (dodawanie, przeglądanie, instalacja)
Funkcje: main, package_above, package_below, view_package, extract_package, list, examine, view_installed, browse, servers, package_list, downloaded, install_options
PersonalMessage - prywatne wiadomości (wyświetlanie, wysyłanie, itp.)
Funkcje: folder, send, ask_delete, prune
Poll - edycja ankiet
Funkcje: main
Post - wysyłanie i edycja wiadomości
Funkcje: main, postbox, spellcheck
Printpage - strona wydruku watku
Funkcje: print_above, main, print_below
Profile - profil: podgląd, edycja, itp (tu dodajemy np. nowe pola profilu)
Funkcje: profile_above, profile_below, summary, showPosts, statPanel, account, forumProfile, theme, notification, pmprefs, deleteAccount, profile_save
Recent - ostatnie wiadomości, nieprzeczytane wątki i odpowiedzi
Funkcje: main, unread, replies
Register - rejestracja nowego konta
Funkcje: before, after, admin_browse, admin_register
Reminder - przypomnienie hasła
Funkcje: main, sent, set_password, ask
Search - wyszukiwanie i wyniki
Funkcje: main, results
SendTopic - formularz wysyłania informacji o wiadomości (do kogoś)
Funkcje: main, report
Settings - opcje i ustawienia stylów
Funkcje: settings, options
SplitTopics - dzielenie i łączenie wątków
Funkcje: ask, main, select, merge_done, merge, merge_extra_options
Stats - statystyki
Funkcje: main
Themes - zarządzanie stylami
Funkcje: main, pick, installed, edit_style, edit_template, set_settings, set_options
Who - użytkownicy online (kto jest online i co robi)
Funkcje: main
Wireless - templatki dla WAP, WAP2 i iMode
Funkcje: wap_above, wap_boardindex, wap_messageindex, wap_display, wap_error, wap_below, imode_above, imode_boardindex, imode_messageindex, imode_display, imode_post, imode_login, imode_error, imode_below, wap2_above, wap2_boardindex, wap2_messageindex, wap2_display, wap2_login, wap2_post, wap2_error, wap2_below
Xml - xml dla ajax'u
Funkcje: quotefast, post, stats, split i inne


TRYB DEBUG
Przez dodanie ?debug do URL (jako admin) można zobaczyć znaczniki końca sub-templatek na stronie.


$context
Templatka musi zostać wypełniona danymi. Służy do tego tablica $context przekazująca dane do wyświetlenia (np. wiadomości, informacje o użytkownikach którzy je wysłali itp.). Jeśli modyfikujemy wyłącznie wygląd forum, znajomość jej nie będzie potrzebna. Jednak jeśli chcesz wykorzystać lub wyświetlić więcej informacji na stronie niż w domyślnym stylu (np. dymki z podglądem zawartości watku) - będzie bardzo użyteczna. $context zależy od wyświetlanej strony forum, można dokonać jej podglądu np. dodając na końcu stylu:
echo'<pre>';
print_r($context);
echo'</pre>';


Przykładowa tablica $context dla strony głównej forum (kliknij aby rozwinąć):


Dodanie informacji dla niezalogowanych gości może wyglądać np. tak:
   if($context['user']['is_guest'])
   {
   echo '
      <div class="Warn-guest"><b>Witaj Gościu</b> ( <a href="', $scripturl, '?action=login">Zaloguj</a> | <a href="', $scripturl, '?action=register">Rejestruj</a> )</div>';
   }


PLIKI STYLU I MODYFIKACJE
Praktycznie każda modyfikacja zmienia tylko domyślny styl, wszystkie pozostałe style należy zmodyfikować ręcznie (!) lub zmodyfikować modyfikacje :) tak by automatycznie zmieniała pliki pozostałych stylów. Pierwsza metoda wymaga podglądu źródła modyfikacji i znalezienia wszystkich miejsc w których domyślny styl jest zmieniany (wyszukać "/Template/default") i zastosować te zmiany w pozostałych stylach w odpowiadających miejscach. Druga metoda wymaga edycji plików modyfikacji tak, by zamieniała inne style (znaleźć w modyfikacji "/Template/default" i zamienić na "/Template/inny_styl")
Dropbox +0.5 GB dla nowych użytkowników (i dla mnie): http://db.tt/dO6tmv2