e107 Styles

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

0/5 : Nincs értékelve

Támogatás

Chatbox

Bejegyzés írásához be kell hogy jelentkezz. Amennyiben még nem regisztráltál az oldalra, ide kattintva megteheted.Ha még nem vagy regisztrált tag itt regisztrálhatsz.


  • iHack
    iHack  9 hónappal ezelőtt

    Hallo mikorra várható a javítás? Mert még nekem mindig nem jó ez a tizenegy :/ és addig nem tudok tovább lépni

  • fizi
    fizi  10 hónappal ezelőtt

    Jelzem a fejlesztőknek.

  • Kira
    Kira  10 hónappal ezelőtt

    Nekem se megy, folyamat a profil beállításokra dob, hogy töltsem ki, de nem tudom... hiába írom be, hogy "tizenegy", nem akarja elfogadni :S

  • fizi
    fizi  10 hónappal ezelőtt

    Kisbetűkkel kell beírni, módosítottam megint rajta. Ha nem jó akkor jelzem a fejlesztőknek.

  • iHack
    iHack  10 hónappal ezelőtt

    Még mindig nem fogadja el.. Kis betűvel írjam vagy hogy? tizenegy, Tizenegy, tízenegy, Tízenegy, Tizen egy, Tízen egy már mindent ki próbáltam és semelyik nem működik de így semerre nem tudok lépni még pm-et se tudok neked küldeni fizi


2018 Április

Nincs esmény ebben a hónapban.

H
K
S
C
P
S
V

Facebook

Keresés Fizi Themes

Elérhető (Online)

  • Vendégek:3
  • Tagok:0
  • Tagok:5527
  • Legújabb:mateev
  • Legtöbb online:72
    Vendégek:72 Tagok:0 -2018. március 04. vasárnap

GoogleAdMenu

Rólunk mondták