Templates et CSS

[Vicsius]

Bonjour à tous, j'ai passé mon forum initialement en version Invision à une version en phpBB2 où je suis pour être franc pas mal perdu entre les Template et l'addition de ceux-ci au CSS, après plusieurs recherche (souvent infructueuses) je n'es réussi qu'à une seule chose et donc là je viens vous demander votre pour m'orienter vers des tutaux ou encore si vous-même avez les réponse, pour mes autres modofication

j'ai mis un haut et un pied de page mais je n'es pas trouver comment mettre les côtés du cadre (le tout en image) comment puis-je faire cela???

J'aimerais mettre une image en fond de mes catégorie comme là:


J'aimerais aussi pouvoir déplacer les icônes new/old/lock

et enfin (pour le moment) je voudrais changer le QEEL pour le faire à peu près de la même façon que celui-là:


Voici mon template index_box que j'ai modifier:

Spoiler:

le template overall_header modifié aussi:

Spoiler:

et mon CSS:

Spoiler:

Merci de votre aide^^

[SoraNoHime]

Bonjour

pouvez-vous me fournir un schéma de ce que vous désirez exactement. Cela sera plus simple plus nous de le personnaliser à votre gout.

Cordialement.

[Vicsius]

Je pense que vous voulez parler du QEEL, donc voici ce à quoi je pense:

Spoiler:

Il aurait une taille final de 800 x 500
le 1 correspond à une image de fond
le 2 Aux groupe de couleurs différente en lien cliquable
le 3 Au memmbres connecté aux cours des dernières 24h
le 4 au nombres de poste/nmb de membres
et en 5 les membre en ligne

[SoraNoHime]

Merci de me faire un schéma pour les catégories aussi ^^. où alors vous désirez juste y mettre une image de fond et enlever le tour ?

Pour le tout, cela peu me prendre un peu de temps. N'hésitez pas à upper votre sujet (1 fois par 24h) si besoin.

Cordialement.

[Vicsius]

Je souhaite juste y mettre une image de fond oui j'ai comme sur le screen déjà fusionné les deux 1ère colones.

Merci de votre aide^^

[SoraNoHime]

J'aimerais aussi pouvoir déplacer les icônes new/old/lock

Merci de me préciser l'endroit ^^

Sinon vous pouvez déjà remplacer votre index_box par celui-ci :

Code:

    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
      <tr>
          <td valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <span class="gensmall">{LAST_VISIT_DATE}

            {CURRENT_TIME}

            </span>
            <!-- END switch_user_logged_in -->
            <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
          </td>
          <td class="gensmall" align="right" valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>

            <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

            <!-- END switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
      </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table class="catfond" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
          <th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      </tr>
      <!-- END tablehead -->
      <!-- BEGIN cathead -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td colspan="{catrow.cathead.INC_SPAN}" width="100%">
            <h{catrow.cathead.LEVEL} class="hierarchy">
                <span class="cattitle">
                  <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                </span>
            </h{catrow.cathead.LEVEL}>
          </td>
          <td colspan="3" align="right"> </td>
      </tr>
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
      <tr>
          <!-- BEGIN inc -->
          <td width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
          <!-- END inc -->
          <td align="center" valign="middle">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
          <td colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
            <h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="forumlink">
                    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

                </span>
            </h{catrow.forumrow.LEVEL}>
              <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
            <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                <table width="100%"><tr><td>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</td></tr></table>
            </span>
          </td>
          <!-- BEGIN forum_link_no -->
          <td align="center" valign="middle" height="50" witdh="50">
    <div class="gensmall"><b>Sujets :</b> {catrow.forumrow.TOPICS} | <b>Messages :</b> {catrow.forumrow.POSTS}</div><br>
            <div class="lastpost">{catrow.forumrow.LAST_POST}</div>
          </td>
          <!-- END forum_link_no -->
          <!-- BEGIN forum_link -->
     

      <td align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
          <!-- END forum_link -->
      </tr>
      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
      <tr>
          <!-- BEGIN inc -->
          <td width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
      </tr>
      <!-- END catfoot -->
      <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

et rajoutez dans votre css :

Code:

/*Titre des catégories*/
.secondarytitle, .secondarytitle h2 {
background-color: transparent;}

.catfond {
background-image: url('lien de votre image');
background-repeat: no-repeat;
background-position:top center;
height: hauteur de votre imagepx;
width: largeur de votre imagepx;}

Personnalisez le .catfond avec le lien de votre image , sa hauteur et sa largeur. enregistrez.

Pour le qeel, veuillez repérer ceci dans votre template index_body cette fois ^^ (ne pas confondre)

Code:


<!-- 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="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}

      {TOTAL_USERS}

      {NEWEST_USER}</span></td>
   </tr>
   <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}

      {RECORD_USERS}

      

      {LOGGED_IN_USER_LIST}</span></td>
   </tr>
   {L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}
   <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}

            <!-- 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 -->

remplacez le par :

Code:

<!-- BEGIN disable_viewonline -->
<center>
<table width="800" height="500" class="qeel" cellspacing="10" cellpadding="0">
   <tr>
      <td>
         <table width="100%">
            <tr>
               <td valign="top" class="zone1" width="30%">
                  <span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span>
               </td>
               <td width="5"> </td>
               <td valign="top" class="zone2" width="30%">
                  <table class="connect24" valign="top">{L_CONNECTED_MEMBERS}</table>
               </td>
               <td width="5"> </td>
               <td valign="top" class="zone3" width="30%">
                  <span class="gensmall">{TOTAL_POSTS}

                  {TOTAL_USERS}


                  {NEWEST_USER}


                  {RECORD_USERS}</span>


                  <!-- BEGIN switch_chatbox_activate -->
                  <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}

                  <!-- 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>
                  <!-- END switch_chatbox_activate -->
               </td>
            </tr>
         </table>
      </td>
   <tr>
      <td valign="top" class="zone4" width="29%">
         <center><div class="memconnect"><span class="gensmall">{TOTAL_USERS_ONLINE}

         

         {LOGGED_IN_USER_LIST}</span></div></center>
      </td>
   </tr>
</table>
</center>
<!-- END disable_viewonline -->

et dans votre css ajoutez :

Code:

.qeel {
background-image:url("http://www.monsite.com/images/fond.png");
background-repeat : no-repeat;
height : px;
width : px;
padding : 10px:
}

.zone1{
margin-left : 10px;
margin-right : 10px;
border : 1px solid #ff0000;
height : 375px;
}

.zone2{
margin-left : 10px;
margin-right : 10px;
border : 1px solid #ff0000;
height : 375px;
}
.connect24 .row1 {
background: none !important;
}

.zone3{
margin-left : 10px;
margin-right : 10px;
border : 1px solid #ff0000;
height : 375px;
}

.zone4{
margin-left : 10px;
margin-right : 10px;
height : 75px;
}

.memconnect{
border : 1px solid #ff0000;
width : 400px;
height : 75px;
}

Personnalisez le .qeel comme pour le .catfond plus haut avec le lien de votre image , sa hauteur et sa largeur. enregistrez.

Tout les changements suivants devraient se faire par la css par la suite, sauf si vous voulez mettre les groupes différemment. Dîtes moi si tout cela va.

Cordialement.

[Anzu]

Bonjour,

C'est inutile de faire 50 demandes dans le même sujet, on ne s'y retrouve plus.
Je vous invite donc à poster un nouveau sujet qui concernera l'une des demandes, donc soit le qeel, soit les catégories et de mettre un titre explicite pour chaque sujet

Cordialement.

[Vicsius]

Merci à vous déjà un gros travail pour moi en mois^^

Pour le fond des catégorie: j'ai beau chercher, ajouter des padding, border, margin (avec top/center/bottom) aucun moyen de déplacer l'image à l'horizontale (par-contre supprimer la ligne background-position ne change rien)

Pour le QEEL: que se soit dans la zone une, deux ou 3 si je veux l'augmenter un seul modifie les 3 et si je descent en dessous des 375px et bien cela ne la réduit pas (comme pour la zone4 si je descent en dessous des 75px sa ne la réduit pas), je peux mettre dans les margins une valeur de 1000 si je veux sa ne change rien. Et je voulais savoir se que je devait ajouter si je voulais changer les texte des groupe (par exemple: Admin, Modo, Membre, ect..) par des image qui resterais cliquable ???

Les îcones New/Old/Lock: j'aimerais juste les déplacer un peu plus au centre entre ma description de catégorie et mes sous forum (Image ne vous fiez pas trop à l'imge elle me sert juste comme point de repère dans mes changement se ne sera pas elle lorsque je finirais de d'instaler mon thème)

[Anzu]

Bonjour,

C'est inutile de faire 50 demandes dans le même sujet, on ne s'y retrouve plus.
Je vous invite donc à poster un nouveau sujet qui concernera l'une des demandes, donc soit le qeel, soit les catégories et de mettre un titre explicite pour chaque sujet

Cordialement.

Aurais je parler dans le vent ?

Edit: Si on vous demande cela, ce n'est pas pour vous embêter. Simplement, réfléchissez 30 secondes .. si chaque membre de ce forum postait plusieurs demandes dans un seul sujet, on ne s'en sortirait pas. Les sujets se doivent d'être résolus rapidement mais surtout efficacement. De plus, l'entraide concerne tous les membres et donc doit profiter à tous. Si en cherchant "chatbox" dans l'outil "rechercher", vous tombez sur un sujet qui parle à la fois de chatbox, de qeel, et de la barre de navigation, on ne s'y retrouverait pas.

[Vicsius]

Oup's désolé je n'avais pas vus votre poste, vue que Macema s'en occupe, je dois quand même refaire mes topics ???

[SoraNoHime]

Oup's désolé je n'avais pas vus votre poste, vue que Macema s'en occupe, je dois quand même refaire mes topics ???

Reposter l'un des deux sujets dans un nouveau message. Je reprendrais à la suite pour régler la css. Mettez un titre explicite.

Cordialement. ^^

[Vicsius]

D'accord merci, je vous met les liens:

QEEL: https://forum.forumactif.com/t307996-qeel-vicsius#2691813

Icône New/Old/Lock: https://forum.forumactif.com/t307997-deplacer-les-icones-new-old-lock#2691814

Fond des catégories: https://forum.forumactif.com/t307998-image-de-fond-des-categorie#2691817

[Invité]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif