Skórki AutoTheme

11 July 2008 Comments

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:

<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr>
<td valign="top" width="150">Tutaj lewe bloki</td>
<td valign="top">Tutaj środek</td>
<td valign="top">Tutaj prawe bloki</td>
</tr></table>

Mamy szkielet więc wstawiamy teraz zamiast tych "pomocniczych" tekstów znaczniki Autotheme, cały theme.html wygląda więc tak:

<html><head><link rel="stylesheet" type="text/css" href="style/style.css"></head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr>
<td valign="top" width="150"><!-- [left-blocks] --></td>
<td valign="top"><!-- [center-blocks] --><!-- [modules] --></td>
<td valign="top"><!-- [right-blocks] --></td>
</tr></table>
<center><!-- [footer-msg] --></center>
</body></html>

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:

<html><head><link rel="stylesheet" type="text/css" href="style/style.css"></head>
<body bgcolor="#DDDDDD">
<center><img src="themes/mtlite/images/logo.gif">
<table border="0" cellspacing="0" cellpadding="0" width="760"><tr>
<td valign="top" width="150"><!-- [left-blocks] --></td>
<td valign="top"><!-- [center-blocks] --><!-- [modules] --></td>
<td valign="top"><!-- [right-blocks] --></td>
</tr></table>
<center><!-- [footer-msg] --></center>
</body></html>

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:

<B><center><!-- [block-title] --></center></b>
		<!-- [block-content] -->

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:

<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr><td width="5"><img src="gfx/frame_top_left.gif"></td>
<td valign="top" background="gfx/frame_top_mid.gif" class="title">

<center>Tytuł</center>

<img src="gfx/separ.gif" width="6" height="3"><br /><b><center>
</center></b></td><td width="5"><img src="gfx/frame_top_right.gif"></td>
</tr><tr><td background="gfx/frame_left.gif"> </td>
<td align="center" valign="middle" background="gfx/cell.gif">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr><td class="block">

TREŚĆ

</td></tr></table></td><td background="gfx/frame_right.gif"> </td>
</tr><tr>
<td height="4"><img src="gfx/frame_foot_left.gif" width="21" height="7"></td>
<td height="4" background="gfx/frame_foot_mid.gif"></td>
<td height="4"><img src="gfx/frame_foot_right.gif" width="21" height="7"></td>
</tr></table>

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:

<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr><td width="5"><img src="themes/mtlite/images/frame_top_left.gif"></td>
<td valign="top" background="themes/mtlite/images/frame_top_mid.gif">

<B><center><!-- [block-title] --></center></b>

<img src="themes/mtlite/images/separ.gif" width="6" height="3"><br /><b><center>
</center></b></td><td width="5"><img src="themes/mtlite/images/frame_top_right.gif"></td>
</tr><tr><td background="themes/mtlite/images/frame_left.gif"> </td>
<td align="center" valign="middle" background="themes/mtlite/images/cell.gif">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr><td>

<!-- [block-content] -->

</td></tr></table></td><td background="themes/mtlite/images/frame_right.gif"> </td>
</tr><tr>
<td height="4"><img src="themes/mtlite/images/frame_foot_left.gif" width="21" height="7"></td>
<td height="4" background="themes/mtlite/images/frame_foot_mid.gif"></td>
<td height="4"><img src="themes/mtlite/images/frame_foot_right.gif" width="21" height="7"></td>
</tr></table><br />

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):

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td width="5"><img src="themes/mtlite/images/frame_top_left.gif"></td>
<td valign="top" background="themes/mtlite/images/frame_top_mid.gif" class="maina">
   <center> <!-- [cat-title] --></center>
</td><td width="5"><img src="themes/mtlite/images/frame_top_right.gif"></td>
</tr><tr><td background="themes/mtlite/images/frame_left.gif"></td>
<td align="center" valign="middle" background="themes/mtlite/images/cell.gif">

 <!-- [article-summary] --><hr><center><!-- [posted-by] --> - <!-- [posted-date-time] --> - <!-- [article-more] --></centeR>

</td><td background="themes/mtlite/images/frame_right.gif"> </td></tr><tr>
<td height="4"><img src="themes/mtlite/images/frame_foot_left.gif" width="21" height="7"></td>
<td height="4" background="themes/mtlite/images/frame_foot_mid.gif"></td>
<td height="4"><img src="themes/mtlite/images/frame_foot_right.gif" width="21" height="7"></td>
</tr></table><br />

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 (
);

Jak już wspominałem, niektóre skórki mają bardziej rozbudowany ten plik. W tym przypadku mamy dodatkowo określony wygląd mi.in. dla modułu statystyk (Stats) czy Download (Downloads). Możemy dodawać kolejne wg. własnego uznania. Pełna deklaracja wyglądu danego modułu składa się z 2 części, na przykładzie modułu statystyk - pierwsza część to:

  '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',
    ),
  ),

Określa ona jaki plik zawiera kod określający dany element skórki (leftblock - lewe bloki, centerblock - środkowe bloki, main - szkielet strony). Nazwy plików html są nam znane. Jeżeli nie korzystamy z obszarów Area to możemy wykasować je z tego kodu... Druga część znajduje się dalej i jest to:

'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',
    ),
  ),

Określa jakie bloki mają się pojawić. Czasami jest i trzecia część (zazwyczaj skórki mają tą 3 część zdefiniowaną dla całości... ale):

  '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' => '',
    ),
  ),

Określa tła tabel itp.

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',
    ),
  ),

Nie chcemy też żadnych bloków, więc część 2 wyglądałaby tak:

'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',
    ),
  ),

Gdzie to wstawiamy, a najlepiej pod już istniejącą taką część (po tych dwóch ), ), nawiasach). Każdą część trzeba umieścić tam gdzie jej miejsce, nie można ich obok siebie dać :)

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:

<?php

$command['[losban]'] = 'srand(time());
    $tekst[]="<img src="themes/mtlite/logo1.gif">";
    $tekst[]="<img src="themes/mtlite/logo2.gif">";
    $los=rand(0,count($tekst)-1);
    echo("$tekst[$los]");';

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"

RkBlog

Postnuke i MD-Pro, 11 July 2008

﻿Skórki AutoTheme

Skórki AutoTheme