Image à la place d'une couleur

[Master Puppet]

Bonsoir à toutes et tous.
Alors je pense que mon problème qui n'en est pas un sera vite réglé par quelqu'un ayant les connaissances nécessaires.

Je souhaites simplement mettre à la place d'une simple couleur, une image.
Donc ça concernerait;

Table Rangée Couleur 1
Table Rangée Couleur 3 et séparations

Je sais que l'on peut le faire avec le fond de page, comme ceci me semble-t-il :

Code:

.bodyline{
background-image: url(Url de ton image  );
}

Mais je souhaiterai le faire avec les deux cadres cités plus haut.
Merci d'avance, si quelqu'un peut par la même me fourir un petit lien pour avoir des infos sur la customisation du CSS, les commandes, leur effets et tout ce serai génail, comme j'apprendrai de moi même comment modifier telle ou telle chose.

- l'URL du forum, si nécessaire, http://imperium-gemini.forums-actifs.com/forum.htm
- la version de votre forum, phpbb2
- votre statut sur le forum, fondateur
- si vous avez du CSS personnalisé, oui juste l'image de fond centrée

Code:

body {
    background-color: #000000;
    background-image: url("http://img229.imageshack.us/img229/6456/backgroundyq.png");
    background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: top center;
    }

- votre ou vos navigateur(s), Fire Fox uniquement

Ah oui et autre petite question, est-il possible d'avoir un navigateur plus large que la largeur configurable du forum.
Quand vous arriverez sur la page du forum (pour mieux comprendre) je souhaiterai que ma barre de navigation ne bouge pas, mais que la largeur du forum coïncide avec l'intérieur de l'image de fond (un petit plus petit que les chainettes de l'image)
Cela est-il possible ? Si oui comment bien sûr

Ah encore une dernière chose (:S) j'ai une ligne blanche juste au dessus de la barre avec écrit "qui est en ligne ?" est-il possible de la faire disparaître ?

Merci d'avance, cordialement MP.

[Anzu]

Bonsoir ^^

Utilisez ce code à mettre dans la CSS et mettre le lien de votre image =>

Code:

td.row1,td.row3.over:hover {
    background-image: url('lien de l'image');
    }
td.row2,td.row1.over:hover {
    background-image: url('lien de l'image');
    }
td.row3{
    background-image: url('lien de l'image');
    }

Cordialement.

[Master Puppet]

Merci pour cette première partie de réponse, j'ai éditer mon post entre temps
En espérant que tu puisses y répondre aussi rapidement

[Anzu]

^^

Pour le qui est en ligne, je ne peux pas le voir, vous avez bloqué l'accès au forum XD

Et pour ceci:

Quand vous arriverez sur la page du forum (pour mieux comprendre) je souhaiterai que ma barre de navigation ne bouge pas, mais que la largeur du forum coïncide avec l'intérieur de l'image de fond (un petit plus petit que les chainettes de l'image)

Wo bu dong
En bref, je n'ai pas compris, vous pouvez être plus clair ?

[Master Puppet]

Je screen et j'edit mon post pour être plus clair.



Donc;

le premier cercle en haut, je souhaiterai que cela ne bouge pas, mais en revanche que le grand ovale verticale vienne coïncider avec la flèche (donc l'intérieur de mon image de fond) des deux côtés bien sûr

L'autre ovale horizontale et la ligne blanche que je souhaiterai faire disparaître.

Merci d'avance

[Master Puppet]

Up (même si je sais que je devrais pas, j'aurai dû poster avec le screen plutôt que d'éditer, vous m'en voyez désolé)

Infos ajoutées dans le post précédent.

[Anzu]

D'après ce que j'ai pu comprendre ..

Vous avez tenté de réduire la largeur de votre forum ? Sur un screen, on n'y voit pas grand chose > <

Pour la fameuse barre blanche, mettez ceci dans votre CSS => (ca va la retirer ailleurs aussi ^^)

Code:

td.catLeft {
   border-width:0 0 0 0px !important;
}

td.catBottom {
   border-width:0 0px 0px !important;
}

td.catHead {
   border-width:0px 0px 0 !important;
   font-size:12px;
}

td.catLeft {
border-width:0 0 0 0px !important;
}

td {
border-width:0 0 0 0px !important;
}

th, td, p {
border-width:0 0 0 0px !important;
}

[Master Puppet]

Alors, alors, super plus de barre blanche, par contre ça n'a rien changer à la largeur du forum :S


dans le cercle vert, je ne souhaite pas que ça change de place, donc que la taille de ma barre de navigation personnelle, ne change pas.

Mais que la largeur du forum (dans les cercles rouges) viennent coïncider avec la largeur de l'intérieure de mon image de fond, à l'intérieure des petit chaînes.

[Anzu]

C'est bon j'ai enfin clairement capté, il est tard vous m'excuserez

Donc la solution serait d'extraire la barre de navigation et de la placer "ailleurs". Vous vous sentez d'attaque de toucher à Mr template Overall Header ?

[Master Puppet]

J'y connais rien mais soyons fou, pas la peine de s'excuser, c'est déjà bien de trouver une oreille pour écouter nos soucis en tout genre à une telle heure

Ah et, (suis chiant je sais) est-il forcé de modifier le fond des lignes en dessous de la barre "qui est en ligne". ou on peut comme les autres barre modifier à convenance n'importe lequel des fonds de barre ? Parce que dans le screen on constate au niveau des stats du forum des dégradé vilain, qui correspondent à mon image de fond de catégorie précédemment modifiée, mais dans cette partie ça fait moche :S Je viens de m'apercevoir que ce dégradé se retrouve dans le fond des post, c'est encore plus horrible xD

[Anzu]

Ah et, (suis chiant je sais) est-il forcé de modifier le fond des lignes en dessous de la barre "qui est en ligne". ou on peut comme les autres barre modifier à convenance n'importe lequel des fonds de barre ? Parce que dans le screen on constate au niveau des stats du forum des dégradé vilain, qui correspondent à mon image de fond de catégorie précédemment modifiée, mais dans cette partie ça fait moche :S Je viens de m'apercevoir que ce dégradé se retrouve dans le fond des post, c'est encore plus horrible xD

=> Normalement c'est une question par topic, on ne s'y retrouve plus sinon.
Oui on pourrait modifier, mais faut tout refaire en fait XD (du moins, toute une modification à faire dans le template viewtopic body. Je me déco donc si vous êtes patient, je vous explique demain, du moins plus tard ^^)
--


Alors c'est parti ! (mais je vous promets rien )

Première étape => Affichage > Templates > Général > Overall Header >

Repérez ceci =>

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

Supprimez le.

Puis repérez ceci =>

Code:

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Juste après, mettez ceci =>

Code:

<div class="navigation"><center>{GENERATED_NAV_BAR}</center></div>

Enregistrez.

Dans la CSS =>

Code:


.navigation {
position: absolute;
width: 100%;
align: center;
top: 250px;
}

(250 j'ai mis au feeling, donc à vous de voir sur votre forum)

Ca devrait être bon, j'espère ^^

[Master Puppet]

Les modifs du template n'on rien donné.
J'ai revérifier si j'avais bien modifier comme décris.
En changeant la valeur donnée (250px) dans le CSS cela n'influe en rien sur le rendu visuel final.
Merci d'avance et oui désolé je trouve ci et ça au fur et à mesure que je parcours mon forum, j'essaierai d'être plus clair/concis dans mes futur réponses merci de ta patience, je passerai donc demain.

Edit : En faite il a fallut validé la modification et cela à bel et bien fonctionné, je m'attelle à placé la navigation correctement reste plus que mon autre soucis



Donc après avoir modifier;

Code:

td.row1,td.row3.over:hover {
    background-image: url('http://img233.imageshack.us/img233/5963/fondbarresecond.png');
    }
td.row2,td.row1.over:hover {
    background-image: url('http://img233.imageshack.us/img233/5963/fondbarresecond.png');
    }
td.row3{
    background-image: url('http://img233.imageshack.us/img233/5963/fondbarresecond.png');
    }

J'ai maintenant le fond de mes post avec cette même image. Ainsi que les fonds des stats en dessous de la barre "qui est en ligne" qui sont constitués de cette même image.
Hors je souhaiterai un fond uni pour ces parties.

Merci d'avance Cordialement, MP

[Anzu]

Finalement je reste co ^^

Oui, il faut toujours publier et valider une fois le template modifié, sinon ca ne fonctionne pas

Vous y arriverez pour la barre de navigation ? Du moins, son placement ?

Donc pour les posts, on va devoir s'atteler à modifier le viewtopic body (par contre, je n'ai jamais essayé de mettre un autre fond pour les posts, je pense qu'il y a surement moyen étant donné que c'est possible de le faire pour le qui est en ligne)

et pour le qui est en ligne, il faut refaire un tableau dans l'index body.

[Master Puppet]

Je suis tout ouïe
Et finalement c'est moi qui suis parti me coucher
Mais me revoilà
~
Est-il normal que l'inscription "qui est en ligne ?" se retrouve tout à fait à gauche dans sa barre ?

[Anzu]

Bonjour ^^

Oui c'est tout à fait normal, mais en modifiant le qui est en ligne via l'index body, il est tout à fait possible de la placer où vous le souhaitez =>

[Master Puppet]

Donc pour les posts, on va devoir s'atteler à modifier le viewtopic body (par contre, je n'ai jamais essayé de mettre un autre fond pour les posts, je pense qu'il y a surement moyen étant donné que c'est possible de le faire pour le qui est en ligne)

et pour le qui est en ligne, il faut refaire un tableau dans l'index body.

J'attends plus que la marche à suivre

[Master Puppet]

Donc pour les posts, on va devoir s'atteler à modifier le viewtopic body (par contre, je n'ai jamais essayé de mettre un autre fond pour les posts, je pense qu'il y a surement moyen étant donné que c'est possible de le faire pour le qui est en ligne)

et pour le qui est en ligne, il faut refaire un tableau dans l'index body.

J'attends plus que la marche à suivre

Up!

[Master Puppet]

Donc pour les posts, on va devoir s'atteler à modifier le viewtopic body (par contre, je n'ai jamais essayé de mettre un autre fond pour les posts, je pense qu'il y a surement moyen étant donné que c'est possible de le faire pour le qui est en ligne)

et pour le qui est en ligne, il faut refaire un tableau dans l'index body.

J'attends plus que la marche à suivre

Up!

Up!Up!

[Anzu]

Bonsoir,

Pour le qui est en ligne, j'ai trouvé plus simple. A mettre dans la CSS =>

Code:

.row5 {
background-color: #151515;
}

A vous de mettre le code couleur de votre choix

Et dans l'index_body =>

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%"  class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle" align="right">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="facebook_login()" v="2" perms="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
         <!-- END switch_delete_cookies -->
         </span>
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%"  class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="facebook_login()" v="2" perms="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" colspan="2" height="28">   
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->
      
      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </td>
   </tr>
   <tr>
      <td class="row5" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row5" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
   </tr>
   <tr>
      <td class="row5"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span></td>
   </tr>
   {L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}
   <tr>
      <td class="row5"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row5">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>  </td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
     status: true,
     cookie: true,
     xfbml: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Pour les posts, j'y travaille mais rien de bien fructueux.

Cordialement.

[Master Puppet]

Merci beaucoup, j'applique ça de suite et j'attends la suite avec impatience

Edit : cela à bien fonctionné, il reste juste une petite barre avec le fond d'image dans le "Qui est en ligne ?" mais je vais pas chipoté, c'est déjà super, reste plus qu'à trouvé pour le fond des posts et ce sera parfait

Merci d'avance, cordialement.

[Master Puppet]

Merci beaucoup, j'applique ça de suite et j'attends la suite avec impatience

Edit : cela à bien fonctionné, il reste juste une petite barre avec le fond d'image dans le "Qui est en ligne ?" mais je vais pas chipoté, c'est déjà super, reste plus qu'à trouvé pour le fond des posts et ce sera parfait

Merci d'avance, cordialement.

UP!

[Anzu]

Bonjour,

De quelle barre vous parlez ?
Du fond des anniversaires ?

[Master Puppet]

Bonjour,

De quelle barre vous parlez ?
Du fond des anniversaires ?

OUi mais c'est pas important ça ne gène en rien, j'attends plus que pour le fond des post et ça devrait aller comme sur des roulettes
Merci du travail effectué Anzu

[Master Puppet]

reste plus qu'à trouvé pour le fond des posts et ce sera parfait

Merci d'avance, cordialement.

UP!

[Master Puppet]

reste plus qu'à trouvé pour le fond des posts et ce sera parfait

Merci d'avance, cordialement.

UP!

UP!

[Anzu]

Je ne vous ai pas oublié mais je préférais poster quelque chose de concret. Finalement je n'ai pas trouvé mieux qu'un petit ajout dans la CSS =_=
Le rendu ne sera pas total, étant donné que ca modifie uniquement la zone où apparait le post ..

Dans la CSS =>

Code:

.postbody{
background-color: #code couleur;
}

Cordialement.

[Master Puppet]

Hum en effet le rendu n'est vraiment pas ce que j'avais espéré.
Néanmoins je te remercie du travail effectué, plus que conséquent dans mon projet, je vais je pense revoir à la baisse mes exigences et adapter avec tout ce que tu as pu me fournir

Merci beaucoup, bonne continuation, et chapeau bas pour votre patience.