2.x/Eigen stijl maken

Uit phpBB.nl Wiki
Ga naar: navigatie, zoeken
!! Let op: vanaf 1 januari 2009 wordt phpBB2 niet meer ondersteund door phpBB.nl en phpBB.com.

Deze pagina's dienen uitsluitend als archief.

!!



Ondanks het feit, dat er toch heel wat stijlen voor phpBB te vinden zijn, kan het een heel leuk idee zijn om zelf eens een stijl te maken. Nou is het logisch, dat als je dit voor de eerste keer gaat doen, je natuurlijk niet weet, hoe dit moet.

Daarom is dit artikel er, om je verder te helpen met hoe je je eigen stijl kunt maken.

Wat heb je nodig

  1. Kennis over HTML en CSS
  2. Een HTML-editor (zoals HomeSite en Crimson Editor; Notepad/Kladblok kun je ook gebruiken, maar die is niet zo goed)
  3. Een CSS-editor (zoals Top Style Lite, maar Notepad/Kladblok kan ook)
  4. Een afbeelding-editor (zoals Adobe Photoshop (aanrader), Paint Shop Pro en FireWorks)

Hoe begin je?

Stap 1

Iedereen kent wel subSilver, de standaard template van phpBB. Vanuit dit template moet je beginnen, want andere templates hebben een copyright. Dus je begint met subSilver. Indien je geen volledig onaangepaste versie van subSilver hebt, kun je hier een nieuwe phpBB downloaden. Voor een Nederlands afbeeldingen setje van subSilver moet je hier zijn. Als laatste hernoem je de map subSilver naar de naam van jouw nieuwe stijl.

Stap 2

We gaan nu ieder bestand in de map doorzoeken. Alle verwijzingen in een bestand naar 'subSilver' ga je veranderen naar de naam van jouw_nieuwe_stijl. Dit zijn ongeveer een 88 regels in 18 verschillende bestanden, dus dit duurt wel even.

Stap 3

Hernoem 'subSilver.cfg' en 'subSilver.css' naar 'jouw_nieuwe_stijl.cfg' en 'jouw_nieuwe_stijl.css'

Stap 4

Open overall_header.tpl en zoek het stuk tekst,dat begint en eindigt bij (ongeveer regel 10 t/m 211)

<style type="text/css">
...
...
</style>

Verwijder dit stuk. Deze stap zorgt ervoor, dat je vanaf nu alle kleurwijzigingen in het CSS-bestand moet doen. Maar dit zorgt er ook voor, dat er bandbreedte wordt bespaard.

Stap 5

In overall_header.tpl zie je rond regel 9 deze regel staan:

<!-- link rel="stylesheet" href="templates/jouw_nieuwe_stijl/{T_HEAD_STYLESHEET}" type="text/css" -->

Deze regel ga je veranderen in:

<link rel="stylesheet" href="templates/jouw_nieuwe_stijl/{T_HEAD_STYLESHEET}" type="text/css" />

Deze stap zorgt ervoor, dat alle kleuren en opmaak uit het CSS-bestand worden gehaald.

De nieuwe stijl een ander uiterlijk geven.

Stap 1

Zorg ervoor, dat je een schets in je hoofd hebt, of op papier hebt staan, over hoe je je nieuwe stijl wilt gaan vormgeven. De kleuren zijn in eerste instantie het belangrijkste, dus daar gaan we ons nu het eerst op richten.

Stap 2

We gaan beginnen met de afbeeldingen (deze vind je in jouw_nieuwe_stijl/images), en de voornaamste zijn de cellpics, omdat die op iedere pagina terug komen. Open cellpic1.gif in je afbeeldingen-editor en bewerk deze in de kleuren, die je graag wilt met een gradiënt tool, of op een andere manier, zoals jij mooi vind. Met cellpic2.jpg en cellpic3.gif doe je exact hetzelfde. cellpic.gif hoef je niet te doen, aangezien die nergens gebruikt wordt; dit is een vervangende afbeelding voor cellpic2.jpg. Deze afbeeldingen sla je weer op, nadat je ze bewerkt hebt. Dit doe je allemaal eveneens met alle andere afbeeldingen in de map images en in de mappen images/lang_dutch en images/lang_english.

Stap 3

Als je alle images hebt gehad en ze naar tevredenheid hebt bewerkt, ga je verder met de CSS. Open jouw_nieuwe_stijl.css. Je ziet hier nu heel veel code, maar schrik niet; dit valt best allemaal wel mee. We zullen sommige codes even doorlopen. .forumline zorgt voor alle borders (randen) om de tabellen. a:link,a:active,a:visited,a:hover verzorgen de kleuren van de links. .gen,.genmed,.gensmall zorgen voor de gewone tekst, .gen is de grootste en .gensmall is de kleinste. Gelukkig staat boven vrijwel ieder stukje code, waar het voor dient; je moet hier echter wel Engels voor kunnen lezen. Stoei een beetje met de kleuren en je komt vanzelf tot een mooi resultaat. En wees niet bang om fouten te maken! Iedereen maakt fouten bij het maken van zijn eerste template; dit is echt niet erg, want hier kun je namelijk alleen maar meer van leren.

Stap 4

De stijl is bijna af; er ontbreekt alleen nog 1 ding in de footer. Dus open overall_footer.tpl en zoek naar de volgende code:

Powered by <a href="http://www.phpbb.com/" target="_phpbb" class="copyright">phpBB</a> © 2001, 2005
phpBB Group<br>{TRANSLATION_INFO}</span></div>

Verander dit in:

Powered by <a href="http://www.phpbb.com/" target="_phpbb" class="copyright">phpBB</a> © 2001, 2005
phpBB Group {TRANSLATION_INFO} :: Template by <a href="jouwwebsite.nl" target="_blank">Jouw Naam
</a></span></div>

Let op: verander of verwijder nooit de phpBB copyright! Deze mensen hebben hard gewerkt aan phpBB en dat ene regeltje tekst is het enige, wat ze ervoor terugvragen.

Vragen

Mocht je na het lezen van dit artikel, of naar aanleiding van dit artikel, alsnog vragen hebben, dan kun je deze uiteraard posten op het forum in het daartoe behorende onderdeel.