Hoe je eigen stijl ontwerpen

[SpIdErPiGgY]

🎨 Zelf een phpBB-stijl maken
Van prosilver naar je eigen unieke forumdesign

---

📌 Inleiding

Een eigen phpBB-stijl maken hoeft niet te betekenen dat je helemaal vanaf nul moet beginnen.

De eenvoudigste en meest onderhoudsvriendelijke methode is om een bestaande stijl als basis te gebruiken. In de meeste gevallen is prosilver daarvoor de beste keuze.

Met behulp van template inheritance kan je nieuwe stijl automatisch bestanden van prosilver gebruiken wanneer die niet aanwezig zijn in je eigen stijl.

Je hoeft daardoor alleen de bestanden toe te voegen die je daadwerkelijk wilt wijzigen.

Deze handleiding is bedoeld voor phpBB 3.3.x. Een basiskennis van HTML en CSS is sterk aanbevolen. Voor uitgebreidere wijzigingen is ook enige kennis van JavaScript en Twig handig.

---

1. 📁 De structuur van een phpBB-stijl

Alle stijlen bevinden zich in:

Code: Selecteer alles

/styles/

Een eenvoudige eigen stijl kan bijvoorbeeld deze structuur hebben:

Code: Selecteer alles

styles/
└── mijnstijl/
    ├── template/
    │   ├── overall_header.html
    │   └── index_body.html
    │
    ├── theme/
    │   ├── images/
    │   │   └── background.jpg
    │   ├── stylesheet.css
    │   └── custom.css
    │
    └── style.cfg

De belangrijkste onderdelen zijn:

template/
Bevat de HTML/Twig-templates waarmee phpBB zijn pagina's opbouwt.

theme/
Bevat de CSS-bestanden, afbeeldingen en andere onderdelen die het uiterlijk bepalen.

style.cfg
Vertelt phpBB welke stijl dit is, welke versie hij heeft en eventueel van welke andere stijl hij overerft.

---

2. 🧱 Kies een goede basis

Voor een eerste stijl is prosilver bijna altijd de beste basis.

Waarom?

• prosilver wordt standaard met phpBB geleverd.
• De templates bevatten alle belangrijke phpBB-functies.
• De meeste extensies worden in eerste instantie voor prosilver ontwikkeld.
• De nodige template events zijn aanwezig.
• Nieuwe phpBB-functies worden eerst in prosilver verwerkt.

Je hoeft prosilver echter niet volledig te kopiëren.

Een veel betere oplossing is een zogenaamde child style.

Je eigen stijl gebruikt dan automatisch prosilver voor bestanden die je zelf niet hebt toegevoegd.

---

3. ⚙️ Het bestand style.cfg maken

Maak in:

Code: Selecteer alles

styles/mijnstijl/

een bestand:

Code: Selecteer alles

style.cfg

Een eenvoudige configuratie ziet er bijvoorbeeld zo uit:

Code: Selecteer alles

#
# phpBB Style Configuration File
#

name = Mijn Stijl
copyright = © Jouw naam, 2026
style_version = 1.0.0
phpbb_version = 3.3.19

parent = prosilver

Betekenis:

• name = naam die in het beheerderspaneel wordt weergegeven.
• copyright = auteur/copyrightinformatie.
• style_version = versie van jouw stijl.
• phpbb_version = phpBB-versie waarvoor de stijl bedoeld is.
• parent = de stijl waarvan je templates wilt overerven.

In ons voorbeeld:

Code: Selecteer alles

parent = prosilver

Dat betekent dat phpBB eerst in jouw eigen stijl kijkt.

Bestaat een template daar niet?

Dan kijkt phpBB automatisch in:

Code: Selecteer alles

styles/prosilver/template/

---

4. 🌳 Hoe template inheritance werkt

Template inheritance is één van de handigste functies van het phpBB-stijlsysteem.

Stel dat je alleen de header wilt aanpassen.

Dan hoef je niet heel prosilver te kopiëren.

Je maakt alleen:

Code: Selecteer alles

styles/mijnstijl/template/overall_header.html

phpBB gebruikt vervolgens:

Code: Selecteer alles

mijnstijl/template/overall_header.html

voor de header.

Voor alle andere templates die ontbreken gebruikt phpBB automatisch:

Code: Selecteer alles

prosilver/template/

Bijvoorbeeld:

Code: Selecteer alles

Mijn Stijl
│
├── overall_header.html    ← eigen bestand
│
├── index_body.html        ← eigen bestand
│
└── overige templates
        ↓
     prosilver

Dat maakt je stijl veel kleiner én eenvoudiger te onderhouden.

Kopieer alleen een template uit prosilver wanneer je die daadwerkelijk gaat aanpassen.

---

5. 🎨 De CSS van je stijl

Templates worden automatisch overgeërfd.

Voor CSS werkt dat anders.

CSS-bestanden van een parent-style worden niet automatisch door phpBB geladen.

Je moet dus zelf bepalen welke stylesheets je gebruikt.

Een veelgebruikte oplossing is om vanuit je eigen:

Code: Selecteer alles

theme/stylesheet.css

de benodigde CSS te laden.

Daarna kan je een apart bestand gebruiken voor je eigen wijzigingen.

Bijvoorbeeld:

Code: Selecteer alles

@import url("custom.css");

In:

Code: Selecteer alles

custom.css

kan je vervolgens je eigen ontwerp plaatsen:

Code: Selecteer alles

body {
    background: #11151b;
    color: #dce4ec;
}

.forabg,
.forumbg {
    border-radius: 8px;
}

a {
    color: #5dade2;
}

Een apart bestand zoals custom.css maakt het veel makkelijker om later je eigen wijzigingen terug te vinden.

---

6. 🧩 Belangrijke templates

phpBB bevat behoorlijk wat templates, maar een aantal kom je tijdens het ontwerpen veel vaker tegen.

overall_header.html

Bevat onder andere:

• de HTML-header;
• logo;
• hoofdnavigatie;
• stylesheets;
• JavaScript;
• begin van de pagina.

overall_footer.html

Bevat onder andere:

• footer;
• phpBB copyright;
• JavaScript;
• einde van de pagina.

index_body.html

Bepaalt grote delen van de forumindex.

viewforum_body.html

Wordt gebruikt bij het bekijken van een forum en de onderwerpenlijst.

viewtopic_body.html

Wordt gebruikt wanneer je een onderwerp bekijkt.

posting_layout.html

Bevat onderdelen van het scherm waarmee berichten worden geschreven of aangepast.

ucp_*.html

Templates van het gebruikerspaneel.

mcp_*.html

Templates van het moderatorpaneel.

---

7. 🧬 Template events niet verwijderen

Dit is erg belangrijk.

In phpBB-templates kom je regels tegen zoals:

Code: Selecteer alles

<!-- EVENT overall_header_head_append -->

of:

Code: Selecteer alles

<!-- EVENT overall_footer_after -->

Dit zijn template events.

Extensies gebruiken deze punten om automatisch HTML, JavaScript of andere onderdelen aan een pagina toe te voegen.

Verwijder je zo'n event, dan kan een extensie plots niet meer correct zichtbaar zijn in je stijl.

Daarom is prosilver zo'n goede basis: het bevat de officiële template events op de juiste plaatsen.

Verwijder of verplaats template events alleen wanneer je precies weet wat de gevolgen zijn.

---

8. 🧠 phpBB-templatevariabelen

In templates kom je variabelen tegen zoals:

Code: Selecteer alles

{SITENAME}
{USERNAME}
{PAGE_TITLE}

In moderne phpBB-versies kan je ook Twig-syntaxis tegenkomen:

Code: Selecteer alles

{{ SITENAME }}
{{ USERNAME }}

Deze waarden worden door phpBB ingevuld.

Voorwaardelijke code kan bijvoorbeeld voorkomen als:

Code: Selecteer alles

<!-- IF S_USER_LOGGED_IN -->
    Welkom terug!
<!-- ENDIF -->

Met Twig kan hetzelfde principe bijvoorbeeld worden geschreven als:

Code: Selecteer alles

{% if S_USER_LOGGED_IN %}
    Welkom terug!
{% endif %}

phpBB gebruikt Twig als basis van zijn template-engine.

---

9. 🔌 Vergeet {$STYLESHEETS} niet

In de header van een stijl staat een belangrijk phpBB-onderdeel:

Code: Selecteer alles

{$STYLESHEETS}

Extensies kunnen hiermee hun eigen CSS aan de pagina toevoegen.

Een extensie kan bijvoorbeeld gebruiken:

Code: Selecteer alles

<!-- INCLUDECSS mijn_extensie.css -->

phpBB verzamelt deze bestanden en voegt ze via:

Code: Selecteer alles

{$STYLESHEETS}

aan de uiteindelijke pagina toe.

Verwijder {$STYLESHEETS} daarom nooit zomaar uit overall_header.html. Anders kunnen extensies hun CSS niet meer correct laden.

---

10. 🖼️ Afbeeldingen gebruiken

Afbeeldingen voor je stijl plaats je het best in:

Code: Selecteer alles

styles/mijnstijl/theme/images/

Bijvoorbeeld:

Code: Selecteer alles

theme/
└── images/
    ├── background.jpg
    ├── header.png
    └── pattern.png

Vanuit CSS kan je ze bijvoorbeeld gebruiken met:

Code: Selecteer alles

body {
    background-image: url("./images/background.jpg");
}

Probeer afbeeldingen die bij je stijl horen ook daadwerkelijk in je stijlpakket te bewaren.

Zo is je stijl niet afhankelijk van externe websites.

---

11. 🛠️ De stijl installeren

Wanneer de bestanden klaar zijn upload je de volledige map naar:

Code: Selecteer alles

/styles/mijnstijl/

Ga daarna naar het phpBB-beheerderspaneel:

Code: Selecteer alles

ACP → Aanpassingen → Stijlen

Je nieuwe stijl zou bij de niet-geïnstalleerde stijlen moeten verschijnen.

Klik op:

Installeren

Daarna kan je de stijl activeren of als standaardstijl instellen.

---

12. 🔄 Tijdens het ontwikkelen

Tijdens het maken van een stijl wil je natuurlijk niet voortdurend caches handmatig verwijderen.

Ga daarom naar:

Code: Selecteer alles

ACP → Algemeen → Serverconfiguratie → Laadinstellingen

Zoek:

Verouderde stijlcomponenten hercompileren

en zet dit tijdens de ontwikkeling op:

Ja

Hierdoor controleert phpBB automatisch of gewijzigde templates opnieuw moeten worden gecompileerd.

Op een druk productieforum kan je deze instelling na het ontwikkelen beter weer uitschakelen.

---

13. 🧹 Cache wissen

Zie je een wijziging niet?

Dan kan de phpBB-cache nog een oude versie bevatten.

Je kan de cache wissen via:

Code: Selecteer alles

ACP → Algemeen → Cache legen

Bij CSS kan daarnaast ook je browsercache roet in het eten gooien.

Een harde refresh helpt meestal:

Code: Selecteer alles

Ctrl + F5

of:

Code: Selecteer alles

Ctrl + Shift + R

---

14. 📱 Vergeet mobiel niet

Een mooie desktopstijl is maar de helft van het werk.

Test zeker:

• smartphones;
• tablets;
• kleine laptopschermen;
• lange gebruikersnamen;
• lange forumtitels;
• grote afbeeldingen;
• dropdownmenu's;
• privéberichten;
• meldingen;
• UCP;
• MCP;
• postingpagina's.

Gebruik hiervoor responsive CSS:

Code: Selecteer alles

@media (max-width: 700px) {
    .mijn-element {
        width: 100%;
    }
}

Test niet alleen de voorpagina. Vooral UCP, MCP, zoekpagina's, profielen en postingpagina's bevatten vaak verrassingen. 👀

---

15. 🧪 Test ook met extensies

Een stijl kan perfect lijken totdat je extensies activeert.

Controleer daarom populaire onderdelen zoals:

• extra navigatielinks;
• meldingen;
• dropdownmenu's;
• profielvelden;
• statistieken;
• custom pagina's;
• extensiepanelen;
• template events.

Wanneer een extensie in prosilver goed werkt maar in jouw stijl niet, controleer dan eerst of de noodzakelijke template events aanwezig zijn.

---

16. ✏️ Wijzig nooit rechtstreeks prosilver

Technisch kan het natuurlijk.

Maar het is geen goed idee.

Wanneer phpBB wordt bijgewerkt kunnen gewijzigde prosilver-bestanden worden vervangen of gewijzigd.

Maak daarom liever:

Code: Selecteer alles

styles/mijnstijl/

met:

Code: Selecteer alles

parent = prosilver

Zo blijven jouw wijzigingen netjes gescheiden van phpBB zelf.

---

17. 🆙 Je stijl bijwerken voor een nieuwe phpBB-versie

Wanneer bijvoorbeeld phpBB wordt bijgewerkt van:

Code: Selecteer alles

3.3.18 → 3.3.19

betekent dit niet automatisch dat je hele stijl opnieuw gemaakt moet worden.

Controleer vooral welke bestanden in prosilver zijn gewijzigd.

Heb je zo'n bestand zelf overschreven in:

Code: Selecteer alles

mijnstijl/template/

dan vergelijk je jouw versie met de nieuwe prosilver-versie.

Handige programma's hiervoor zijn bijvoorbeeld:

• WinMerge
• Meld
• Beyond Compare
• de vergelijkfunctie van moderne code-editors

Zo kan je precies zien welke regels door phpBB zijn aangepast.

Hoe minder templates je zelf overschrijft, hoe eenvoudiger toekomstige phpBB-updates worden.

---

18. 📦 Een stijl netjes verpakken

Wil je je stijl verspreiden?

Maak dan bijvoorbeeld:

Code: Selecteer alles

mijnstijl-1.0.0.zip

Met daarin:

Code: Selecteer alles

mijnstijl/
├── template/
├── theme/
└── style.cfg

Let erop dat niet per ongeluk extra mappen ontstaan zoals:

Code: Selecteer alles

mijnstijl-1.0.0/
    upload/
        styles/
            mijnstijl/

tenzij je bewust zo'n installatiepakket wilt aanbieden.

Voor een normale phpBB-stijl is het handig wanneer de gebruiker de map direct naar:

Code: Selecteer alles

/styles/

kan kopiëren.

---

19. ✅ Wil je je stijl op phpBB.com publiceren?

Voor publieke stijlen gelden strengere regels.

Denk onder andere aan:

• geldige HTML en CSS;
• correcte bestandsstructuur;
• geen ongeoorloofd auteursrechtelijk materiaal;
• geen noodzakelijke wijzigingen aan phpBB-corebestanden;
• geen afhankelijkheid van verplichte extensies;
• het phpBB-copyright zichtbaar houden;
• geen vaste teksten in templates wanneer daarvoor taalbestanden gebruikt moeten worden;
• correcte ondersteuning van phpBB-functionaliteit.

Bij een stijl die slechts een beperkt aantal templates wijzigt wordt template inheritance sterk aanbevolen.

---

20. 🔍 Handige ontwikkelmethode

Een praktische manier om te beginnen:

Code: Selecteer alles

1. Maak styles/mijnstijl/

2. Maak style.cfg

3. Stel in:
   parent = prosilver

4. Maak theme/stylesheet.css

5. Pas eerst kleuren, achtergronden en lettertypes aan.

6. Kopieer alleen een prosilver-template wanneer
   CSS alleen niet voldoende is.

7. Test desktop en mobiel.

8. Test UCP, MCP, zoeken, profielen en posting.

9. Test enkele extensies.

10. Vergelijk je aangepaste templates bij iedere
    nieuwe phpBB-versie met prosilver.

Zo groeit je stijl stap voor stap zonder dat je vanaf dag één honderden bestanden moet onderhouden.

---

💡 Een gouden regel
Wijzig zo weinig mogelijk templates,
maar zoveel CSS als nodig. Hoe dichter je templates bij prosilver blijven, hoe groter de kans dat:

• phpBB-updates probleemloos verlopen;
• extensies blijven werken;
• nieuwe phpBB-functies automatisch beschikbaar zijn;
• je stijl eenvoudig te onderhouden blijft.

Een volledig unieke stijl hoeft dus helemaal geen volledig nieuwe template-engine te betekenen.

Met goede CSS, enkele zorgvuldig gekozen templates en template inheritance kan je prosilver veranderen in een stijl die er totaal anders uitziet.

---

🔗 Officiële documentatie

Meer technische informatie vind je in de officiële phpBB-handleiding:

phpBB – Creating & Modifying Styles

Stijlen en voorbeelden:

phpBB 3.3 Styles Database

Ondersteuning voor het maken en aanpassen van stijlen:

phpBB Styles Support

---

🎨 Veel plezier met het bouwen van je eigen phpBB-stijl!