Personnaliser les icones catégories et forums (phpBB3)

[lezebre]

Personnalisez les images de votre Forum !

Aperçu le l'index avant personnalisation des icones catégorie et forum


Dans le panneau d'administration :

Thêmes
Images et couleurs - > Gestion rapide des images
Onglet Icones du Forum


Vous pouvez (au choix)

• Sélectionner une image disponible dans le thême -> bouton "Voir les modèles"
• Choisir une image sur le disque dur de votre ordinateur -> Bouton "Envoyer une image"
• Masquer l'image (en la remplaçant par une image invisible) -> Case à cocher "Masquer"

Ici, vous pouvez modifier plusieurs images à la suite.
N'oubliez pas de valider vos modifications en cliquant sur le bouton "Enregistrer" avant de quitter

Choisir une icone parmi les modèles disponibles :

Sélectionnez l'icone de votre choix, puis validez en cliquant sur le bouton "Enregistrer"

Choisir une image sur votre ordinateur :

En cliquant sur le bouton "Choisir...", une fenêtre "Parcourir" s'ouvre : choisissez le dossier puis l'image souhaitée, puis cliquez sur "Ouvrir", puis sur "Envoyer"

N'oubliez pas de valider vos modifications en cliquant sur le bouton "Enregistrer" avant de quitter

[lezebre]

Aperçu de l'index après personnalisation des icones catégories et forum :


Comme on le voit sur l'illustration, ci-dessus, le texte de la description empiète sur les icones de catégorie/forum

Réglez les dimensions de la cellule image de catégorie et forum :

Thêmes
Images et couleurs - > Couleurs
Structure des pages



Aperçu de l'index après modification des dimensions de la cellule :

[lezebre]

Personnalisez les icones de sujet !
(liste des sujets dans un sous-forum)

Aperçu de la liste des sujets avant personnalisation des icones de sujet :


Dans le panneau d'administration :

Thêmes
Images et couleurs - > Gestion rapide des images
Onglet Icones des sujets


Vous pouvez (au choix)

• Sélectionner une image disponible dans le thême -> bouton "Voir les modèles"
• Choisir une image sur le disque dur de votre ordinateur -> Bouton "Envoyer une image"
• Masquer l'image (en la remplaçant par une image invisible) -> Case à cocher "Masquer"

Ici, vous pouvez modifier plusieurs images à la suite.
N'oubliez pas de valider vos modifications en cliquant sur le bouton "Enregistrer" avant de quitter

Choisir une icone parmi les modèles disponibles :

Sélectionnez l'icone de votre choix, puis validez en cliquant sur le bouton "Enregistrer"

Choisir une image sur votre ordinateur :

En cliquant sur le bouton "Choisir...", une fenêtre "Parcourir" s'ouvre : choisissez le dossier puis l'image souhaitée, puis cliquez sur "Ouvrir", puis sur "Envoyer"

N'oubliez pas de valider vos modifications en cliquant sur le bouton "Enregistrer" avant de quitter

[lezebre]

Aperçu de la liste des sujets après personnalisation des icones de sujet :


Comme on le voit sur l'illustration, ci-dessus, le texte de la description empiète sur les icones de sujet

Réglez les dimensions de la cellule icone de sujet :

Thêmes
Images et couleurs - > Couleurs
Onglet "Feuille de style CSS"

Nous allons coller ce code dans la feuille de style CSS

Code:

.topiclist dl.icon {
min-height: 60px;
background-position: 2px 50%;
}
* html .topiclist dl.icon {
height: 60px;
}
ul.topics dt {
padding-left: 60px;
}
ul.pmlist dt {
padding-left: 60px;
}


Les valeurs surlignées ci-dessous en vert sont à modifier en fonction de la hauteur des icones de sujet.
La valeur surlignée ci-dessous en orange est à modifier en fonction de la largeur des icones de sujet



Dans cet exemple, les icones de sujet font 50px de large sur 50px de haut. Afin de garder une petite marge, nous fixons les valeurs à 60x60 dans le style CSS

Aperçu de la liste des sujets, après modification du style CSS :