GitHub - WicaebethTheo/BookStack-theme: Modern theme for BookStack

APP_THEME=modern

Ce guide complet vous accompagne dans la création d'un thème personnalisé moderne pour BookStack, incluant un footer élégant et des styles CSS professionnels.

📋 Table des matières

Prérequis
Comprendre le système de thèmes
Créer la structure du thème
Créer les styles CSS
Configurer le Custom Head
Créer le footer personnalisé
Activer le thème
Personnalisation
Dépannage

1. 📦 Prérequis

Avant de commencer, assurez-vous d'avoir :

✅ Une installation BookStack fonctionnelle
✅ Accès SSH au serveur
✅ Droits d'écriture dans le dossier BookStack
✅ Connaissances de base en CSS

2. 🔧 Comprendre le Système de Thèmes

BookStack utilise un système de thèmes puissant basé sur des dossiers dans themes/. Chaque thème peut :

Fonctionnalité	Description	Emplacement
Surcharger des vues	Remplacer les templates Blade	`themes/<nom>/`
Fichiers publics	CSS, JS, images accessibles	`themes/<nom>/public/`
Traductions	Personnaliser les textes	`themes/<nom>/lang/`

Attention : Les fichiers de thème ne sont pas considérés comme stables par BookStack. Testez toujours après une mise à jour !

3. 📁 Créer la Structure du Thème

Exécutez ces commandes pour créer l'arborescence :

# Créer les dossiers nécessaires
mkdir -p /opt/bookstack/themes/modern/layouts/parts
mkdir -p /opt/bookstack/themes/modern/public

Structure finale

themes/modern/
├── layouts/
│   └── parts/
│       ├── custom-head.blade.php   ← Injection dans <head>
│       └── footer.blade.php        ← Footer personnalisé
├── public/
│   └── styles.css                  ← Styles CSS du thème
└── README.md

4. 🎨 Créer les Styles CSS

Créez le fichier themes/modern/public/styles.css :

/*
 * BookStack Modern Theme
 * Un thème moderne avec animations et typographie améliorée
 */
/* ===== Variables CSS ===== */
:root {
--modern-primary: #6366f1;
--modern-primary-dark: #4f46e5;
--modern-primary-light: #818cf8;
--modern-gray-50: #f9fafb;
--modern-gray-100: #f3f4f6;
--modern-gray-200: #e5e7eb;
--modern-gray-700: #374151;
--modern-gray-900: #111827;
--modern-radius: 12px;
--modern-radius-sm: 8px;
--modern-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--modern-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--modern-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ===== Typographie ===== */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
}
/* ===== Cards ===== */
.card {
border-radius: var(--modern-radius) !important;
box-shadow: var(--modern-shadow);
transition: var(--modern-transition);
border: 1px solid var(--modern-gray-200);
}
.card:hover {
box-shadow: var(--modern-shadow-lg);
}
/* ===== Boutons ===== */
button, .button {
border-radius: var(--modern-radius-sm) !important;
font-weight: 600;
transition: var(--modern-transition);
}
button:hover, .button:hover {
transform: translateY(-1px);
box-shadow: var(--modern-shadow);
}
/* ===== Header ===== */
header#header {
backdrop-filter: blur(12px);
box-shadow: var(--modern-shadow);
}
/* ===== Scrollbar ===== */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--modern-gray-100);
}
::-webkit-scrollbar-thumb {
background: var(--modern-gray-400);
border-radius: 5px;
}
/* ===== Animations ===== */
html {
scroll-behavior: smooth;
}
::selection {
background: rgba(99, 102, 241, 0.3);
}

5. 📝 Configurer le Custom Head

Ce fichier injecte du contenu dans le <head> de chaque page.

Créez themes/modern/layouts/parts/custom-head.blade.php :

{{-- Chargement des polices Google --}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
{{-- Styles du thème --}}
<link rel="stylesheet" href="{{ url('/theme/modern/styles.css') }}">
{{-- Corrections CSS critiques --}}
<style>
/* Éléments de liste */
.entity-list-item {
padding: 0.75rem 1.5rem !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
border-radius: 4px !important;
}
.entity-list-item:hover {
transform: none !important;
}
.entity-list {
margin: 0 !important;
}
.entity-list-item .content {
padding-left: 0.5rem !important;
}
/* Description des livres */
.book-content, .chapter-content {
padding: 1.5rem !important;
}
.content-wrap.card {
padding: 2rem !important;
}
/* Callouts */
.callout {
padding: 1.25rem 1.5rem 1.25rem 3.5rem !important;
position: relative !important;
}
.callout:before {
left: 1.25rem !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
</style>

6. 🦶 Créer le Footer Personnalisé

Créez themes/modern/layouts/parts/footer.blade.php :

<footer class="modern-footer print-hidden">
    <div class="footer-container">
        <div class="footer-main">
            <div class="footer-brand">
                <span class="footer-app-name">{{ setting('app-name') }}</span>
                <p class="footer-description">
                    Votre base de connaissances collaborative.
                </p>
            </div>
        &lt;div class="footer-links-section"&gt;
            &lt;h4&gt;Navigation&lt;/h4&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="{{ url('/') }}"&gt;Accueil&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="{{ url('/books') }}"&gt;Livres&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="{{ url('/shelves') }}"&gt;&Eacute;tag&egrave;res&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="footer-bottom"&gt;
        &lt;div class="footer-copyright"&gt;
            &amp;copy; {{ date('Y') }} {{ setting('app-name') }}
        &lt;/div&gt;
        &lt;div class="footer-powered"&gt;
            Propuls&eacute; par &lt;a href="https://www.bookstackapp.com"&gt;BookStack&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

</footer>
<style>
.modern-footer {
background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
color: #e5e7eb;
padding: 3rem 0 0 0;
margin-top: 3rem;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.footer-main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-app-name {
font-size: 1.5rem;
font-weight: 700;
color: #fff;
}
.footer-description {
color: #9ca3af;
margin-top: 0.5rem;
}
.footer-links-section h4 {
color: #fff;
font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footer-links-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links-section li {
margin-bottom: 0.5rem;
}
.footer-links-section a {
color: #9ca3af;
text-decoration: none;
transition: all 0.2s ease;
}
.footer-links-section a:hover {
color: #fff;
}
.footer-bottom {
display: flex;
justify-content: space-between;
padding: 1.5rem 0;
font-size: 0.85rem;
color: #6b7280;
}
.footer-powered a {
color: #818cf8;
text-decoration: none;
}
@media (max-width: 600px) {
.footer-main {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
}
</style>

7. ✅ Activer le Thème

Étape 1 : Modifier le fichier .env

Ajoutez cette ligne dans votre fichier .env :

APP_THEME=modern

Étape 2 : Vider le cache

cd /opt/bookstack
php artisan cache:clear
php artisan view:clear

Étape 3 : Tester

Rechargez votre navigateur avec Ctrl + F5 pour forcer le rechargement du cache.

Succès ! Votre thème moderne est maintenant actif.

8. 🎯 Personnalisation

Changer les couleurs

Modifiez les variables CSS dans styles.css :

:root {
    /* Thème vert */
    --modern-primary: #10b981;
    --modern-primary-dark: #059669;
/* Th&egrave;me bleu */
--modern-primary: #3b82f6;
--modern-primary-dark: #2563eb;

/* Th&egrave;me rouge */
--modern-primary: #ef4444;
--modern-primary-dark: #dc2626;

}

Palette de couleurs suggérées

Thème	Primary	Dark
🟣 Violet (défaut)	`#6366f1`	`#4f46e5`
🟢 Vert	`#10b981`	`#059669`
🔵 Bleu	`#3b82f6`	`#2563eb`
🟠 Orange	`#f59e0b`	`#d97706`
🔴 Rouge	`#ef4444`	`#dc2626`

9. 🔍 Dépannage

Le thème ne s'applique pas

Vérifiez que APP_THEME=modern est dans .env
Videz le cache : php artisan view:clear
Rechargez avec Ctrl + F5

Erreur 500

Vérifiez les logs Laravel :

tail -50 /opt/bookstack/storage/logs/laravel.log

CSS non chargé

Testez l'accès au fichier :

curl -I http://localhost/theme/modern/styles.css

Erreur courante : Si vous obtenez une erreur "undefined function", vérifiez la syntaxe Blade. Utilisez user()->hasAppAccess() et non hasAppAccess().

📚 Ressources

📋 Récapitulatif

Fichier	Rôle
`themes/modern/public/styles.css`	Styles CSS du thème
`themes/modern/layouts/parts/custom-head.blade.php`	Chargement fonts + CSS + corrections
`themes/modern/layouts/parts/footer.blade.php`	Footer personnalisé

Tutoriel créé pour BookStack - Thème Modern

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
modern		modern
README.MD		README.MD

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

📋 Table des matières

1. 📦 Prérequis

2. 🔧 Comprendre le Système de Thèmes

3. 📁 Créer la Structure du Thème

Structure finale

4. 🎨 Créer les Styles CSS

5. 📝 Configurer le Custom Head

6. 🦶 Créer le Footer Personnalisé

7. ✅ Activer le Thème

Étape 1 : Modifier le fichier .env

Étape 2 : Vider le cache

Étape 3 : Tester

8. 🎯 Personnalisation

Changer les couleurs

Palette de couleurs suggérées

9. 🔍 Dépannage

Le thème ne s'applique pas

Erreur 500

CSS non chargé

📚 Ressources

📋 Récapitulatif

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

📋 Table des matières

1. 📦 Prérequis

2. 🔧 Comprendre le Système de Thèmes

3. 📁 Créer la Structure du Thème

Structure finale

4. 🎨 Créer les Styles CSS

5. 📝 Configurer le Custom Head

6. 🦶 Créer le Footer Personnalisé

7. ✅ Activer le Thème

Étape 1 : Modifier le fichier .env

Étape 2 : Vider le cache

Étape 3 : Tester

8. 🎯 Personnalisation

Changer les couleurs

Palette de couleurs suggérées

9. 🔍 Dépannage

Le thème ne s'applique pas

Erreur 500

CSS non chargé

📚 Ressources

📋 Récapitulatif

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages