Page blanche avec theme V-BlueBaby modifié

[Invité]

Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.

Connexion avec identifiant et mot de passe

[Kahashi]

Bonjour à tous !

Je me présente, je suis Kahashi, l'administrateur de http://www.ultimatepsp.fr/. Je cherche à changer de CMS, et je suis interessé par Pragma MX.

Je fais des tests en local et lorsque je met mon theme actuel, V-BlueBaby un peu modifié, il m'affiche une page blanche 

Comment remerdier à cela ? Pourriez-vous me dire les modifications à faire, ou même me les faire ? Dois-je vous envoyer mon thème ?

Merci d'avance !

[Diabolo]

Slt,
Envoi moi ce joli thème je regarde ça 

C'était pour un phpnuke platinium ?

[phi56360]

bonjour

j'ai le thème compatible pragmamx 

[Kahashi]

Diabolo => Merci bcp !

J'ai upoader mon theme ici : http://ultimatewebdesigner.free.fr/Kahashi/V-BlueBaby.rar

Et je t'ai envoyer le mot de pass de l'archive par MP.

phi56360 => Oué, mais le pbs c'est qu'il est asser modifier, mais merci quand même

[Diabolo]

En fait on va profiter de ce topic pour te montrer pas à pas comment tranformer ton thème en thème mx bcp + modifiable et configurable  car juste un fichier .html

1ere étape:

->Prend le thème mx-compact inclus dans la version compact de pragmamx et install le 
ouvre function.php dans le thème

global $bgcolor1;
$bgcolor1 = "#ffffff";
global $bgcolor2;
$bgcolor2 = "#f2f2f2";
global $bgcolor3;
$bgcolor3 = "#F6F6F6";
global $bgcolor4;
$bgcolor4 = "#f0fff0";
global $textcolor1;
$textcolor1 = "#333333";
global $textcolor2;
$textcolor2 = "#666666";

Change par les codes couleur de ton thème (theme.php):

Code:

$bgcolor1 = "#EEF2F7";
$bgcolor2 = "#C8D4E3";
$bgcolor3 = "#FFFFFF";
$bgcolor4 = "#FFFFFF";
$textcolor1 = "#FFFFFF";
$textcolor2 = "#333333";

[Kahashi]

Voila, j'ai changer.

J'attent les autres étapes

Encore merci.

[Diabolo]

-->Supprime le style.css de ton theme mx-compact

Garde ce fichier style.css au chaud pour + tard

-->Supprimer les images dans le répertoire /images/ de mx-compact laisse le rep /buttons/

-->Mettre toutes tes images de ton thème baby dans le répertoire /images/

[Diabolo]

On va mainteanant intégrer le header 

Ouvre theme.html de mx-compact

Recherche juste après le body:

Code:

<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 800px; height: 100%;">
  <tr>
   <td align="center" height="160" bgcolor="#FFFFFF"><img src="images/logo.jpg" alt="" width="790" height="150" border="0" usemap="#Map"></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"><tr>
<td height="25" width="40%">
<div class="tiny" style="color: #666666; background-color: transparent;">&nbsp;&nbsp;{SHOWDATE} {SHOWTIME} :
<span style="color: #99cc33; background-color: transparent;">{SHOWTOTALUSER} </span> Utilisateur(s) en ligne
</div>
</td>
    <td height="25" width="60%">
<div id="loginform" align="right" class="tiny">{LOGINFORM}</div>
</td>
</tr></table>
</td>
  </tr>

Correspond au header de  mx-compact

supprime ce code et remplace par:

Code:

<table border="0" cellpadding="0" cellspacing="0" width="100%"><!--DWLayoutTable-->
<!-- fwtable fwsrc="header.png" fwbase="header.jpg" fwstyle="Generic" fwdocid = "742308039" fwnested="0" -->
  <tr>
   <td><img src="themes/mx-compact/images/spacer.gif" width="468" height="1" border="0" alt="" /></td>
   <td width="100%"><img src="themes/mx-compact/images/spacer.gif" width="23" height="1" border="0" alt="" /></td>
   <td><img src="themes/mx-compact/images/spacer.gif" width="264" height="1" border="0" alt="" /></td>
   <td><img src="themes/mx-compact/images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td background="themes/mx-compact/images/header1.gif"><img src="themes/mx-compact/images/spacer.gif" alt="" name="header1" width="1" height="1" border="0" id="header1" />
   &nbsp;


</td>
   <td background="themes/mx-compact/images/header2.gif"><!--DWLayoutEmptyCell-->&nbsp;</td>
   <td><img name="header3" src="themes/mx-compact/images/header3.gif" width="264" height="24" border="0" id="header3" alt="" /></td>
   <td bgcolor="#BEC2C5"><img src="themes/mx-compact/images/spacer.gif" width="1" height="24" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="header4" src="themes/mx-compact/images/header4.jpg" width="468" height="64" border="0" id="header4" alt="" /></td>
   <td background="themes/mx-compact/images/header5.gif"><!--DWLayoutEmptyCell-->&nbsp;</td>
   <td><img name="header6" src="themes/mx-compact/images/header6.jpg" width="264" height="64" border="0" id="header6" alt="" /></td>
   <td bgcolor="#BEC2C5"><img src="themes/mx-compact/images/spacer.gif" width="1" height="64" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3" background="themes/mx-compact/images/header7.gif">
     <table width="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
         <td valign="bottom">
       <div class="navcontainer">
         <ul id="navlist">
            <li><a href="index.html" title="Page d'accueil">ACCUEIL</a></li>
            <li><a href="forums.html" title="Discussion">FORUM</a></li>
            <li><a href="downloads.html" title="Téléchargements">DOWNLOADS</a></li>
            <li><a href="content.html" title="Tutoriaux">TUTORIAUX</a></li>
      <li><a href="http://chat.ultimatepsp.fr/" title="Venez chattez !">CHAT</a></li>
            <li><a href="modules.php?name=Nuke_Map" title="Map">MAP</a></li>
         </ul>
       </div>
         </td>
         
         <td align="right">
          </td>
       </tr>
     </table></td>
   <td background="themes/mx-compact/images/header7.gif"><img src="themes/mx-compact/images/spacer.gif" width="1" height="30" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3" background="themes/mx-compact/images/header8.gif"><img name="header8" src="themes/mx-compact/images/spacer.gif" width="1" height="1" border="0" id="header8" alt="" /></td>
   <td background="themes/mx-compact/images/header8.gif"><img src="themes/mx-compact/images/spacer.gif" width="1" height="20" border="0" alt="" /></td>
  </tr>
</table>

Qui correspond au code html (seulement) du header de baby dans theme.php

Ps: tu remarquera que j'ai modifié le chemin des images en remplacant "V-BlueBaby" par mx-compact 

[Diabolo]

Tu remarquera que dans le code tu as des class qui correspondent à ton style.css

Ouvre le style.css de ton thème Vbaby et récupère les styles pour la barre de navigation:

Code:

.navcontainer
{
padding: 0px;
margin: 0px;
}
#navlist
{
padding: 0px;
margin: 7px;
margin/**/:0px; /* IE5/Win */
font: bold 12px Verdana, sans-serif;
}
#navlist ul
{
margin: 0;
padding: 0;
white-space: nowrap;
}

#navlist li
{
margin: 0;
display: inline;
list-style-type: none;
}

#navlist a {
padding: 0;
margin: 0;
}

#navlist a:link, #navlist a:visited
{
color: #333;
background: transparent;
text-decoration: none;
margin: 0px;
padding: 8px 10px !important;
height: 0px !important;
height /**/:30px; /* IE5/Win */
}

#navlist a:hover
{
color: #333;
background: White url(../images/menu_hover.gif) repeat-x;
text-decoration: none;
background-position: bottom;
border-left: 1px solid #7E7E7E;
border-right: 1px solid White;
padding-bottom: 8px;
padding-top: 0px;
}

Que tu enregistre sous style.css que tu placeras dans /mx-compact/style/
 

Normalement à ce stade, le header est en place 

[Kahashi]

Merci, le header ainsi que la barre de navigation fonctionnent bien 

[Diabolo]

On passe au footer

theme.html de mx compact
à la fin du code parès index on:

Code:

</tr>
      </table></td>
  </tr>
  <tr>
    <td height="39" bgcolor="#ffffff" align="center" class="footmsg" style="height: 39px; padding: 5px;">{FOOTMESSAGE}<br>{VIEWBENCH}</td>
  </tr>
</table>

=footer de mx-compact

remplace par:

Code:

<table border="0" cellpadding="0" cellspacing="0" width="100%"><!--DWLayoutTable-->
<!-- fwtable fwsrc="footer.png" fwbase="footer.jpg" fwstyle="Generic" fwdocid = "742308039" fwnested="0" -->
  <tr>
   <td width="100%"><img src="themes/mx-compact/images/spacer.gif" width="755" height="1" border="0" alt="" /></td>
   <td><img src="themes/mx-compact/images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td background="themes/mx-compact/images/footer1.gif">&nbsp;</td>
   <td background="themes/mx-compact/images/footer1.gif"><img src="themes/mx-compact/images/spacer.gif" width="1" height="35" border="0" alt="" /></td>
  </tr>
  <tr>
   <td align="center">
    </td>
   <td><img src="themes/mx-compact/images/spacer.gif" width="1" height="14" border="0" alt="" /></td>
  </tr>
  <tr>
   <td height="14" align="center" background="themes/mx-compact/images/footer3.gif"><a href="http://www.ultimatepsp.net" target="_blank"><img src="themes/mx-compact/images/powered.gif" alt="Designed by VIPixel.com" width="122" height="5" border="0" /></a></td>
   <td background="themes/mx-compact/images/footer3.gif"><img src="themes/mx-compact/images/spacer.gif" width="1" height="14" border="0" alt="" /></td>
  </tr>
</table>

Footer de Vbaby avec chemin modifié  , on verra les messages footer bcp + tard et les corrections du code html

[Kahashi]

Oki, ça marche 

[Diabolo]

Voila le code vbaby des blocs gauches:

Code:

function themesidebox($title, $content) {
        global $thename;

echo "<table bgcolor=\"#f7f9fb\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"155\">\n";
// Check if we have a blocktitle
        if (!empty($title)) {
echo "<tr>\n"
     ."<td><img name=\"box_r1_c1\" src=\"themes/V-BlueBaby/images/box_r1_c1.gif\" width=\"12\" height=\"13\" border=\"0\" alt=\"\"></td>\n" ."<td width=\"100%\" background=\"themes/V-BlueBaby/images/box_r1_c2.gif\"><img name=\"box_r1_c2\" src=\"themes/V-BlueBaby/images/spacer.gif\" width=\"1\" height=\"1\" border=\"0\" alt=\"\"></td>\n"
     ."<td><img name=\"box_r1_c3\" src=\"themes/V-BlueBaby/images/box_r1_c3.gif\" width=\"12\" height=\"13\" border=\"0\" alt=\"\"></td>\n"
     ."</tr>\n"
     ."<tr>\n"
     ."<td background=\"themes/V-BlueBaby/images/box_r2_c1.gif\"><img name=\"box_r2_c1\" src=\"themes/V-BlueBaby/images/spacer.gif\" width=\"1\" height=\"1\" border=\"0\" alt=\"\"></td>\n"
     ."<td valign=\"top\" bgcolor=\"#FFFFFF\">\n"
     ."<span class=\"leftcontent\">\n";
// ATTENTION THEMES DEVELOPER IF YOU WANT TO USE THE GRAPHICAL SIDEBLOCK TITLE CODE PLEASE GIVE THIS CREDIT
// Graphics sideblock title by Brumie, Dracos & E.Prodromou based on Rabbitt's code
                        $img_name=explode(" ",$title);
                        $img_nametwo=$img_name[0];
                        if(file_exists("themes/V-BlueBaby/images/blocks/$img_nametwo.gif")) {
                                echo "<IMG SRC=\"themes/V-BlueBaby/images/blocks/$img_nametwo.gif\"><br /><br />";
                        } else {
                                echo "$title<br />\n";
                        }
        }

echo "$content\n"
     ."</span>\n"
     ."</td>\n"
     ."<td background=\"themes/V-BlueBaby/images/box_r2_c3.gif\"><img name=\"box_r2_c3\" src=\"themes/V-BlueBaby/images/spacer.gif\" width=\"1\" height=\"1\" border=\"0\" alt=\"\"></td>\n"
     ."</tr>\n"
     ."<tr>\n"
     ."<td><img name=\"box_r3_c1\" src=\"themes/V-BlueBaby/images/box_r3_c1.gif\" width=\"12\" height=\"13\" border=\"0\" alt=\"\"></td>\n"
     ."<td background=\"themes/V-BlueBaby/images/box_r3_c2.gif\"><img name=\"box_r3_c2\" src=\"themes/V-BlueBaby/images/spacer.gif\" width=\"1\" height=\"1\" border=\"0\" alt=\"\"></td>\n"
     ."<td><img name=\"box_r3_c3\" src=\"themes/V-BlueBaby/images/box_r3_c3.gif\" width=\"12\" height=\"13\" border=\"0\" alt=\"\"></td>\n"
     ."</tr></table><br />\n";
}

Va falloir passer ça en html pour remplacer le code html bloc gauche de mx-compact:

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="2" style="margin-bottom: 5px;">
              <tr>
                <td class="boxtitle" width="21"><img src="images/arrow.gif" width="21" height="21" alt=""></td>
                <td class="boxtitle">{BLOCK_TITLE}</td>
              </tr>
              <tr>
                <td colspan="2" valign="top" class="boxcontent">{BLOCK_CONTENT}</td>
              </tr>
            </table>

Je te fais la modifs sous peu tu verras les changements 

[Diabolo]

1ere étape on met la colone de gauche à largeur des bloc de ton vbaby

Code:

<tr> <!-- START left_noblocks -->
          <td width="160" valign="top" class="blocksLeft">
<div id="leftcolumn" style="width: 160px;">

devient:

Code:

<tr> <!-- START left_noblocks -->
          <td width="155" valign="top" class="blocksLeft">
<div id="leftcolumn" style="width: 155px;">
            <!-- START blocks_left_loop -->

[Kahashi]

C'est fait 

(Ton avant dernier message, je devais faire qql chose ?)