Als je bedoelt hoe je een eigen stijl/theme voor phpBB maakt, dan kan ik je daar stap voor stap bij helpen.
Een phpBB-stijl bestaat grofweg uit:
HTML/templates → .html-bestanden
CSS → uiterlijk, kleuren, layout, responsive design
JavaScript → interactieve onderdelen
Images/icons → logo's en afbeeldingen
style.cfg → informatie over de stijl
Een parent style zoals prosilver waarvan je eventueel onderdelen overneemt
Een eenvoudige structuur ziet er bijvoorbeeld zo uit:
styles/
└── mijnstijl/
├── style.cfg
├── template/
│ ├── overall_header.html
│ ├── overall_footer.html
│ └── forumlist_body.html
├── theme/
│ └── stylesheet.css
└── images/
└── ...
Voorbeeld style.cfg
name = mijnstijl
copyright = © Mijn Forum
style_version = 3.3
phpbb_version = 3.3
parent = prosilver
Daarna kun je bijvoorbeeld in theme/stylesheet.css de kleuren en vormgeving aanpassen:
body {
background: #f1f3f5;
color: #333;
font-family: Arial, sans-serif;
}
.headerbar {
background: #222;
color: white;
border-radius: 8px;
}
.forabg,
.forumbg {
border-radius: 8px;
}
Vervolgens plaats je de map in:
/phpBB/styles/mijnstijl/
en activeer je de stijl via het phpBB-beheerderspaneel.
Complete moderne phpBB 3.3-stijl
Hoe begin je eraan
Ik zou niet meteen alles zelf gaan bouwen. Begin met een bestaande phpBB-stijl als basis en pas die stap voor stap aan.
Stap 1 — Installeer phpBB
Zorg eerst dat je een werkende phpBB-installatie hebt, bijvoorbeeld:
jouwsite.be/
└── phpBB/
Stap 2 — Zoek de stijlenmap
In je phpBB-installatie ga je naar:
phpBB/styles/
Daar staat meestal bijvoorbeeld:
styles/
└── prosilver/
prosilver is een goede basis om van te leren.
Stap 3 — Maak je eigen stijl
Maak bijvoorbeeld:
styles/
└── mijnstijl/
Kopieer vervolgens de benodigde bestanden van prosilver naar mijnstijl.
Je krijgt bijvoorbeeld:
mijnstijl/
├── style.cfg
├── template/
├── theme/
└── images/
Stap 4 — Pas eerst alleen de CSS aan
Dit is de makkelijkste manier om te beginnen.
Open bijvoorbeeld:
mijnstijl/theme/stylesheet.css
En verander eerst dingen zoals:
body {
background: #10141a;
}
.headerbar {
background: #202833;
}
a {
color: #4da3ff;
}
Zo kun je meteen zien wat iedere wijziging doet.
Stap 5 — Activeer je stijl
Ga in phpBB naar:
ACP → Customise → Styles
Daar zou je mijnstijl moeten kunnen installeren/activeren.
Mijn advies: begin met één kleine wijziging, bijvoorbeeld de achtergrondkleur. Zodra dat werkt, kun je de header, knoppen, forums, topics, berichten, logo's enzovoort aanpassen.
Top. We doen het helemaal vanaf nul, maar wel op een manier waarbij je na elke stap kunt testen of het werkt.
We maken eerst een simpele phpBB 3.3-stijl met een donkere uitstraling. Daarna kunnen we hem steeds mooier maken.
Stap 1 — Maak de mappen
Ga naar:
phpBB/styles/
Maak daar een nieuwe map:
mijnstijl
Daarin maken we:
mijnstijl/
├── style.cfg
├── template/
└── theme/
Stap 2 — Maak style.cfg
Maak in mijnstijl het bestand:
style.cfg
Zet daarin:
name = Mijnstijl
copyright = © Mijn Forum
style_version = 3.3
phpbb_version = 3.3
parent = prosilver
De regel:
parent = prosilver
is belangrijk. Hierdoor gebruiken we prosilver als basis en hoeven we niet honderden phpBB-bestanden zelf te maken.
Stap 3 — Maak je stylesheet
Maak:
mijnstijl/theme/stylesheet.css
Begin met:
body {
background: #111827;
color: #e5e7eb;
}
a {
color: #60a5fa;
}
.headerbar {
background: #1f2937;
}
.forabg,
.forumbg {
background: #1f2937;
border-radius: 8px;
}
.button {
border-radius: 6px;
}
Stap 4 — Installeer de stijl
Ga daarna in het phpBB-beheerpaneel naar:
ACP → Customise → Styles
Daar zou Mijnstijl moeten verschijnen.
Klik op Install en activeer hem vervolgens.
Daarna
Als dit werkt, gaan we verder met:
kleuren en achtergrond
eigen logo
forumcategorieën mooier maken
topics en berichten aanpassen
knoppen en iconen
mobiel/responsive maken
header en navigatiemenu
uiteindelijk een volledig eigen ontwerpMooi. Dan gaan we verder met de header en navigatie van je eigen phpBB-stijl.
Ik stel voor dat we een moderne donkerblauw/blauwe stijl maken. Eerst maken we de bovenkant van het forum netjes; daarna kunnen we de forumblokken en berichten aanpakken.
Stap 5 — Eigen header
Maak in:
styles/mijnstijl/theme/stylesheet.css
onderaan dit:
/* =========================================
HEADER
========================================= */
.headerbar {
background: linear-gradient(135deg, #111827, #1e3a8a);
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}
/* Forumnaam */
.site_logo {
background-image: none;
}
#site-description h1 {
color: #ffffff;
font-size: 28px;
font-weight: 700;
}
/* Ondertitel */
#site-description p {
color: #bfdbfe;
}
/* Navigatie */
.navbar {
background: #172033;
border-radius: 10px;
margin-top: 10px;
border: 1px solid #263653;
}
.navbar a {
color: #e5e7eb;
}
.navbar a:hover {
color: #60a5fa;
}
Stap 6 — Forumachtergrond
Voeg daaronder toe:
/* =========================================
PAGINA
========================================= */
.wrap {
max-width: 1200px;
}
#page-body {
margin-top: 15px;
}
.panel {
background: #1f2937;
border: 1px solid #374151;
border-radius: 10px;
}
.panel h3 {
color: #ffffff;
}
Stap 7 — Forumtitels
/* =========================================
FORUMS
========================================= */
.forumtitle {
font-size: 17px;
font-weight: 600;
}
.forumtitle a {
color: #ffffff;
}
.forumtitle a:hover {
color: #60a5fa;
}
.description {
color: #9ca3af;
}
.topiclist {
border-radius: 10px;
overflow: hidden;
}
Daarna purge je de phpBB-cache via:
ACP → General → Purge the cache
en laad je je forum opnieuw.
Als alles goed staat, heb je nu een donker forum met blauwe header, afgeronde blokken en blauwe links.
