Cikkajánló
Elkészült egy újabb Photoshop formátumú fejléc :) A képek, amiket használtam a fejléc készítéséhez, fel lettek töltve a Galéria PNG képek kategóriájába is. Ezen a linken tudjátok letölteni a
Összesen hat pontba szedtem a számomra pozitív Disqus tulajdonságokat. Biztos van még több is, mert hát ugye kinek miért szimpatikus, de talán a lényeget sikerült összeszednem. Az első és
Amióta használok kiemelt képeket az oldalon azóta foglalkoztatott a dolog, hogy lehetne azt megcsinálni, hogy a képeket lehessen méretileg alakítani és ne kelljen esetleg törölni őket. Ezzel a megoldással
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
2016. március. 04.
CPG 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.

Kapcsolódó bejegyzések

lindadesign
738 megtekintés

Előző, következő cikk

Coppermine galéria témák

Jajj, de nagyon régen nem frissítettem már. Néha időm, néha meg kedvem nincsen hozzá, de most hoztam kettő darab Coppermine galéria témát. Az egyik Alicia Vikaner-rel készült, a másik pedig Phoebe Tonkin-os. Persze a képek cserélhetőek benne :) Annyi

Kódok, Leírások, G-Portálos téma

A napokban volt egy kevéske időm, így hoztam a listámról egy jó pár leírást és kódot. A listámon mindig van valami csak időm nem mindig van, hogy megosszam veletek. Mára sokrétű frissítést hoztam. Van venne G-Portálra, WordPress-re és sima kódok

 

Hozzászólások