Cikkajánló
Készítettem egy újabb ingyenes .psd fejlécet, amit bárki letölthet és felhasználhat forrás megjelölésével természetesen. A fejléc innen tölthető le: PSD – Photoshop fejlécek   megnézem teljes nagyságban Kapcsolódó bejegyzések
Ez a tartalom regisztrációhoz kötött. Ha már regisztrált tag vagy, akkor a Bejelentkezés alatt tudsz belépni, ellenkező esetben regisztrálnod kell a tartalom megtekintéséhez.Regisztrált felhasználó belépéseFelhasználónévJelszó Emlékezzen rám  RegisztrációFelhasználónév*Email cím*E-mail cím újra*Honlap**Kötelezően
A WordPress-ben az alap hozzászólás űrlapban nincs lehetőség a hozzászólás szerkesztésére. Vagyis hozzászólás megírása közben a hozzászóló semmilyen formában nem tudja a szöveget szerkeszteni. Persze nem is létfontosságú, hogy
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
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
615 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