Page 1 sur 1

Mon forum presque intégré, besoin d'un coup de main

MessagePosté: Mer Mar 10, 2010 8:05 pm
par Naoki
Bonjour.

Je me permets de créer ce topic pour vous faire part de mon problème. Voilà, je tente désespérément d'intégrer mon forum phpbb3 au design de mon site, dans le bloc du contenu (le corps quoi). J'ai donc édité le fichier overall_header.html auquel j'ai ajouté le haut du code de mon site, le suivant:

Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<
head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Communauté EvoluNoob - Connaissances à portée de clic !</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/sliding.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/infobulle.css" />
</
head>
<
body>
<!--
 ==========================================================================================================================->
<
div id="header">
    <div id="membre">
        <div id="bienvenue">CONNEXION MEMBRE</div>
            <a href="" title="Se déconnecter" class="logout"></a>
            <form action="/modules/forum/ucp.php?mode=login">
                <table width="300" border="0" class="lgconnexion">
                <tr>
                    <td align="right" valign="middle">Pseudonyme:</td>
                    <td align="center" valign="middle"><label>
                    <input type="text" name="textfield" id="textfield" class="connexion" />
                    </label></td>
                </tr>
                <tr>
                    <td align="right" valign="middle">Mot de passe:</td>
                    <td align="center" valign="middle"><label>
                    <input type="password" name="textfield2" id="textfield2" class="connexion" />
                    </label></td>
                </tr>
                <tr>
                    <td align="center" valign="middle"><input name="input" type="submit" class="valider" value="Se connecter"/></td>
                    <td align="center" valign="middle"><a href="/modules/forum/ucp.php?mode=register" title="Créer un compte"><dd>S'inscrire sur le site</a></td>
                </tr>
                </table>
            </form>
    </div>
<!-- ================================================================================================================================== -->
    <div id="navbar">
        <ul>
            <li><a href="/index.php" title="La page d'
accueil du site, et ses news officielles">News officielles</a></li>
            <li><a href="
/articles.php" title="Retrouvez tous nos articles dans les domaines traités sur le site">Cours et tutoriels</a></li>
            <li><a href="
/downloads.php" title="Téléchargez tous nos fichiers gratuitement et en toute légalité">Fichiers download</a></li>
            <li><a href="
/forum.html" title="L'espace d'entraide et de discussion entre nos membres">Forum discussion</a></li>
            <li><a href="
/wiki.html" title="Zone contenant des articles en dehors des domaines de notre site">Espace wiki</a></li>
            <li><a href="
/galerie.html" title="Procurez-vous images et wallpapers pour votre ordinateur et appareils multimédias">Galerie images</a></li>
            <li><a href="
/liens.html" title="Tous les sites partenaires à EvoluNoob ou qui sont recommandés">Liens web</a></li>
            <li><a href="
/faq.html" title="Le guide de tout membre pour utiliser le site dans son intégralité">Faq</a></li>
            <li><a href="
/contact.php" title="Vous permet de prendre contact avec lun des membres de notre staff">Contact staff</a></li>
        </ul>
    </div>
</div>
<div id="
menu"><!-- DEBUT DU DIV MENU -->
<!-- ================================================================================================================================== -->
<div id="
menu_recherche">
    <div id="
titre">MOTEUR DE RECHERCHE</div>
        <div id="
haut"></div>
        <div id="
corps">
            <form method=get action="
http://www.google.com/search">
                Tapez votre recherche:<br>
                <input type=hidden name=ie value=windows-1252>
                <input type="text" size="20" name="q" class="search" VALUE="">
                <input type=hidden name=sitesearch value="localhost/">
                <input type=hidden name=hl value=fr>
                <input type="submit" name="mmt" class="valider" VALUE="Trouver">
            </form>
        </div>
        <div id="bas"></div>
</
div>
<!--
 ================================================================= -->
<
div id="menu_module">
    <div id="titre">SONDAGE</div>
    <div id="haut"></div>
          <div id="corps">
            <script language="javascript" src="http://www.monsitegratuit.com/services/sondage/mon_sondage.php?id=12737&skin=2"></script>
        </div>
    <div id="bas"></div>
</div>
<!-- ================================================================= -->
    <div id="menu_module">
        <div id="titre">CHAT BOX</div>
            <div id="haut"></div>
                <div id="corps">
                    <!-- DEBUT CODE SHOUTBOX E-tchat! -->
                    <iframe src="http://www.e-tchat.net/s4630/"
                    width="180" height="300" frameborder="0" scrolling="auto" allowtransparency="true"></iframe>
                    <!-- FIN CODE SHOUTBOX E-tchat! -->
                </div>
            <div id="bas"></div>
    </div>
<!-- ================================================================= -->
<div id="menu_bloc">
    <div id="titre">PARTENAIRES</div>
    <div id="haut"></div>
          <div id="corps">
            <center><a href="http://www.teamsilver.discutforum.com"><img src="http://www.evolunoob.com/ajouts/partenaires/teamsilver.png"></a><br />
            <a href="http://www.wizmania.fr"><img src="http://www.evolunoob.com/ajouts/partenaires/wizmania.png"></a><br />
            <a href="http://pspteck.fr"><img src="http://www.evolunoob.com/ajouts/partenaires/pspteck.png"></a></center>
        </div>
    <div id="bas"></div>
</div>
<!-- ================================================================= -->
<div id="menu_bloc">
    <div id="titre">PUBLICITE GOOGLE ADSENSE</div>
    <div id="haut"></div>
    <div id="corps">
        <center><script type="text/javascript"><!--
        google_ad_client = "pub-0403886903134714";
        /* Bloc gauche site */
        google_ad_slot = "7351787777";
        google_ad_width = 160;
        google_ad_height = 600;
        //-->
        </script>
        <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script></center>
    </div>
    <div id="bas"></div>
</div>
<!-- ================================================================================================================================== -->
</div><!-- FIN DU DIV MENU -->
<!-- ================================================================================================================================== -->
    <div id="content">
        <div id="titre_bloc_contenu">INTERFACE DU FORUM DE DISCUSSION</div>
            <div id="corps">


Puis, édité le fichier overall_footer.html et ajouté la fin de mon site, celui-ci:

Code: Tout sélectionner
</div>
        <div id="corpsbas"></div>
<!--
 ================================================================= -->
<
div id="titre_bloc_contenu">PUBLICITE GOOGLE ADSENSE</div>
    <div id="corps">
        <center><script type="text/javascript"><!--
        google_ad_client = "pub-0403886903134714";
        /* Bannière bas du site */
        google_ad_slot = "2194338524";
        google_ad_width = 468;
        google_ad_height = 60;
        //-->
        </script>
        <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script></center>
    </div> 
    <div id="corpsbas"></div> 
</div>
<div style="clear: both"></div>
<!-- ================================================================================================================================== -->
<div id="footer">
    <p>[ Copyright © 2010 EvoluNoob - Tous droits reserves aux auteurs respectifs ]__________________________________________________________[ <a href="termes.html" title="Consulter les conditions d'utilisation">Termes d'utilisation du site</a> | <a href="apropos.html" title="Petit récapitulatif de l'histoire du site">A propos</a> ]<!-- Design de <a href="http://www.creativegfx.fr" title="CreativeGFX.fr">XnEoZ</a> pour <a href="http://www.kitgraphique.net" title="KitGraphique.net">KitGraphique.net</a>--></p>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/infobulle.js"></script>
<script type="text/javascript" src="js/sliding.js"></script>
</html>


Vous aurez donc compris que l'intégralité du code du forum se trouve alors entre ces deux bouts de code de mon site:

Code: Tout sélectionner
<div id="titre_bloc_contenu">INTERFACE DU FORUM DE DISCUSSION</div>
            <div id="corps">
                   //le forum serait donc théoriquement ici.
              </div>
         <div id="corpsbas"></div> 


Maintenant, voici le résultat obtenu en direct d'EvoluNoob les amis ^^:

-> Forum EvoluNoob

Comme on peut le voir, il y a semble-t-il un problème du côté des css, comme si ceux de mon site, et ceux du forum étaient confrontés, car au début du chargement de la page, le forum semble être bien intégré, puis finalement, se trouve complètement décalé, le menu de même et le body prend la couleur de fond du forum alors qu'il devrait avoir les paramètres de ceux du site. Autre soucis, l'encodage qui ne semble pas gérer les accents...c'est un hic quand même.

Merci d'avance pour votre aide, j'espère avoir fournit le maximum d'informations pour cela !

REMARQUE: il se peut que dans le code, certaines parties n'aient pas de coloration syntaxique, mais je confirme que sous notepad++ et testé sur mon hébergeur, ces scripts fonctionnent correctement (suffit d'aller voir http://www.evolunoob.com/index.php).

Re: Mon forum presque intégré, besoin d'un coup de main

MessagePosté: Ven Mar 12, 2010 1:45 am
par Yoyo
Oui il peut y avoir des interférences entre le css de ton site et celui de ton forum. Pour remédier à cela il suffit de modifier les règles qui posent problème en les précisant.

Par exemple les règles du css de ton forum, au lieu d'être.

em { }

Elles changeront en #id_forum em { }

Comme ça le css du forum n'agira plus sur le css de ton site. C'est pour cela qu'il est toujours préférable de mettre des règles css très précises et jamais des vagues lorsque l'on crée le css d'un site web :)

Bonne soirée :)

Re: Mon forum presque intégré, besoin d'un coup de main

MessagePosté: Ven Mar 12, 2010 5:30 pm
par Naoki
Bonjour, et merci d'avoir répondu.

En clair, si j'ai bien pigé, je dois éditer les fichiers css du forum phpbb, et changer les noms des id pour pas me retrouver par exemple avec un id ou une class nommée pareille dans le css du site, et celle du forum. Sauf que body est obligatoire, et ce dans le css du site et du forum, ça risque donc également de créer un problème ingérable.

Bref, je pense que ton idée est la solution à mon problème, mais j'avoue avoir besoin de plus de détails quant à ce que je dois modifier exactement, quels fichiers, etc... Je te remercie d'avance !

Re: Mon forum presque intégré, besoin d'un coup de main

MessagePosté: Sam Mar 13, 2010 1:41 am
par Yoyo
Soit tu modifies les fichiers css directement puis tu supprimes ton cache.
Soit tu modifies le css en cache directement à travers l'administration de phpBB3.

Il n'y a pas besoin de body pour le forum, tu peux d'ailleurs le supprimer puisque tu en as déjà un dans ton site. En avoir 2 dans le code d'une page n'est pas une bonne idée :)

Re: Mon forum presque intégré, besoin d'un coup de main

MessagePosté: Sam Mar 13, 2010 12:54 pm
par Naoki
Ok, mais j'espère que ça ne créera pas de problèmes d'éditer les css de phpbb, notamment lors d'une mise à jour du forum.