Cél: Ezen leírás célja, hogy bemutasuk, milyen részekböl áll az egy e107 theme. Ennek segítségével bárki egy működőképes theme-t tudjon készíteni. THEME áttekintése: A theme-k alapvetően egy theme.php és style.css file-kkel vannak szabályozva - ezek és egy images mappa szükséges egy alap theme-hez. Minden más template (sablon) pl.: fórum, linkek ...stb. megtalálható a az e107_themes/templates mappában vagy az adott plugin templates mappájában (ez természetesen plugin függő). Így, ha megváltoztatod a kinézetet, ezek a részek változatlanok maradnak. Ha ezeket a plugin tempale file-ket bemásolod a saját theme mappába, akkor ott megváltoztathatod őket az eredeti file-k módosítása nélkül. Az e107 úgy készül, hogy megvizsgálja, léteznek-e az adott theme-ben a plugin-okhoz tartozó template file-k. Ha ott vannak, akkor azokat tölti be a megfelelő plugin-hoz. Így az eredeti file is megmarad (pl.: frissítés esetén). File és mappa struktúra: Az e107 theme általában a következő könyvtár struktúrát tartalmazza:

- e107_themes (könyvtár)
  |
    my_theme  (könyvtár)
    |
      images  (könyvtár)
    |    | 
    |      bullet.png
    |      other_images.jpg
    |      index.html
    |
      languages (könyvtár)
    |    |
    |      English.php
    |      Hungarian.php
    |      index.html
    |
      preview.jpg
      theme.php
      style.css
      index.html

e107_themes - A theme-ek gyűjtőmappája, ide kell feltölteni a theme-t* my_theme - Az általad készített theme neve* languages - A különböző szövegfordításokat tartalmazza, melyek megtalálhatóak a theme-ben. Pl.: Hozzászólás, tovább ...stb.* images - A theme által használt képek, grafikák gyűjtőmappája* bullet.png - A theme által használt kis gomb (Bullet)* preview.jpg - A theme kis képe, melyet az admin theme kezelő felületen láthatsz. A theme beazosítását segíti elő. Ideális méret 200x150px* theme.php - Ez a fő theme file. (Ez egy php file, nem simán egy szöveg file)* style.css - A theme által használt stílus elemeket tartalmazza* index.html - Álatlában egy üres file, a biztonság érdekeben kell beilleszteni A theme.php file szerkezete: Nyissuk meg a theme.php file-t és adjuk hozzá a következő tartalmakat. A kezdő php Tag:

<?php </pre?>
<p><strong class="bbcode bold bbcode-b"><span class="bbcode-size" style="font-size: 16px;">A theme biztonságára ügyel a következő rész::</span></strong></p>
<pre class="prettyprint linenums code_highlight code-box bbcode-code" style="unicode-bidi: embed; direction: ltr;">if(!defined("e107_INIT")){ exit; }
<p><strong class="bbcode bold bbcode-b"><span class="bbcode-size" style="font-size: 16px;">Nyelvi információk:</span></strong></p>
<pre class="prettyprint linenums code_highlight code-box bbcode-code" style="unicode-bidi: embed; direction: ltr;">// [multilanguage]
    include_lan(e_THEME."my_theme/languages/".e_LANGUAGE.".php");
<p><strong class="bbcode bold bbcode-b"><span class="bbcode-size" style="font-size: 16px;">Theme információk:</span></strong></p>
<pre class="prettyprint linenums code_highlight code-box bbcode-code" style="unicode-bidi: embed; direction: ltr;">// [theme information]
    $themename = "A theme neve";
    $themeversion = "theme verzió pl.: 1.0";
    $themeauthor = "A theme készítője";
    $themeemail = "A theme készítő Email címe";
    $themewebsite = "A theme készítő weboldala";
    $themedate = "A theme készítésének ideje";
    $themeinfo = "Theme írásos információk";
<p>Ezeket az információkat kitöltheted a saját adataiddal. Ezek az információk meg fognak jelenni az admin theme kezelő oldalon. Ezeket az információkat beleteheted a nyelvi file-be is (csak a szöveget), ebben az esetben a nyelvi hivatkozást kell a szöveg helyére beilleszteni, pl.: így:</p>
<pre class="prettyprint linenums code_highlight code-box bbcode-code" style="unicode-bidi: embed; direction: ltr;">$themeinfo = "<i>".LAN_THEME_1."</i>";
<p><strong class="bbcode bold bbcode-b"><span class="bbcode-size" style="font-size: 16px;">A theme elrendezése:</span></strong> Illeszd be a következő kódot a file-be:</p>
<pre class="prettyprint linenums code_highlight code-box bbcode-code" style="unicode-bidi: embed; direction: ltr;">// [layout]
$layout = "_default";

$HEADER = "

{ SITENAME } { SITETAG }
{ SITELINKS }
{ MENU=1 }	"; $FOOTER = "
{ SITEDISCLAIMER }

";

FONTOS: A kódból lehagytam az egyes elemek záró Tag-jét, mert rosszul jeleníti meg a kódokat! $layout : Jelzi az elrendezés nevét, melyet a theme használ. A "_default" beállítás betölti a "header_default.php" és "footer_default.php" file-ket, melyek az "e107_themestemplates" mappában találhatóak. Ha saját kódokat szeretnél alkalmazni, akkor változtasd meg ezt a beállítást. Pl.: $layout = "_mytheme"; Ebben az esetben a "header_mytheme.php" és "footer_mytheme.php" file-ket fogja behívni a templates mappából. $HEADER : Ez az a rész, ahol a html szerkezet kezdődik. A html tag-ek így fognak megjelenni a body tag után. { SITENAME } : Ezen a helyen jelenik meg az oldalad neve, melyet az admin beállítások részben adtál meg. { SITETAG } : Ezen a részen jelenik meg az oldalad leírása, melyet az admin beállítások részben adtál meg. { SITELINKS } : Ez a shortcode (nevezzük rövidkódnak) határozza meg a főmenüd elhelyezkedését. Formázásáról majd később. { MENU=1 } : Itt fognak megjelenni azok a menük, melyeket az 1 menüterületre aktiváltál. Azonban itt még más formai dolgokat is meg kell adni, de erről később. $FOOTER : Ez bezárja az $HEADER összes html változóját. Az össze tartalmi rész, úgymint hírek, fórum, leírások ...stb. az $HEADER és $FOOTER között jelenik meg. Egyes oldalak más elrendezéssel: Az e107 lehetőséget biztosít az egyes oldalak más kinézettel történő megjelenítéséhez. Pl.: a főoldalon 3 oszloposan szeretnéd megjeleníteni az oldaladat, de a fórum oldalon elég a balmenü és a tartalmi rész, mert a hangsúlyt a fórumra szeretnéd fektetni. Gyakorlatilag bármennyi kinézetet megadhatsz. Jelen esetben egy másik kinézettel jelenítjük meg a fórum részeket. A több egyedi kinézet kódolására a későbbiekben visszatérünk. A különbséget az alapelrendezéstől az $CUSTOMHEADER és $CUSTOMFOOTER változókkal adjuk meg.

$CUSTOMHEADER= "
ide írd a html Tag-eket
";
$CUSTOMFOOTER= "
ide írd a html Tag-eket
";

$CUSTOMPAGES = "forum.php forum_post.php forum_viewforum.php forum_viewtopic.php";

Az egyedi kinézettel ellátott oldalak listáját szünet jellel add meg. Táblák megjelenítési stílusa: Ez a rész meghatározza, hogyan jelenjen meg majdnem az összes, oldalon belüli terület. A tábla megjeleítési stílus meghatározza, hogyan jelenjenek meg a menük, a fő tartalom, a különböző alapoldalak, plugin oldalak és az admin felület számos oldala.

//[tablestyle]

function tablestyle($caption, $text){
echo "<h3>{ $caption }</h3>
<div>{ $text }</div>";
}

{ $caption } - Ez a menü vagy oldal fejrésze/címe. Ez a változó megváltoztatható (általában) és megadhatsz bármilyen nevet. { $text } - Ez a menü vagy oldal tartalmi részének megjelenítéséért felel. Hírek megjelenítési stílusa: Ez egyszerűen azt határozza meg, hogyan jelenjenek meg a hír részek. A hír alapvetően 3 részből áll: a "Hír címe", a "Hír törzse" - maga a hír rövid vagy akár teljes leírása és a "Hír bővített tartalma" - itt az egész hír megjelenik. Ezeken kívül az e107 lehetőséget biztosít különböző adatok megjelenítésére különböző shortcode-okkkal. Ezek lehetnek a hír beküldője/írója, beküldés dátuma, hír kategória, hír ikonja, hozzászólások linkje, nyomtató ikon, levélküldés ikon, pdf ikon, az adminok részére közvetlen szerkesztő ikon.

//[newsstyle]
$NEWSSTYLE = "
<h3>{ NEWSTITLE }</h3>
<div>{ NEWSBODY }

{ EXTENDED }</div>";

1 { STICKY_ICON } - This front end news style shortcode will be replaced by the 'sticky.png' image, either from e107_imagesgenericlite or e107_imagesgenericdark directory depending on your thme's 'IMODE' setting. 2 { NEWSICON } - A hírkategória ikonját jeleníti meg 3 { NEWSTITLE } - A hír címe 4 { NEWSBODY } - A hír szövegrésze, amely megjelenik a főoldalon 5 { EXTENDED } - A hír bővített része, amely helykihasználtság miatt a "Tovább" vagy "Bővebben" link szöveg kattintása után jelenik meg 6 { NEWSAUTHOR } - A hír írója/beküldője 7 { NEWSDATE } - A hír beküldésének/írásának időpontja 8 { NEWSCOMMENTS } - A hírhez tartozó hozzászólások mennyiségét/hozzászólás letiltását jeleníti meg kattintható link szöveg formájában 9 { TRACKBACK } - A hírhez történő visszatalálás útvonalát mutatja meg 10 { EMAILICON } - Az Email küldés ikonját jeleníti meg 11 { PRINTICON } - A hír nyomtatásának ikonját jeleníti meg 12 { ADMINOPTIONS } - Az adminisztrátor ikonját jeleníti meg a közvetlen szerkesztéshez Linkek megjelenítési stílusa: Meghatározza, hogy a főmenü linkek hogyan jelenjenek meg. További lehetőségek itt is vannak, de eről majd később. Jelen esetben egy függőleges menüt jelenítünk meg, mindenféle extra nélkül:

//[linkstyle]
define('PRELINK', " ");
define('POSTLINK', " ");
define('LINKSTART', " ");
define("LINKSTART_HILITE", " ");
define('LINKEND', "
");
define('LINKDISPLAY', 2);
define('LINKALIGN', "left");

1 PRELINK - Ez a főmenü linkek blokk elejét határozza meg. Általában ez kezdődhet table, div, vagy ul tag-el, de maradhat üresen is. 2 POSTLINK - Ez a főmenü linkek blokk zárórésze. Általában ez lehet table, div, vagy ul tag, de maradhat üresen is. 3 LINKSTART - HTML tag, az egyes linkek elejét határozza meg. Minden linkre vonatkozik. 4 LINKSTART_HILITE - HTML tag, az egyes linkek elejét határozza meg, ha az aktív (pl.: más bullet). 5 LINKEND - HTML tag, az egyes linkek végét határozza meg. 6 LINKDISPLAY - a linkek megjelenítési módját határozza meg. Itt két leírással találkoztam, az egyik azt mondja 1-függőleges, 2-vízszintes, de szerintem a másik a helyénvaló 1- egyéni elrendezés, 2- az e107 alapértelmezett, meghatározott stílus elemeit hívja be. 7 LINKALIGN - Főmenü linkek igazítása. Hozzászólások megjelenítési stílusa: Meghatározza a hozzászólások kinézetét. Ha megadjuk, akkor az itt megadottak szerint jeleníti meg a hozzászólásokat, ha nem adjuk meg akkor egy alaértelmezett elrendezést hív be a core-ból.

$COMMENTSTYLE = "

{ SUBJECT } { USERNAME } | { TIMEDATE }
{ AVATAR } { COMMENTS } { JOINED } { REPLY }	{ COMMENT } { COMMENTEDIT }

";

Nézzük meg a shortcode-ket: 1 { SUBJECT } - A hozzászólás tárgya 2 { USERNAME } - Felhasználónév 3 { REPLY } - Megjelenít egy linket a hozzászólásnál, így a következő hozzászóló közvetlenül reagálhat az adott hozzászólásra. Tehát a hozzászólás hozzászólása 4 { AVATAR } - A felhasználó azonosító képe 5 { COMMENTS } - A felhasználó hozzászólásainak száma 6 { JOINED } - Felhasználó rendszerhez csatlakozásának ideje 7 { COMMENT } - Maga a hozzászólás 8 { COMMENTEDIT } - Hozzászólás módosítása 9 { RATING } - Felhasználó értékelése, ha az admin felületen engedélyezve van 10 { IPADDRESS } - Felhasználó IP címe 11 { LEVEL } - A felhasználó szintje, rangja 12 { LOCATION } - A felhasználó tartózkodási helye, ha megadta a felhasználói profilban 13 { SIGNATURE } - aláírás, ha a felhasználó megadta a felhasználói profilban Chatbox megjelenítési stílusa: Meghatározza a chatbox kinézetét. Ha megadjuk, akkor az itt megadottak szerint jeleníti meg a chatbox-ot, ha nem adjuk meg akkor egy alaértelmezett elrendezést hív be a core-ból.

$CHATBOXSTYLE = "
<img alt="bullet" src="".THEME_ABS."images/bullet2.gif"></img>
<b>{ USERNAME }</b>
{ TIMEDATE }
<div class="smalltext">
{ MESSAGE }
</div>

";

1 { USERNAME } - Chatbox üzenet írója 2 { TIMEDATE } - Üzenet beküldésének ideje 3 { MESSAGE } - maga az üzenet A záró php Tag:

?>