Cikkajánló
Egy újabb G-Portálos témát hoztam. Ehhez semmi más nem tartozik csak a CSS kód. Most fejlécet sem készítettem hozzá. A téma a többi között innen letölthető: G-Portál – G-Portálos
A hétvégén megcsináltam 4 darab rendelést. Kettőt G-Portálra és kettő darab Coppermine Galéria kinézetet is készítettem. Így a rendelés megint nyitva van. Igaz van még függőben 1-2 rendelés, de
Eddig nem igazán volt nyilvános, hogy készítek rendelésre design-t, de mivel mostanában elég sokat rendeltetek, így nyilvánossá is teszem. Szóval lehet rendelni design-t. Az oldalsávban el is készült a
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
template.html fájl részletezése

Kérdeztétek páran nem-e írnám le részletesen a Coppermine galéria template.html fájl adatait. De, persze leírom :) A template.html fájl a téma mappáján belül található, ami igazából magát a galériát jeleníti meg. Régebben ezt táblázatba tették. Valószínű a nagy többségnek ez a fájl a mai napig tele van <table> kódokkal. Én megszüntettem a table kódokat és mindent beletettem DIV kódokba. Sokkal átláthatóbb így az egész fájl és könnyebben is lehet belenyúlni, ha valamit átírnátok benne. Lejjebb teljesen részletesen leírom, hogy mi micsoda benne. A cikk alatt pedig letölthető egy olyan sablon, aminek a template.html fájljában ugyanez a részletesség megtalálható.

 

Akkor kezdjük az elején

 

A legelső sor egy úgynevezett DTD (Document Type Definition = dokumentumtípus meghatározás). Jegyezzük meg, hogy ezzel a sorral indítsuk a HTML oldalunkat.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={iso-8859-2}" />
<meta http-equiv="Pragma" content="no-cache" />

 

Ez a sor mutatja a böngésző fejlécében a szöveget, a galéria nevét, vagy bármit, amit oda írtok.

 

<title>Photo Gallery</title>
{META}

 

Itt található a CSS kód hivatkozása vagy a favicon is. Még ide kell tenni, ha egyedi betűtípust szeretnétek pl. a Google Fonts-ról. A tárhely hirdetésének javascript kódjait is itt kell megadni, vagy a webikonok kódját is. Nálam pl. van egy olyan javascript kód is a listában (qTip), amivel megváltozik a felugró ablak, ha a képre viszem az egeret. Szóval minden ilyet ide kell tenni.
A témán belül külön mappában van az aktuális téma, ami éppen használatban van. Nálam a legelső kódnál már látható is, hogy a témám neve MINTA. Ha új témát készítetek más néven, akkor mindenhol a MINTA szót is át kell nevezni ahhoz, hogy a galéria témája működőképes lehessen.

 

<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="themes/minta/style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Anaheim&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="themes/minta/js/300x250.js"></script>
<script type="text/javascript" src="themes/minta/js/300x250-below.js"></script>
<script type="text/javascript" src="themes/minta/js/qTip.js"></script>
{JAVASCRIPT}

 

Innen indul a galéria

 

<body>

 

Ez maga a galéria szélessége, amit a CSS kódban a #site résznél lehet módosítani. A lezáró div része ebben a fájlban a leges-legutolsó </div> kód

 

<div id="site">

 

Ez itt a fejléc tulajdonságai. A fejléc URL címét kell megadni, meg a szélesség-magasság értékeket. Ha a fejlécet linkelitek be menünek, akkor a menüpontokat is itt kell feltüntetni. A CSS kódban a .header résznél lehet még állítani rajta

 

<div class="header">
<img src="themes/minta/images/header.png" width="1000" height="750" usemap="#Map" border="0"/>
</div>

 

Ez az admin menü. Az a menüsor, ami akkor jelenik meg, ha be vagyunk jelentkezve a galériába. Ez máskor nem látszik, csak bejelentkezett módban, szóval majdnem mindegy hol helyezkedik el. A CSS kódban ezt is lehet módosítani ebben a részben: .admin-menu

 

<div class="admin-menu">
{ADMIN_MENU}
</div>

 

Lehet használni oldalsávot is a galériában. Az innen indul. A CSS kódban értelemszerűen az ugyanezen a néven futó kódokban kell a módosításokat elvégezni

 

<div class="oldalsav">

 

Ez egy oldalsáv

 

<div class="egesz-modul">
<div class="sidebar-head">Üdvözlő szöveg</div>
<div class="sidebar-module">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="sidebar-footer"></div>
</div>

 

A következő oldalsáv, amiben a menü van. Itt a gallery nevet kell lecserélni a te galériád nevére.

 

<div class="egesz-modul">
<div class="sidebar-head">Navigáció</div>
<div class="sidebar-module">
<ul id="navigation">
<li>
<a href="/gallery">Kezdőlap</a>
</li>
<li>
<a href="/gallery/login.php">Bejelentkezés</a>
</li>
<li>
<a href="/gallery/index.php?cat=0">Albumlista</a>
</li>
<li>
<a href="/gallery/thumbnails.php?album=lastup">Legújabb feltöltések</a>
</li>
<li>
<a href="/gallery/thumbnails.php?album=topn">Legtöbbet nézett</a>
</li>
<li>
<a href="/">Vissza a főoldalra</a>
</li>
</ul>
</div>
<div class="sidebar-footer"></div>
</div>

 

Ez itt az oldalsáv lezáró része. Az oldalsáv DIV nyitó és lezáró kód közé kell illeszteni, ha még több oldalmodult szeretnétek. Jelenleg kettő van benne. Egy a menü miatt egy pedig bemutatkozó szöveg.

 

</div>

 

Innen indul a galéria maga. Szintén a CSS-ben a .content résznél lehet módosítani

 

<div class="content">
{GALLERY}
</div>

 

Ebben található a Coppermine kredit link

 

<div class="footer">
</div>

 

Ez pedig egyedi lábléc, amiben bármilyen tartalom mehet. Az én linkem nem kitörlendő, ha már tőlem viszed el a sablont. Persze tudom, a falnak beszélek…

 

<div class="footer01">
<br>
<a href="javascript: history.go(-1)">Back</a> | <a href="#">Top</a> | <a href="http://lindadesign-nonstop.hu/html-php/coppermine-galeria-leirasok/coppermine-galeria-temak/" target="_blank">Design</a> | Hosted by <a href="http://www.flaunt.nu">Flaunt</a>
</div>

 

div id=”site” lezáró kódja, azaz ezzel teljesen le is zárjuk a template.html fájlt.

 

</div>

 

A teljes téma a template.html fájl magyarázatával innen letölthető. Ajánlott hozzá pl. a NotePad használata, ami pedig innen tölthető le.

lindadesign Hozzászólások
529 megtekintés

Hozzászólások