Welcome, you're not connected. ( Log in - Register )

Les commandes sont pour le moment fermées jusqu'à nouvel ordre, mais je peux assurer le support.

Merci de votre compréhension.


Requests are currently closed, but I can do some support.

Thanks for your understanding.




Important links - Liens importants

Règles - Rules | Présentez-vous - Introduce yourself | Problème d'inscription ? - Registration problem ?

RSS >  [subsilver2] Ajouter un fond
Ishimaru Chiaki #1 29/08/2011 - 22h59

Class : ID Admin
Posts : 1390
Registered on : 12/11/2007
Age : 27
Sex : Female

Offline Mail Www

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
  1. [*]Enlever le dégradé du header
  2. [*]Définir l'arrière-plan
  3. [*]Le bloc global


Enlever le dégradé du header

Voici comment se présente subsilver2 par défaut :
Posted Image

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 :
Posted Image

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. :p

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 :
Posted Image

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 !
parse error: parse error, unexpected T_ANXIETE_SOCIALE in home/ishimaru/social.php on line 1My portfolio (only available in French for now)
Rico #2 30/08/2011 - 04h17

Class : ID Newbie
Posts : 16
Registered on : 25/08/2011
Age : 42
Sex : Male

Offline Www

Merci Ishimaru Chiaki ,

Pour l'instanr j'ai pas trop le temps de m'attarder la dessus ! :fear:

Mais tu as pu constater que les categories ne sont pas alignée, les colonnes sont décalé

Qure puisse faire pour ça?

 >  Fast reply

Message

 >  Stats

1 user(s) connected during the last 10 minutes (0 member(s) and 1 guest(s)).