Powrót do spisu działów > Theme`y > Tworzenie skina dla MD-Pro w oparciu o AutoTheme
  Opublikowano 04-12-2005  Drukuj aktualną stronę
bobek358  E-mail autora  URL autora

Tworzenie skina dla MD-Pro w oparciu o AutoTheme

Ten tutorial przedstawia jak stworzyć skórę (thema) dla MD-Pro, ale nie od strony graficznej tylko od strony kodu html. Ten tutorial może być przydatny przy tworzeniu skórki dla MD-Pro, Post-Nuke, PHP-Nuke i Envolution, czyli do tych wszystkich, które korzystają z systemu AutoTheme.

Na samym początku trzeba zaznaczyć, że do zbudowania thema będzie potrzebna znajomość HTML`a bez tego ani rusz. Jeśli nie umiesz tego języka, to zapraszam do downloadu. Tam znajdziesz gotowe themy, które wystarczy wgrać na serwer.

Ja pokaże przykład jak zrobić theme gdzie w topie (góra strony) będzie logo, obok loga będzie rotator bannerów, pod topem będzie lewy blok menu, następnie centralny blok z modułami, dalej prawy blok menu i na samym dole stopka. Najpierw musimy stworzyć następujące katalogi:
-images - katalog przeznaczony dla grafiki,
-style - katalog przeznaczony dla plików CSS czyli kaskadowych arkuszy stylów.
Następnym etapem będzie zbudowanie głównego szkieletu strony, czyli pliku theme.html. W tym celu otwieramy edytor html i zaczynamy budować szkielet. Oto przykładowy szkielet strony:


Nasz szkielet prezentuje się następująco:

logo rotator bannerów
lewy blok menu centralny blok
miejsce na moduły
prawy blok menu
stopka


Gdy mamy już gotowy szkielet strony, należy zdefiniować bloki menu. W tym celu tworzymy dwa pliki: leftblock.html i rightblock.html (taki sam kod możemy wkleić także do pliku centerblock.html). Do nich możemy wkleić taki oto przykładowy kod:


Gdzie w miejscu [block-title] wyświetli się nazwa bloku, a w [block-content] zawartość tego bloku.

Następny plik jaki musimy stworzyć to: summary.html. Jak już wspominałem w tutorialu pt: Wprowadzenie do AutoTheme, jest on odpowiedzialny za wyświetlanie newsów. Oto przykładowy kod:



Teraz trzeba zdefiniować wygląd artykułów. Robimy to w pliku: article.html, możemy wkleić tam taki przykładowy kod:



Mamy już prawie wszystko gotowe! Teraz wystarczy w katalogu style edytujemy plik style.css dla własnych potrzeb. Ja polecam go wziąĹşć z innego gotowego thema.
Ostatnim krokiem jaki musimy zrobić to plik theme.cfg. W tym pliku ustawiamy kiedy jaki blok ma się wyświetlać itp. Przykładowy kod może wyglądać następująco:



Takie ustawienia w pliku theme.cfg spowodują że bloki lewy, centralny i prawy będą widoczne tylko na stronie głównej, a na pod stronach będzie widoczny tylko lewy blok menu.
Jeśli chcesz wiedzieć więcej o pliku theme.cfg i o jego możliwościach zapraszam do tutorialu: Wprowadzenie do AutoTheme.

I to już wszystko. Mam nadzieję że choć trochę przybliżyłem Wam tworzenie skórek w systemie AutoTheme. Jeśli masz jakieś pytania, kieruj się na forum dyskusyjne, tam na pewno otrzymasz pomoc.