Boow
{ Membre actif }
Messages : 866
| Encadrer chacun de vos forums de façon originale Niveau: Intermédiaire | Par: B•øw | Validé par: B•øw | En date du: 19/02/10Mise à jour par Lostmindy le 2/03/2011 Voici, pour vous montrer rapidement, un petit avant-après. Passez la souris sur l'image pour voir ;P (attendez quelques secondes que l'image se charge)
/!\ Attention, pour cela vous devez utiliser le compte fondateur du forum car il faut aller modifier les templates. /!\ De plus, il vous faudra un minimum de compétences en graphisme, afin de créer les contours vous-même. Partie Templates Rendez-vous dans votre panneau d'administration, onglet Affichage » Templates » Général, et suivez les instructions qui suivent. Pour le message de la page d'accueilAllez dans votre template index_body. Au tout début, entre - Code:
-
{JAVASCRIPT} et - Code:
-
<!-- BEGIN message_admin_index --> Ajoutez ceci : - Code:
-
<!-- Début de l'ajout du haut --> <div class="ajout_haut"></div> <!-- Fin de l'ajout du haut --> Descendez d'environ 17 lignes et, tout de suite après - Code:
-
<!-- END message_admin_index --> Ajoutez le code suivant : - Code:
-
<!-- Début de l'ajout du bas --> <div class="ajout_bas"></div> <!-- Fin de l'ajout du bas --> Pour les forums en généralRendez-vous maintenant dans le template index_box, cherchez - Code:
-
<!-- BEGIN tablehead --> Juste après, ajoutez de nouveau ce code : - Code:
-
<!-- Début de l'ajout du haut --> <div class="ajout_haut"></div> <!-- Fin de l'ajout du haut --> Ce n'est qu'après - Code:
-
<!-- BEGIN tablefoot --> </table> que vous pouvez ajouter la seconde partie du code, c'est-à-dire ceci : - Code:
-
<!-- Début de l'ajout du bas --> <div class="ajout_bas"></div> <!-- Fin de l'ajout du bas --> Pour le Qui Est En LigneRetournez dans le template index_body, allez vers la fin, et entre - Code:
-
<!-- END switch_user_login_form_footer --> et - Code:
-
<!-- BEGIN disable_viewonline --> Insérez la première partie du code : - Code:
-
<!-- Début de l'ajout du haut --> <div class="ajout_haut"></div> <!-- Fin de l'ajout du haut --> Enfin, allez tout à la fin du template, entre - Code:
-
<!-- END disable_viewonline --> et - Code:
-
{CHATBOX_BOTTOM} Insérez le code suivant : - Code:
-
<!-- Début de l'ajout du bas --> <div class="ajout_bas"></div> <!-- Fin de l'ajout du bas --> Voilà, votre template est prêt !! Partie Mise en place du forum Allez sur le panneau d'administration, dans Général, Configuration et allez modifier la Structure des pages. Mettez une valeur fixe pour la largeur de votre forum, comme 900px par exemple. Attention, si c'est en pourcentage, ça ne pourra pas marcher ! Ensuite, allez dans Affichage, Page d'accueil, puis dans Structure et Hiérarchie. Vérifiez bien que le mode d'affichage choisi soit bien " Séparer les catégories sur l'index". Après, cela peut être n'importe lequel des trois. Aussi bien aucun, moyen que complet. Partie Graphisme Il vous faut trois images, toutes de largeur 900px. Je dis 900 parce que c'est la taille que j'ai choisie pour mon forum. =) Vous, vous adaptez bien évidement en fonction de la taille que vous avez mise à l'étape précédente. La hauteur importe peu, mais une petite hauteur permet d'alléger le chargement de votre forum, et il vaut mieux ne pas prendre trop de place non plus à l'affichage. Faites vos expériences vous-même ! Personnellement, mes images sont les suivantes (900*32, 900*26 et 900*26) : Pour l'ajout du haut :- Spoiler:
Pour l'ajout entre le haut et le bas (intermédiaire) :- Spoiler:
Pour l'ajout du bas :- Spoiler:
Partie CSS Dans votre feuille CSS, ajoutez ceci : - Code:
-
.ajout_haut { background: url('ADRESSE DE VOTRE IMAGE DU HAUT') center top no-repeat; width: LARGEUR DE VOTRE IMAGE DU HAUTpx; height: HAUTEUR DE VOTRE IMAGE DU HAUTpx; border: none; }
.ajout_bas { background: url('ADRESSE DE VOTRE IMAGE DU HAUT') center top no-repeat; width: LARGEUR DE VOTRE IMAGE DU BASpx; height: HAUTEUR DE VOTRE IMAGE DU BASpx; border: none; }
.forumline { background: url('ADRESSE VOTRE IMAGE INTERMEDIAIRE') center repeat-y; padding: QUELQUESpx; /* Il vaut mieux ajouter quelques pixels de marge intérieure, sinon le forum est collé à l'image intérieure, et ça ne rend pas bien. Faites le test sinon !*/ border: none; } Voilà, je crois que c'est tout. Si vous avez des questions, n'hésitez pas =] | | |
|
Kaiji
Blanche-Neige
Messages : 5578
| FAQ Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici : http://www.css-actif.com/f17-aide-css-xhtml | | |
|
rederst
{ Membre }
Messages : 20
| Merco Boow je me demandais justement comme faire ce genre de cadres personnalisés j'avais une vague idée mais je ne voulais pas me tromper avec les templates encore merci | | |
|
Coco-Lapin
{ Membre }
Messages : 13
| |
Avarosa
{ Membre }
Messages : 54
| Hey, merci | | |
|