Vous voulez mettre un arrière plan sous subsilver2 tout en gardant l'intérieur de la page visible ?
Ce tuto va vous le montrer, pour subsilver2.
Note : Ce tuto a été testé sur un forum phpBB 3.0.8/3.0.9 non modifié utilisant subsilver2
Sommaire
- [*]Enlever le dégradé du header
- [*]Définir l'arrière-plan
- [*]Le bloc global
Enlever le dégradé du header
Voici comment se présente subsilver2 par défaut :
Nous devrons tout d'abord enlever le dégradé du header, puisque celui-ci s'intègrera très mal à la nouvelle apparence.
Pour cela, ouvrez
subsilver2/theme/stylesheet.css et cherchez ceci :
#logodesc {
background-color: #C1CAD2;
background-image: url('./images/background.gif');
background-repeat: repeat-x;
background-position: center bottom;
padding: 0 25px 15px 25px;
}
Supprimez ou commentez ces lignes :
background-color: #C1CAD2;
background-image: url('./images/background.gif');
background-repeat: repeat-x;
background-position: center bottom;
Regardons notre style maintenant :
Déjà, on n'a plus ce dégradé, sauf bien sûr pour le logo, mais je me doute bien que vous voudrez le changer de toutes façons.
Définir l'arrière-plan
Maintenant, passons au fond de page : Nous voulons définir le fond de page d'une autre couleur ou lui mettre une image, tout en pouvant mettre ou non une couleur intérieure et centrer le forum.
Pour cela, toujours dans
subsilver2/theme/stylesheet.css, cherchez ceci :
body {
/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
color: #323D4F;
background-color: #FFFFFF;
font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
margin: 0;
}
Remplacer la valeur hexadécimale de cette ligne :
background-color: #FFFFFF;
Et si vous voulez définir une image de fond, voici le lien où vous trouverez les propriétés CSS disponibles pour les images de fond :
http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html#ss_part_2
ATTENTION : En raison des différences de résolution d'écran de vos visiteurs, je vous déconseille les grosses images, puisque celles-ci risquent de mal rendre sous certaines résolutions, et peuvent devenir trop lourdes si elles sont très grandes. Je vous conseille plutôt les images dont les raccords entre deux répétitions sont invisibles ou dont les bords se fondent parfaitement à la couleur de fond.
Voici un exemple de ce que ça pourrait donner en code :
background: url("./images/monimage.png") repeat-y top center;
(cela ferait parfaitement pour un fond comme les côtés de
les côtés de la page de ce forum, pour des raisons d'économie de poids)
Voilà le résultat pour le moment, avec juste la couleur de fond :
Le bloc global
Maintenant, on est rendu au bloc global. Puisque subsilver2 n'inclut pas de bloc global contenant toutes les parties de la page, on va en ajouter un, pour rendre le centrage plus aisé et pour pouvoir au choix mettre une couleur interne.
Ouvrez
subsilver2/template/overall_header.html et cherchez ceci :
<body class="{S_CONTENT_DIRECTION}">
Après cette ligne, ajoutez
<div id="global">
Ouvrez ensuite
subsilver2/template/overall_footer.html et cherchez ceci :
</body>
</html>
Avant ces lignes, ajoutez
</div>
Enregistrez les modifications et fermez les deux fichiers.
Maintenant, il ne nous reste plus qu'à faire les modifications CSS.
Toujours dans
subsilver2/theme/stylesheet.css, cherchez ces lignes :
#wrapheader {
height: auto !important;
padding: 0;
}
Avant ces lignes, ajoutez ceci :
#global {
//les propriétés que vous voulez
}
C'est là que vous pouvez définir les propriétés pour le bloc global.
Pour commencer, vous voudrez sûrement le centrer, donc définissez la largeur et les marges :
#global {
width:950px; //vous pouvez aussi le définir en pourcentage
margin: 0 auto; //pour centrer le bloc global
}
Ensuite, si vous voulez une couleur unie (ce que je vous conseille fortement si votre fond a de grosses variations de contraste, pour des raisons de lisibilité), définissez-le pour votre bloc
#global {
width:950px: //vous pouvez aussi le définir en pourcentage
margin: 0 auto; //pour centrer le bloc global
background-color:#fff;
}
Et finalement, vous voudrez sûrement une bordure pour faire ressortir la partie interne.
[code]#global {
width:950px: //vous pouvez aussi le définir en pourcentage
margin: 0 auto; //pour centrer le bloc global
background-color:#fff; //Couleur de fond
border: 1px solid #888888; //Bordure
}[/code]
Voilà, le tutoriel est fini !