Avec ce tutoriel,je vais vous guider au mieux pour créer votre cadre pour votre forum
Ouvrir un nouveau document (Ctrl+N),
j'ai mis ces valeurs pour bien vous faire voir,
Laisser les couleurs par défaut (la teinte viendra plus tard)
Prendre l'outil "Rectangle arrondi" (U) avec ces réglages
Tracer votre cadre,vous devriez avoir ceci,
Faites (Ctrl+clique gauche)sur la vignette du calque ou "Séléction"==>"Récupérer la sélection"==>"OK"(votre cadre est donc entouré en pointillé),
Aller dans l'onglet "Sélection"==>"Modifier"==>"Contracter..."
une fenêtre s'ouvre,régler la contraction sur 20px ==>"OK"
vous avez donc un nouveau cadre appuyez sur "Effacer" de votre clavier,ce qui va supprimer l'intérieur du cadre
Le cadre étant fait,on va passer a la couleur ,
"double-cliquer" sur le calque pour ouvrir la fenêtre de "Style de calque"
j'ai mis ces réglages mais à vous d'adapter à vos couleurs
cliquer sur "OK"==>"OK"
notre cadre étant à la couleur que l'on désire,passons aux effets,
re "double-cliquer" sur le calque pour ouvrir la fenêtre de "Style de calque"
voila un petit effet vite fais,la personnalisation est très grande (à vous de jouer)
passons maintenant au découpage de ce cadre
onglet "Affichage"==>"Règles" ou (Ctrl+R)
dans les propriétés des règles,veillez a ce que ce soit en "pixel"en haut "clique droit" sur la règle et sélectionner "pixels"
sur cette même règle en maintenant un "clique gauche" dessus et en "glisser/déposer" on sélectionne une ligne "Repère"
on va donc faire glisser 6 repères (3 horizontaux et 3 verticaux) à 30px , 35px et 270px,n'hésitez pas a zoomer pour bien placer vos lignes,
ce qui nous donne ceci,
Prenez maintenant l'outil "Outil Tranche"
Zoomer à 1000% pour être tranquille pour créer vos blocs à découper
à l'aide des repères sélectionnés donc tout les blocs à découper
cela doit ressembler à ceci,
maintenant aller dans l'onglet "Fichier"==> "Enregistrer pour le web et les périphériques..."
choisissez le format ".png"==>"Enregistrer",une fenêtre s'ouvre pour choisir le chemin de l'enregistrement, nommé votre créa et sutout dans "Type:" sélectionner "HTML et images"
ce qui vous créeras un dossier contenant toutes vos images et un fichier .html (que vous pouvez supprimer car inutile pour les forums phpBB3)
il ne vous reste plus qu'à faire le ménage dans le dossier image que vous venez de créer pour ne garder que les images qui composerons votre cadre.
Ce cadre est adaptable a toute largeur de forum,(fixe ou extensible)
Voila c'est fini,en espérant que ce tuto vous serviras,
A bientôt...
EDIT: Vous avez suivis ce tuto,et maitenant vous vous dite,comment on le met en place
Et bien voici la marche a suivre,
Préparer vos 2 fichiers à modifier; soit "overall_header.html" et "overall_footer.html" de votre style
commencons la partie .html
Dans overall_header.html
chercher
- Code: Tout sélectionner
<div id="wrap">
ajouter AVANT
- Code: Tout sélectionner
<div class="haut_gauche"></div>
<div class="haut_droite"></div>
<div class="haut_millieu"></div>
<div class="centre_gauche">
<div class="centre_droite">
Dans overall_footer.html
chercher
- Code: Tout sélectionner
<div>
<a id="bottom" name="bottom" accesskey="z"></a>
ajouter AVANT
- Code: Tout sélectionner
</div>
</div>
<div class="bas_gauche"></div>
<div class="bas_droite"></div>
<div class="bas_millieu"></div>
Maitenant la patie .css
Créer un fichier que vous nomerais par ex: cadre.css et coller tous ces codes
- Code: Tout sélectionner
/*------ CADRE ------*/
/*------ PARTIE DU HAUT ------*/
.haut_gauche {
background-image: url("{T_THEME_PATH}/images/cadre/haut_gauche.png");
background-repeat: no repeat;
float: left;
width: 30px;
height: 30px;
margin: 0;
padding: 0;
}
.haut_millieu {
background-image: url("{T_THEME_PATH}/images/cadre/haut_millieu.png");
background-repeat: repeat-x;
position: top center;
height: 30px;
margin: 0 30px;
padding: 0;
}
.haut_droite {
background-image: url("{T_THEME_PATH}/images/cadre/haut_droite.png");
background-repeat: no repeat;
float: right;
width: 30px;
height: 30px;
margin: 0;
padding: 0;
}
/*------ FIN PARTIE DU HAUT ------ */
/*------ CENTRE ------*/
.centre_gauche {
background-image: url("{T_THEME_PATH}/images/cadre/centre_gauche.png");
background-repeat: repeat-y;
position: left;
margin: 0;
padding-left: 10px;
}
.centre_droite {
background-image: url("{T_THEME_PATH}/images/cadre/centre_droite.png");
background-repeat: repeat-y;
background-position: right;
margin: 0;
padding-right: 10px;
}
/*------ FIN CENTRE ------*/
/*------ PARTIE DU BAS ------*/
.bas_gauche {
background-image: url("{T_THEME_PATH}/images/cadre/bas_gauche.png");
background-repeat: no repeat;
float: left;
width: 30px;
height: 30px;
margin: 0;
padding: 0;
}
.bas_millieu {
background-image: url("{T_THEME_PATH}/images/cadre/bas_millieu.png");
background-repeat: repeat-x;
position: top center;
height: 30px;
margin: 0 30px;
padding: 0;
}
.bas_droite {
background-image: url("{T_THEME_PATH}/images/cadre/bas_droite.png");
background-repeat: no repeat;
float: right;
width: 30px;
height: 30px;
margin: 0;
padding: 0;
}
/*------ FIN PARTIE DU BAS ------*/
Enregistrer ce nouveau fichier dans styles/votre style/theme/...
Et pour finir dans la stylesheet.css de votre style on va appelé cette nouvelle .css
donc ajouter a la fin du fichier
- Code: Tout sélectionner
@import url("cadre.css");
A bientôt...
Pour ne pas avoir de problème de bug d'affichage de .png avec IE ce référer a ce TOPIC
Flux RSS