• e107 v1 segédlet
• Egyéb leírások
• Theme leírása

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

A theme biztonságára ügyel a következő rész::

if(!defined("e107_INIT")){ exit; }

Nyelvi információk:

// [multilanguage]
    include_lan(e_THEME."my_theme/languages/".e_LANGUAGE.".php");

Theme információk:

// [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";

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:

$themeinfo = "<i>".LAN_THEME_1."</i>";

A theme elrendezése:

Illeszd be a következő kódot a file-be:

// [layout]
$layout = "_default";

$HEADER = "
<table>
<tr>
<td colspan='2'>
<h1>{ SITENAME }</h1>
<h2>{ SITETAG }</h2>
</td>
</tr>
<tr>
<td colspan='2'>
{ SITELINKS }
</td>
</tr>
<tr>
<td>
{ MENU=1 }
</td>
<td>";

$FOOTER = "
</td>
</tr>
<tr>
<td colspan='2'>
{ SITEDISCLAIMER }
</td>
</tr>
</table>";

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_themes\templates" 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 }<br />
{ EXTENDED }</div>";

1 { STICKY_ICON } - This front end news style shortcode will be replaced by the 'sticky.png' image, either from e107_images\generic\lite or e107_images\generic\dark 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', "<br />");
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 = "
<table style='width:100%'>
<tr>
<td colspan='2' class='forumheader3'>
{ SUBJECT }
<b>
{ USERNAME }
</b>
|
{ TIMEDATE }
</td>
</tr>
<tr>
<td style='width:30%; vertical-align:top'>
<div class='spacer'>
{ AVATAR }
</div>
<span class='smalltext'>
{ COMMENTS }
<br />
{ JOINED }
</span>
<br/>
{ REPLY }
</td>
<td style='width:70%; vertical-align:top'>
{ COMMENT  } { COMMENTEDIT }
</td>
</tr>
</table>
<br />";

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 src='".THEME_ABS."images/bullet2.gif' alt='bullet' />
<b>{ USERNAME }</b><br />{ TIMEDATE }
<div class='smalltext'>
{ MESSAGE }
</div>
<br />";

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

A záró php Tag:

?>

---