Ontwerpen van een eigen thema
Hernoem eerst uw thema
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 "template.html", "style.css" en "theme.php" bestanden en vervang alle verwijzingen van "themes/oude_thema_map" met "themes/nieuwe_thema_map" om ervoor te zorgen dat de linken naar de juiste plaats wijzen.
Vermijd het gebruik van spaties en speciale karakters in uw nieuwe themanaam - gebruik alleen alfanumerieke tekens en de underscore (_).
Houd ook altijd in gedachte dat ondanks het bestand in de map "themes/uw_thema_dir" 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 <img src="themes/thema_map/images/image.gif" alt=""/> gebruiken en niet alleen <img src="images/image.gif" alt=""/>. Het zelfde principe geldt voor het "theme.php" bestand.
- Maak een kopie
Blader door de lokale kopie van coppermine galerij op uw client, navigeer naar de themamap (uw_coppermine_map/themes/), 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 uw_coppermine_map/themes/curve/), selecteer "kopiëren" uit het contextmenu. Plak het daarna in de themamap (genoemd "Kopie van Curvethema" of gelijkaardig).
- Hernoem de folder
Klik rechts op de nieuw aangemaakte map (uw_coppermine_map/themes/kopie van curve/) 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 uw_coppermine_map/themes/mijn_thema/).
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 "mijn_thema" en "Mijn_thema". De meeste webservers worden echter met Linux gestuurd, waar het hoofdlettergebruik wel verschil uitmaakt (daar is wel een verschil tussen "mijn_thema" en "Mijn_thema"). Om op veilig te spelen is het aan te raden om altijd kleine letters te gebruiken.
- Editeer de bestanden om de themanaam weer te geven
Gebruik een platteteksteditor (in dit voorbeeld, gebruiken we notepad.exe), open uw_coppermine_map/themes/mijn_thema/template.html. Zoek "themes/curve" en vervang het met "themes/mijn_thema" (kan verschillende keren in het bestand voorkomen, let er dus op dat u op alle plaatsen de benaming "themes/curve" vervangt door "themes/mijn_thema"). Save uw wijzigingen. Doe dan hetzelfde voor de bestanden theme.php en style.css.
Het is sterk aan te bevelen 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).
Tipps & tricks
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 door gebruikers ontworpen thema's beschikbaar voor download, ze kunnen ook vooraf bekeken worden op de coppermine demo pagina.
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 theme=uw_thema_naam toe te voegen aan de url in uw browser.
- http://uw_site.tld/coppermine/index.php?theme=uw_thema_naam toont de Coppermine indexpagina, gebruikmakend van uw thema
- http://uw_site.tld/coppermine/thumbnails.php?album=1&theme=uw_thema_naam zal de thumbnailpagina tonen van album 1, gebruikmakend van uw thema
- http://uw_site.tld/coppermine/?theme=xxx zal uw beeld terugzetten op het standaardthema in de coppermine configuratie
Gebruik van WYSIWYG-editors
Het is ten zeerste aan te bevelen om geen gebruik te maken van een WYSIWYG-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:
- 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
- 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.
- 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.
Als u niet zeker bent welke editor dan wel te gebruiken is, kijk dan eens in de lijst van editors op pagina gereedschappen aanbevolen door de ontwikkelaars.
Het editeren van template.html
Het bestand template.html 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.
Favicon
Coppermine levert een favoriet icoon favicon.ico 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 <link rel="shortcut icon" href="favicon.ico" /> en vervang het door de naam van uw eigen icoon.
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.
Kleuren aanpassen & ontwerp
Om de door het script gebruikte kleuren, fonts, fontafmetingen, enz... aan te passen, moet u de "style.css" stylesheet editeren. Bijvoorbeeld: als u de grootte van de lettertypes wilt vergroten of verkleinen, volstaat het om de lijn met: table { font-size: 12px; } aan te passen. De grootte van de meeste lettertypes die in het script gebruikt worden, worden als een percentage aangegeven van deze maat.
Geavanceerde stappen
Er zijn enkele geavanceerde stappen die u zou moeten volgen - zij worden beschreven in de secties