Przygotować bazową skórkę
- Bierzemy sobie jakąś istniejącą skórkę Autotheme (ja skorzystałem z 107tech ale nie ma to większego znaczenia). Kopiujemy cały katalogi i zmieniamy nazwę. Ja zmieniłem na "mtlite".- Teraz poprawiamy wszystkie ścieżki dostępu do obrazków w naszej skórce. Za pomocą wordpada bądź podobnego programu otwieramy theme.html, left/rightblock.html itd i "zamień wszystko" zamieniamy starą nazwę na nową (ja zamieniam wszystkie 107tech na mtlite)
- Teraz w cmsie wybierz tą skórkę (niech cms z niej korzysta)
Szkielet strony
Szablon "Mtechnik lite" ma prosty układ - 2 kolumny boczne bloków i w środku newsy. Otwieramy plik theme.html skórki i teraz możemy albo:- skopiować kod html szablonu wywalając kod przykładowych bloków i newsów lub
- samemu napisać kod prostej tabeli w HTML
Niezależnie od drogi jaką weźmiemy w tym przypadku wyjdzie nam kod samej tabeli więc najlepiej samemu go napisać (tylko w przypadku jakiś niestandardowych szablonów opłaca się kopiować kod). Oto kod tabeli: Mamy szkielet więc wstawiamy teraz zamiast tych "pomocniczych" tekstów znaczniki Autotheme, cały theme.html wygląda więc tak: Poniżej tabelki dodałem jeszcze stopkę. Zapisujemy i odświeżamy cms'a z naszą skórką. Teraz powinien pojawić się nam układ skórki taki jaki właśnie stworzyliśmy. Bloki będą wyglądać tak samo, lecz układ już mamy. Jak można zauważyć w skórce nie ma loga więc trzeba go dodać, kopiujemy plik logo do katalogu images skórki. Przed tabelą dodajemy go za pomocą img src="theme/mtlite/images/logo/gif". Po dodaniu zauważymy że logo ma długość 760 px (w moim przykładzie) a tabelę mamy ustawioną na 100%. By to ładnie wyglądało ustawiamy tabelę na 760 oraz możemy ustawić jakieś tło strony. Jako że mam szablon w szarych tonach to ustawię podobne tło (robimy to w tagu body). Czyli nasz kod będzie wyglądał tak: Zakończyliśmy edycję pliku theme.html Teraz zajmiemy się wyglądem prawych i lewych bloków. Otwórz plik leftblock.html, najprostszy kod definiujący wygląd bloku wyglądałby tak: Jest to po prostu pogrubiony i wyśrodkowany tytuł bloku oraz pod nim treść. Jeżeli chcemy mieć każdy blok w ładnej komórce, to musimy odpowiednio rozbudować kod. W szablonie mamy kod takiej komórki i wygląda on tak: Wrzucamy znaczniki Autotheme oraz poprawiamy ścieżki dostępu do obrazków i gotowe. Zapisujemy plik, jeżeli chcemy by prawe bloki wyglądały tak samo zapisujemy ten plik również jako rightblock.html. Kod końcowy: Teraz otwieramy plik summary.html odpowiedzialny za wygląd newsów. Jeżeli nie mamy innego kodu na komórki to kopiujemy ten z bloków, a jeżeli mamy to bierzemy go. Wstawiamy odpowiednie tagi by otrzymać, w moim przypadku ten sam kod (zwróć uwagę na zmianę długości tabeli): Co do article.html to kopiujemy powyższy kod i wstawiamy do tego pliku, wstawiając odpowiednie tagi AutoTheme. Skórka zrobiona! Prawie. Teraz wystarczy jednynie dopasować kolor czcionek, a zrobimy to w plikach css. Edytuj ten plik css, który aktualnie jest używany (zależy to od twojej przeglądarki) a następnie po zakończeniu edycji skopiuj go zastępując pozostałe :) Ostatnim szczegółem do zmiany może być złe tło tabel (np. lista artykułów/newsów w panelu admina). Edytujesz to w theme.cfg (patrz "Wstęp do Autotheme"), w tym samym pliku i w tym samym artykule opisałem zagadnienie włączania i wyłączania wyświetlania poszczególnych bloków.
Opcje zaawansowane
Teraz zajmiemy się bardziej zaawansowanymi opcjami skórki na Autotheme. Zaczniemy od pliku theme.cfg. Oto kod tego pliku jednej z bardziej rozbudowanych skórek (najlepiej będzie jak go skopiujesz do notatnika/wordpada, będzie czytelniejszy):
$template = array (
'default' =>
array (
'main' => 'theme.html',
'summary' => 'summary.html',
'summary1' => 'summary1.html',
'summary2' => 'summary2.html',
'article' => 'article.html',
'altsummary' => '0',
'leftblock' => 'leftblock.html',
'centerblock' => 'centerblock.html',
'rightblock' => 'rightblock.html',
'table1' => '',
'table2' => '',
'Area1block' => 'area1block.html',
'Area2block' => 'area2block.html',
'Area3block' => 'area3block.html',
'Area4block' => 'area4block.html',
'Area5block' => 'area5block.html',
'Area6block' => 'area6block.html',
'Area7block' => 'area7block.html',
'Area8block' => 'area8block.html',
'Area9block' => 'area9block.html',
),
'*HomePage' =>
array (
'default' =>
array (
'main' => 'theme.html',
'summary' => 'summary.html',
'summary1' => 'summary1.html',
'summary2' => 'summary2.html',
'article' => 'article.html',
'altsummary' => '1',
'leftblock' => 'leftblock.html',
'centerblock' => 'centerblock.html',
'rightblock' => 'rightblock.html',
'table1' => '',
'table2' => '',
'Area1block' => 'area1block.html',
'Area2block' => 'area2block.html',
'Area3block' => 'area3block.html',
'Area4block' => 'area4block.html',
'Area5block' => 'area5block.html',
'Area6block' => 'area6block.html',
'Area7block' => 'area7block.html',
'Area8block' => 'area8block.html',
'Area9block' => 'area9block.html',
),
),
'*AdminPages' =>
array (
'default' =>
array (
'main' => 'admin2.html',
'leftblock' => 'leftblock.html',
'centerblock' => 'centerblock.html',
'rightblock' => 'rightblock.html',
'table1' => '',
'table2' => '',
'Area1block' => 'area1block.html',
'Area2block' => 'area2block.html',
'Area3block' => 'area3block.html',
'Area4block' => 'area4block.html',
'Area5block' => 'area5block.html',
'Area6block' => 'area6block.html',
'Area7block' => 'area7block.html',
'Area8block' => 'area8block.html',
'Area9block' => 'area9block.html',
),
),
'' =>
array (
'default' =>
array (
'main' => 'sontoloyo.html',
'leftblock' => 'leftblock.html',
'centerblock' => 'centerblock.html',
'rightblock' => 'rightblock.html',
'table1' => '',
'table2' => '',
'Area1block' => 'area1block.html',
'Area2block' => 'area2block.html',
'Area3block' => 'area3block.html',
'Area4block' => 'area4block.html',
'Area5block' => 'area5block.html',
'Area6block' => 'area6block.html',
'Area7block' => 'area7block.html',
'Area8block' => 'area8block.html',
'Area9block' => 'area9block.html',
),
),
'Stats' =>
array (
'default' =>
array (
'main' => 'theme.html',
'leftblock' => 'leftblock.html',
'centerblock' => 'centerblock.html',
'rightblock' => 'rightblock.html',
'table1' => '',
'table2' => '',
'Area1block' => 'area1block.html',
'Area2block' => 'area2block.html',
'Area3block' => 'area3block.html',
'Area4block' => 'area4block.html',
'Area5block' => 'area5block.html',
'Area6block' => 'area6block.html',
'Area7block' => 'area7block.html',
'Area8block' => 'area8block.html',
'Area9block' => 'area9block.html',
),
),
'Downloads' =>
array (
'default' =>
array (
'main' => 'sontoloyo.html',
'leftblock' => 'leftblock.html',
'centerblock' => 'centerblock.html',
'rightblock' => 'rightblock.html',
'table1' => '',
'table2' => '',
'Area1block' => 'area1block.html',
'Area2block' => 'area2block.html',
'Area3block' => 'area3block.html',
'Area4block' => 'area4block.html',
'Area5block' => 'area5block.html',
'Area6block' => 'area6block.html',
'Area7block' => 'area7block.html',
'Area8block' => 'area8block.html',
'Area9block' => 'area9block.html',
),
),
'PNphpBB2' =>
array (
'default' =>
array (
'main' => 'sontoloyo.html',
'leftblock' => 'leftblock.html',
'centerblock' => 'centerblock.html',
'rightblock' => 'rightblock.html',
'table1' => '',
'table2' => '',
'Area1block' => 'area1block.html',
'Area2block' => 'area2block.html',
'Area3block' => 'area3block.html',
'Area4block' => 'area4block.html',
'Area5block' => 'area5block.html',
'Area6block' => 'area6block.html',
'Area7block' => 'area7block.html',
'Area8block' => 'area8block.html',
'Area9block' => 'area9block.html',
),
),
);
$blockdisplay = array (
'default' =>
array (
'left' => '1',
'center' => '0',
'right' => '0',
'Area1' => '1',
'Area2' => '1',
'Area3' => '1',
'Area4' => '0',
'Area5' => '0',
'Area6' => '0',
'Area7' => '0',
'Area8' => '0',
'Area9' => '0',
),
'*NewsPage' =>
array (
'left' => '1',
'center' => '0',
'right' => '1',
'Area1' => '0',
'Area2' => '0',
'Area3' => '0',
'Area4' => '0',
'Area5' => '0',
'Area6' => '0',
'Area7' => '0',
'Area8' => '0',
'Area9' => '0',
),
'*HomePage' =>
array (
'default' =>
array (
'left' => '1',
'center' => '1',
'right' => '1',
'Area1' => '1',
'Area2' => '1',
'Area3' => '1',
'Area4' => '1',
'Area5' => '1',
'Area6' => '1',
'Area7' => '1',
'Area8' => '1',
'Area9' => '1',
),
),
'*AdminPages' =>
array (
'default' =>
array (
'left' => '1',
'center' => '0',
'right' => '0',
'Area1' => '0',
'Area2' => '0',
'Area3' => '0',
'Area4' => '1',
'Area5' => '1',
'Area6' => '1',
'Area7' => '0',
'Area8' => '0',
'Area9' => '0',
),
),
'*ModulePage' =>
array (
'default' =>
array (
'left' => '1',
'center' => '0',
'right' => '0',
'Area1' => '1',
'Area2' => '1',
'Area3' => '1',
'Area4' => '1',
'Area5' => '1',
'Area6' => '1',
'Area7' => '1',
'Area8' => '1',
'Area9' => '1',
),
),
'Stats' =>
array (
'default' =>
array (
'left' => '1',
'center' => '0',
'right' => '0',
'Area1' => '0',
'Area2' => '0',
'Area3' => '0',
'Area4' => '1',
'Area5' => '1',
'Area6' => '1',
'Area7' => '1',
'Area8' => '1',
'Area9' => '1',
),
),
'Downloads' =>
array (
'default' =>
array (
'left' => '1',
'center' => '0',
'right' => '0',
'Area1' => '1',
'Area2' => '1',
'Area3' => '1',
'Area4' => '0',
'Area5' => '0',
'Area6' => '0',
'Area7' => '1',
'Area8' => '1',
'Area9' => '1',
),
),
'PNphpBB2' =>
array (
'default' =>
array (
'left' => '1',
'center' => '0',
'right' => '0',
'Area1' => '0',
'Area2' => '0',
'Area3' => '0',
'Area4' => '0',
'Area5' => '0',
'Area6' => '0',
'Area7' => '1',
'Area8' => '1',
'Area9' => '1',
),
),
);
$style = array (
'default' =>
array (
'stylesheet' => '',
'logoimg' => '',
'color1' => '#6B8E23',
'color2' => '#669966',
'color3' => '#6B8E23',
'color4' => '#669966',
'color5' => '#333333',
'color6' => '#333333',
'color7' => '#006400',
'color8' => '#8FBC8F',
'color9' => '#006400',
'color10' => '#8FBC8F',
'striphead' => '1',
'head' => '',
),
'*HomePage' =>
array (
'default' =>
array (
'stylesheet' => '',
'logoimg' => '',
'color1' => '#D4E1AE',
'color2' => '#99CC00',
'color3' => '#D4E1AE',
'color4' => '#FFFFFF',
'color5' => '#000000',
'color6' => '#660066',
'color7' => '#FFFFFF',
'color8' => '#D4E1AE',
'color9' => '#FFFFFF',
'color10' => '#D4E1AE',
'striphead' => '1',
'head' => '',
),
),
'*AdminPages' =>
array (
'default' =>
array (
'stylesheet' => '',
'logoimg' => '',
'color1' => '',
'color2' => '',
'color3' => '',
'color4' => '',
'color5' => '#000000',
'color6' => '#660066',
'color7' => '',
'color8' => '',
'color9' => '',
'color10' => '',
'striphead' => '1',
'head' => '',
),
),
'*ModulePage' =>
array (
'default' =>
array (
'stylesheet' => '',
'logoimg' => '',
'color1' => '#6B8E23',
'color2' => '#669966',
'color3' => '#6B8E23',
'color4' => '#669966',
'color5' => '#333333',
'color6' => '#333333',
'color7' => '#006400',
'color8' => '#8FBC8F',
'color9' => '#006400',
'color10' => '#8FBC8F',
'striphead' => '1',
'head' => '',
),
),
'Stats' =>
array (
'default' =>
array (
'stylesheet' => '',
'logoimg' => '',
'color1' => '#6B8E23',
'color2' => '#669966',
'color3' => '#6B8E23',
'color4' => '#669966',
'color5' => '#333333',
'color6' => '#333333',
'color7' => '#006400',
'color8' => '#8FBC8F',
'color9' => '#006400',
'color10' => '#8FBC8F',
'striphead' => '1',
'head' => '',
),
),
'Downloads' =>
array (
'default' =>
array (
'stylesheet' => '',
'logoimg' => '',
'color1' => '#6B8E23',
'color2' => '#669966',
'color3' => '#6B8E23',
'color4' => '#669966',
'color5' => '#333333',
'color6' => '#333333',
'color7' => '#006400',
'color8' => '#8FBC8F',
'color9' => '#006400',
'color10' => '#8FBC8F',
'striphead' => '1',
'head' => '',
),
),
'PNphpBB2' =>
array (
'default' =>
array (
'stylesheet' => '',
'logoimg' => '',
'color1' => '#6B8E23',
'color2' => '#669966',
'color3' => '#6B8E23',
'color4' => '#669966',
'color5' => '#333333',
'color6' => '#333333',
'color7' => '#006400',
'color8' => '#8FBC8F',
'color9' => '#006400',
'color10' => '#8FBC8F',
'striphead' => '1',
'head' => '',
),
),
);
$blocktemplate = array (
'Main Menu' => 'mainmenu.html',
'Poll' => 'poll.html',
'Related links' => 'relatedlinks.html',
'Related Links' => 'relatedlinks.html',
'Survey' => 'poll.html',
'Modules' => 'mainmenu.html',
);
$themeversion = array (
);
'Stats' =>
array (
'default' =>
array (
'main' => 'theme.html',
'leftblock' => 'leftblock.html',
'centerblock' => 'centerblock.html',
'rightblock' => 'rightblock.html',
'table1' => '',
'table2' => '',
'Area1block' => 'area1block.html',
'Area2block' => 'area2block.html',
'Area3block' => 'area3block.html',
'Area4block' => 'area4block.html',
'Area5block' => 'area5block.html',
'Area6block' => 'area6block.html',
'Area7block' => 'area7block.html',
'Area8block' => 'area8block.html',
'Area9block' => 'area9block.html',
),
),
'Stats' =>
array (
'default' =>
array (
'left' => '1',
'center' => '0',
'right' => '0',
'Area1' => '0',
'Area2' => '0',
'Area3' => '0',
'Area4' => '1',
'Area5' => '1',
'Area6' => '1',
'Area7' => '1',
'Area8' => '1',
'Area9' => '1',
),
),
'Stats' =>
array (
'default' =>
array (
'stylesheet' => '',
'logoimg' => '',
'color1' => '#6B8E23',
'color2' => '#669966',
'color3' => '#6B8E23',
'color4' => '#669966',
'color5' => '#333333',
'color6' => '#333333',
'color7' => '#006400',
'color8' => '#8FBC8F',
'color9' => '#006400',
'color10' => '#8FBC8F',
'striphead' => '1',
'head' => '',
),
),Załóżmy że chcemy zmienić trochę wygląd skórki gdy ktoś wejdzie np do modułu XForum (tj na forum XForum). Załóżmy że chcemy mieć inny szkielet, np. bez loga i innych grafik. Tworzymy sobie taki plik i zapisujemy go jako, np theme2.html. Części wyglądałyby odpowiednio:
'XForum' =>
array (
'default' =>
array (
'main' => 'theme2.html',
'leftblock' => 'leftblock.html',
'centerblock' => 'centerblock.html',
'rightblock' => 'rightblock.html',
'table1' => '',
'table2' => '',
'Area1block' => 'area1block.html',
'Area2block' => 'area2block.html',
'Area3block' => 'area3block.html',
'Area4block' => 'area4block.html',
'Area5block' => 'area5block.html',
'Area6block' => 'area6block.html',
'Area7block' => 'area7block.html',
'Area8block' => 'area8block.html',
'Area9block' => 'area9block.html',
),
),
'XForum' =>
array (
'default' =>
array (
'left' => '0',
'center' => '0',
'right' => '0',
'Area1' => '0',
'Area2' => '0',
'Area3' => '0',
'Area4' => '0',
'Area5' => '0',
'Area6' => '0',
'Area7' => '0',
'Area8' => '0',
'Area9' => '0',
),
),Pytanie: Czy jeżeli prawe i lewe komórki korzystają z tego samego kodu to mogę wywalić np. rightblock.html i zmienić 'rightblock' => 'rightblock.html', na 'rightblock' => 'leftblock.html', ?
ODP:: Tak, możesz :)
Teraz zajmiemy się plikiem includes/commands.php. Otwórz go a zobaczysz coś ciekawego. Będzie tam dużo linijek kodu typu:
$command['[theme-path]'] = 'echo $themepath;';
W pliku tym zawarte są definicje wszystkich znaczników Autotheme takich jak np. !-- [center-blocks] --. Nie będziemy zajmowali się żadną edycją lecz dodawaniem własnych komend :) Pliki skórki, np theme.html nie obsługują PHP, tak więc musi on zostać wpisany do commands.php i wrzucony poprzez znacznik do skórki. "linijka" kodu definiującego nowy znacznik ma taką budowę:
$command['[naszanazwa]'] = 'nasz kod';
Co da znacznik !-- [naszanazwa] -- (+ nawiasy). Co można dodawać? Można wrzucić jakiś mały skrypcik losujący teksty czy coś albo inny bajer :) np. skrypt losujący, który będzie wrzucał losowe logo:
I w skórce zamiast img src z obrazkiem loga wstawiamy !-- [losban] --. Pamiętaj że użyte w znacznikach HTML cudzysłowy muszą być poprzedzone slashem "o tak"
- Dodane: 11.07.2008 przez riklaunim