0byt3m1n1
Path:
/
data
/
applications
/
aps.bak
/
coppermine
/
1.5.12-0
/
standard
/
htdocs
/
docs
/
nl
/
[
Home
]
File: theme_create.htm
<!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="ltr"> <head> <title>Creating your custom theme - Coppermine Photo Gallery - Documentatie & Handleiding</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="language" content="nl" /> <meta name="copyright" content="Coppermine dev team" /> <meta name="description" content="Coppermine heeft een krachtig mechanisme dat u toestaat om uw eigen thema te ontwerpen, zo kunt u uw galerij een uniek uitzicht geven dat past bij de rest van uw volledige website. Om zeker te zijn dat uw eigen thema niet overschreven wordt bij een latere upgrade, kunt u best starten met het een eigen naam te geven." /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta http-equiv="imagetoolbar" content="no" /> <!-- SVN version info: Coppermine version: 1.5.12 $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/docs/nl/theme_create.htm $ $Revision: 8154 $ $Date: 2011-01-02 20:44:22 +0100 (So, 02 Jan 2011) $ --> <link rel="stylesheet" type="text/css" href="../style/style.css" media="all" /> <link rel="stylesheet" type="text/css" href="../style/screen.css" media="screen" /> <link rel="stylesheet" type="text/css" href="../style/print.css" media="print" /> <link rel="shortcut icon" href="../favicon.ico" /> <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.treeview.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> </head> <body> <h1 id="docheader">Coppermine Photo Gallery v1.5.4: Documentatie en Handleiding</h1> <div id="toc"> <a href="toc.htm">Inhoudstafel</a> </div> <a name="theme_create"></a><h1>Ontwerpen van een eigen thema<a href="#theme_create" title="Link naar deze sectie"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h1> <a name="theme_create_rename"></a><h2>Hernoem eerst uw thema<a href="#theme_create_rename" title="Link naar deze sectie"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Om een nieuw thema te ontwerpen, is de beste oplossing om een bestaand te kopiëren en te gebruiken als template (=sjabloon) voor uw nieuw thema. Maak hiervoor een kopie van de ganse themamap die u wilt gebruiken als basis en geef deze map ook meteen de naam van uw nieuw thema. Editeer dan de "<strong>template.html</strong>", "<strong>style.css</strong>" en "<strong>theme.php</strong>" bestanden en vervang alle verwijzingen van "<strong>themes/oude_thema_map</strong>" met "<strong>themes/nieuwe_thema_map</strong>" om ervoor te zorgen dat de linken naar de juiste plaats wijzen.<br /> Vermijd het gebruik van spaties en speciale karakters in uw nieuwe themanaam - gebruik alleen alfanumerieke tekens en de underscore (_).</p> <p>Houd ook altijd in gedachte dat ondanks het bestand in de map "<strong>themes/uw_thema_dir</strong>" zit, het gecodeerd moet worden alsof het in de hoofdmap van de Coppermine installatie zou zitten. Bij voorbeeld, om een afbeelding te tonen, moet u <tt class="code"><img src="<strong>themes</strong>/thema_map/images/image.gif" alt=""/></tt> gebruiken en niet alleen <tt class="code"><img src="images/image.gif" alt=""/>.</tt> Het zelfde principe geldt voor het "<strong>theme.php</strong>" bestand.</p> <div class="cpg_example"> <ul> <li><strong>Maak een kopie</strong><br /> Blader door de lokale kopie van coppermine galerij op uw client, navigeer naar de themamap (<tt class="code">uw_coppermine_map/themes/</tt>), klik rechts op de mapnaam die het thema bevat dat u als basis wilt gebruiken en (in dit voorbeeld, willen we het curve thema gebruiken, dus gebruiken we <tt class="code">uw_coppermine_map/themes/curve/</tt>), selecteer "kopiëren" uit het contextmenu. Plak het daarna in de themamap (genoemd "Kopie van Curvethema" of gelijkaardig).</li> <li><strong>Hernoem de folder</strong><br /> Klik rechts op de nieuw aangemaakte map (<tt class="code">uw_coppermine_map/themes/kopie van curve/</tt>) en selecteer " naam wijzigen" uit het contextmenu. Kies een unieke themanaam - in dit voorbeeld, gebruiken we "mijn_thema" (dat wordt dan de map met de naam <tt class="code">uw_coppermine_map/themes/mijn_thema/</tt>).<br /> Denk eraan dat we het thema later uploaden naar uw webserver - gebruik dus zeker de juiste vorm: in Windows-gestuurde clients, maakt het hoofdlettergebruik niets uit, er is dus geen verschil tussen "<tt class="code">mijn_thema</tt>" en "<tt class="code">Mijn_thema</tt>". De meeste webservers worden echter met Linux gestuurd, waar het hoofdlettergebruik <em>wel</em> verschil uitmaakt (daar is <em>wel</em> een verschil tussen "<tt class="code">mijn_thema</tt>" en "<tt class="code">Mijn_thema</tt>"). Om op veilig te spelen is het aan te raden om altijd kleine letters te gebruiken.</li> <li><strong>Editeer de bestanden om de themanaam weer te geven</strong><br /> Gebruik een platteteksteditor (in dit voorbeeld, gebruiken we notepad.exe), open <tt class="code">uw_coppermine_map/themes/mijn_thema/template.html</tt>. Zoek "<tt class="code">themes/curve</tt>" en vervang het met "<tt class="code">themes/mijn_thema</tt>" (kan verschillende keren in het bestand voorkomen, let er dus op dat u op <em>alle</em> plaatsen de benaming "<tt class="code">themes/curve</tt>" vervangt door "<tt class="code">themes/mijn_thema</tt>"). Save uw wijzigingen. Doe dan hetzelfde voor de bestanden <tt class="code">theme.php</tt> en <tt class="code">style.css</tt>. </li> </ul> </div> <p class="cpg_message_validation">Het is <strong>sterk aan te bevelen</strong> om uw aangepast thema een eigen naam te geven, zelfs als u slechts kleine veranderingen wilt aanbrengen in een standaardthema van Coppermine. De reden is heel eenvoudig: als u later een upgrade uitvoert, zult u niet in de problemen komen (bv. per ongeluk uw aangepast thema opnieuw overschrijven met een standaard thema uit de upgrade).</p> <a name="theme_create_tipps"></a><h2>Tipps & tricks<a href="#theme_create_tipps" title="Link naar deze sectie"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Als u niet zeker bent hoe te beginnen met het creëren van uw eigen thema, kunt u ook een kijkje nemen in de downloadsectie van de Coppermine homepage: daar zijn verschillende <a href="theme_user-contributions.htm#theme_user-contributions">door gebruikers ontworpen thema's</a> beschikbaar voor download, ze kunnen ook vooraf bekeken worden op de <a href="http://coppermine-gallery.net/demo/">coppermine demo pagina</a>.</p> <p>Terwijl u bezig bent met de opmaak of het testen van uw nieuw thema, is het niet aangewezen dat uw bezoekers uw probeersels kunnen zien maar dat u (als de coppermine admin) wel kunt zien hoe het resultaat er zal uitzien. Dat kan door eenvoudigweg <tt class="code">theme=uw_thema_naam</tt> toe te voegen aan de url in uw browser.</p> <br /> <div class="cpg_example"> <ul> <li><tt class="code">http://uw_site.tld/coppermine/index.php?theme=uw_thema_naam</tt> toont de Coppermine indexpagina, gebruikmakend van uw thema</li> <li><tt class="code">http://uw_site.tld/coppermine/thumbnails.php?album=1&theme=uw_thema_naam</tt> zal de thumbnailpagina tonen van album 1, gebruikmakend van uw thema</li> <li><tt class="code">http://uw_site.tld/coppermine/?theme=xxx</tt> zal uw beeld terugzetten op het <a href="configuration.htm#admin_theme_theme">standaardthema</a> in de coppermine configuratie</li> </ul> </div> <a name="theme_create_wysiwyg"></a><h2>Gebruik van WYSIWYG-editors<a href="#theme_create_wysiwyg" title="Link naar deze sectie"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Het is ten zeerste aan te bevelen om <strong>geen</strong> gebruik te maken van een <acronym title="Wat je ziet is wat je krijgt">WYSIWYG</acronym>-editor om Coppermine bestanden te editeren. Het coppermine dev team weet dat het gemakkelijker lijkt voor beginners om grafische editors te gebruiken. Deze programma's hebben echter veel nadelen:</p> <ul> <li>Sommige editors (vooral MS Frontpage) zijn bekend om de code te "verfraaien" op een manier die ingesloten PHP-code ongeldig maakt. Het gevolg daarvan is dat, als u met een WYSIWYG-editor bv. theme.php zou editeren, het bestand corrupt (= onbruikbaar) wordt</li> <li>Grafische editors hebben de neiging om af te raden of zelfs ongeldige HTML-code te produceren. U heeft meer controle over de code als u in plaats daarvan een plattetekst-editor gebruikt.</li> <li>U leert niets. Vroeg of laat wilt u iets doen waartoe uw WYSIWYG-editor niet in staat is. Wat nu? U heeft altijd het werk overgelaten aan de editor - u verstaat geen HTML-code. Wanneer u een plattetekst-editor gebruikt, kan de leercurve misschien wat trager zijn maar ze is veel effectiever en interessanter.</li> </ul> <p class="cpg_message_info">Als u niet zeker bent welke editor dan wel te gebruiken is, kijk dan eens in de lijst van editors op pagina <a href="dev_tools.htm">gereedschappen aanbevolen door de ontwikkelaars</a>.</p> <a name="theme_create_template_html"></a><h2>Het editeren van template.html<a href="#theme_create_template_html" title="Link naar deze sectie"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Het bestand <a href="theme_template.htm">template.html</a> is het hoofdbestand van ieder thema: het kan alleen HTML/CSS/JavaScript code (geen PHP!) en enkele plaatshoudercodes bevatten die later vervangen worden met de gewenste inhoud als het thema geparset wordt (geparset = wanneer de HTML-code van een galerijpagina gegenereerd wordt uit een PHP-pagina). Template.html bepaalt de algemene layout van uw galerijpagina's. Gebruik het om het uitzicht van uw galerij aan te passen aan de rest van uw website.</p> <a name="theme_create_template_favicon"></a><h3>Favicon<a href="#theme_create_template_favicon" title="Link naar deze sectie"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>Coppermine levert een favoriet icoon <a href="http://en.wikipedia.org/wiki/Favicon" rel="external" class="external">favicon.ico</a> mee dat zich in de galerijhoofdmap bevindt. Er wordt naar verwezen in alle thema's die meegeleverd zijn met Coppermine. U mag gerust een eigen favoriet-icoon aanmaken voor uw eigen galerij en er naar verwijzen in uw aangepast thema. Om dit uit te voeren, editeer themes/uw_eigen_thema/template.html, zoek naar <tt class="code"><link rel="shortcut icon" href="favicon.ico" /></tt> en vervang het door de naam van uw eigen icoon.</p> <p>Als alternatief kunt u ook gewoon het originele favicon.ico vervangen door uw eigen ontwerp, dan moet u wel dezelfde naam "favicon.ico" blijven gebruiken.</p> <a name="theme_create_colors"></a><h2>Kleuren aanpassen & ontwerp<a href="#theme_create_colors" title="Link naar deze sectie"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Om de door het script gebruikte kleuren, fonts, fontafmetingen, enz... aan te passen, moet u de "<strong><a href="theme_style_css.htm">style.css</a></strong>" stylesheet editeren. Bijvoorbeeld: als u de grootte van de lettertypes wilt vergroten of verkleinen, volstaat het om de lijn met: <tt class="code">table { font-size: 12px; }</tt> aan te passen. De grootte van de meeste lettertypes die in het script gebruikt worden, worden als een percentage aangegeven van deze maat.</p> <a name="theme_create_advanced"></a><h2>Geavanceerde stappen<a href="#theme_create_advanced" title="Link naar deze sectie"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Er zijn enkele geavanceerde stappen die u zou moeten volgen - zij worden beschreven in de secties <ul> <li><a href="theme_create_matching_page_tutorial.htm#theme_matching">Ontwerp een Coppermine thema dat past bij de algemene layout van uw website</a></li> <li><a href="theme_theme_php.htm#theme_php">Editeren van theme.php</a></li> </ul> <a name="theme_create_end"></a> <div id="doc_footer"> <div class="doc_info_wrapper"> <span id="doc_last_changed">$LastChangedDate: 2011-01-02 20:44:22 +0100 (So, 02 Jan 2011) $</span> <span id="doc_revision">$Revision: 8154 $</span> </div> </div> </body> </html>