ƛcademy đirt ¢ross Index du Forum
ƛcademy đirt ¢ross Index du ForumFAQRechercherS’enregistrerConnexion

Effectif

Adc»乙ЄӃЄѶΪŊ

Adc»Ҝaєिυא

Adc»StéphOouille

Musique
Découvrez la playlist Adc Forum avec Sum 41



 Bienvenue 
NEWS:Faite votre présentation , tel que celle que j'ai fait ici avec une photo de vous , la typo de votre pseudo etc. . .(Trés important)


Suite a un déménagement Kaefux sera dispo vers début Avril et nous feras de jolie serveurs et un jolie forum




NEW:Bloc musique dispo pour proposé de la musique dans le bloc , go dans la partie "Coin Fun"

           
Bloque Latérale pour le Forum

 
Poster un nouveau sujet   Répondre au sujet    ƛcademy đirt ¢ross Index du Forum -> Espace création & fun -> Tutoriels
Sujet précédent :: Sujet suivant  
Auteur Message
Crystalfire
Ami de la Team

Hors ligne

Inscrit le: 14 Mar 2011
Messages: 2
Masculin
Version TrackMania: United

MessagePosté le: Lun 14 Mar - 17:02 (2011)    Sujet du message: Bloque Latérale pour le Forum Répondre en citant

Yop all,


Bon voilà : à la demande de kaefux, je vais vous apprendre à rajouter des blocs sur le coté du forum comme je le fais ici ==> http://dfpteam.xooit.fr/index.php .

Bon, tout d'abord, vous devez savoir que rien est fait via l'interface d'administration et qu'il va falloire faire pas mal de progra web. On utilisera du HTML et du CSS et, si vous êtes novice dans la matière, je vous invite à faire un tour sur le Site Du Zéro pour y suivre les cours.
Donc voici le code source qui vous permettra afficher deux blocs sur le coté. Ce code est à copié à la suite dans le template "Overall Header". Je l'ai un peu modifié et rendu lisible pour vous ^^

Note : tout ce qui est écrit entre les balises <!-- --> n'est pas du code. C'est un commentaire. C'est très utile pour donner des informations et savoir où on est dans son code. N'hésitez pas à en abuser Okay



Code:
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


                             P A R T I E   G A U C H E 


     * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->


<table width="100%" border="0" cellspacing="0" cellpadding="8" class="bodyline">
   <tr> 
      <td colspan="2"> 
      <!-- Portal Style Layout with Left Column--> 
 
      </td> 
   </tr> 
   <tr> 
      <td align="center" width="135" valign="top">

      <!-- Left Column-->



      <!-- Début du premier bloc  -->

      <table width="170" cellpadding="3" cellspacing="1" border="0" class="forumline">
         <tr>
            <td align="center" width="100%" class="catHead" height="28"><span class="cattitle">Nom du bloc</span></td>
         </tr>
         <tr>
            <td class="row1" align="left" valign="top"><span class="mainmenu">

            <!--  Ici tu mets ce que tu veux dans le bloc  -->

           </td>
        </tr>
     </table>

     <!-- Fin du premier bloc -->


      <!-- Début du deuxième bloc  -->

      <table width="170" cellpadding="3" cellspacing="1" border="0" class="forumline">
         <tr>
            <td align="center" width="100%" class="catHead" height="28"><span class="cattitle">Nom du bloc</span></td>
         </tr>
         <tr>
            <td class="row1" align="left" valign="top"><span class="mainmenu">

           <!--  Ici tu mets ce que tu veux dans le bloc  -->

           </td>
        </tr>
     </table>

     <!-- Fin du deuxième bloc -->


     </td>

<!--Left Column-->


<td width="100%" valign="top">
<!--Forum-->






Bon, je l'avoue, ca pique un peu les yeux au début Cool Mais ne vous inquiétez pas, je vais tout bien vous expliquer comment faire en vous détaillant chaque partie Okay




L'enveloppe des Blocs :

Les bloc doivent avoir une "enveloppe pour bien s'intègrer au code. Par enveloppe je veux dire qu'il y a quelque chose qui qui dit où commencent les blocs, où se terminent les blocs et surtout où placer les blocs. Par contre, vu que ce n'est pas le sujet du tuto, je ne m'étendrais pas dessus. Je veux juste vous permetre de le localiser en cas de pépin car c'est la première chose à vérifier si il y a un problème.
Donc ce code est constitué de deux parties : une partie au début des blocs et un partie à la fin (d'où le terme de Enveloppe Razz ).
Voici donc comment il se présente :

Code:
<table width="100%" border="0" cellspacing="0" cellpadding="8" class="bodyline">
   <tr> 
      <td colspan="2"> 
      <!-- Portal Style Layout with Left Column--> 
 
      </td> 
   </tr> 
   <tr> 
      <td align="center" width="135" valign="top">

      <!-- Left Column-->



<!-- Ici seront placé tous les blocs  -->



      <!--Left Column-->

     </td>
<td width="100%" valign="top">
<!--Forum-->





Ajouter des blocs :

Maintenant que nous avons vu où l'on devait mettre les blocs, je peux commencé à vous expliquer comment paramètrer votre blocs. Tout d'abord, voyons à quoi ressemble un bloc :
Code:
<table width="170" cellpadding="3" cellspacing="1" border="0" class="forumline">
   <tr>
      <td align="center" width="100%" class="catHead" height="28"><span class="cattitle">Nom du bloc</span></td>
   </tr>
   <tr>
      <td class="row1" align="left" valign="top"><span class="mainmenu">

      <!--  Ici tu mets ce que tu veux dans le bloc  -->

      </td>
   </tr>
</table>


voilà xD

Bon, trève de plaisanterie ^^ . Nous avons trois paramètres importants pour modifier votre bloc et qui sont : la taille, le titre et le contenue.

- la taille : la taille du bloc est donné en pixel. Elle doit etre parametré pour chaque bloc. On peux très bien donner des valeurs différentes pour des blocs différent. C'est à vous de tester Okay
Pour modifier la taille, il faut modifier le paramettre "width", qui équivaut à la largeur, dans la première ligne :
Code:
<table width="170" cellpadding="3" cellspacing="1" border="0" class="forumline">


- le titre : le titre est donné un peu plus bas dans le code. On peux mettre ce que l'on veux biensur ^^ . Attention néenmoins à ne pas mettre trop de lettres : si le titre est plus large que le bloc, il y aura conflit et ca peux faire des choses ... surprenantes Razz
On modifie le titre dans la balise <span> du bloc, à la troisième ligne.
Code:
<td align="center" width="100%" class="catHead" height="28"><span class="cattitle">Nom du bloc</span></td>


- le contenu : de la même manière que le titre, vous mettez ce que vous voulez dans le bloc Smile Si vous mettez des lignes plus larges que le bloc, il y aura un retour à la ligne automatique. Donc pas de problème sur ce point. C'est aussi le contenue qui défini la longueur de votre bloc : plus il y aura de contenue et plus le bloc sera long. On ne peux pas paramettrer la longueur du bloc manuellement.
J'èspère que vous etes allé faire un petit tour sur le site du zéro parce que le contenue ne s'écrit qu'en HTML et CSS, donc je ne m'étendrai pas là dessus.
Voici un exemple de se que l'on peux mettre dans un bloc :
Code:
<!-- Links -->
   
<table width="170" cellpadding="3" cellspacing="1" border="0" class="forumline">
  <tr>
  <td align="center" width="100%" class="catHead" height="28"><span class="cattitle">Liens</span></td>
  </tr> 
  <tr>
  <td class="row1" align="left" valign="top"><span class="mainmenu">
 
    <marquee direction="up" width=135 height=135 scrollAmount=2>
    <a href="http://tm-ladder.com/"><img src="http://tm-ladder.com/img_liens/2.png" /></a>
    <a href="http://www.tmdirt.com/"><img src="http://nsa25.casimages.com/img/2011/02/02/110202033510850754.jpg" /></a>
    <a href="http://www.maniaplanet.com/"><img src="http://nsa25.casimages.com/img/2011/02/02/110202040917918671.png" /></a>
    <a href="http://www.game-sh.fr/"><img src="http://nsa25.casimages.com/img/2011/02/02/110202034157414534.png" /></a>
    <a href="http://www.tm-exchange.com/"><img src="http://nsa26.casimages.com/img/2011/02/02/11020203525456432.png" /></a>
    <a href="http://www.trackmania.com/fr/forum"><img src="http://nsa26.casimages.com/img/2011/02/02/110202041429600434.png" /></a>
    <a href="http://www.trackmania-carpark.com/"><img src="http://nsa25.casimages.com/img/2011/02/02/110202035540336624.png" /></a>
    <a href="http://www.tm-actu.com/"><img src="http://nsa25.casimages.com/img/2011/02/02/110202035425275520.png" /></a>
    <a href="http://www.tm-tube.com/video/22653/RCT+Comel+-+In+the+Future"><img src="http://nsa25.casimages.com/img/2011/02/02/11020204225068413.png" /></a>
    </marquee>

  </td>
  </tr>
</table>
<br />

<!-- Links -->





Voili voilou pour ce tuto. N'oubliez pas que l'on peux mettre autant de bloc que vous le voulez. N'hésitez pas non plus à écrire des commentaires dans votre code pour vous y retrouver. On néglige trop souvent leur importance Okay

Voici aussi le code de deux blocs qui sont utile et qui vous permettrons de faire des test. Tout d'abord un bloc de recherche rapide dans le forum :
Code:
<!-- Quick Search -->

<table width="170" cellpadding="3" cellspacing="1" border="0" class="forumline">
  <tr>
    <td class="catHead" align="center" height="28"><span class="cattitle">Quick Search</span></td>
  </tr>
  <tr>
    <td class="row1" align="center" width="100%">
<form action="{U_SEARCH}?mode=results" method="post" target="_top">
<input type="text" class="post" name="search_keywords" size="14" />
<input type="submit" class="mainoption" name="login" value="Go" /><br />
<span class="gensmall"><a href="{U_SEARCH}" class="gensmall">Recherche Avancée</a></span>
    </td></form>
  </tr>
</table>
<br />

<!-- Quick Search -->


et un bloc de recherche rapide Google :
Code:
<!-- Search Google -->

<table width="170" cellpadding="3" cellspacing="1" border="0" class="forumline">
  <tr>
  <td class="catHead" align="center" height="28"><span class="cattitle">Google Search</span></td>
  </tr>
  <tr>
  <td class="row1" align="center" width="100%">

<FORM method=GET action="http://www.google.com/search">
<A HREF="http://www.google.com/" target=_blank>
<IMG SRC="http://www.google.com/logos/Logo_25wht.gif" border="0"
ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text class="post" name=q size=14 maxlength=255 value="">
<INPUT type=submit class="mainoption" name=btnG VALUE="Search">

  </td></form>
  </tr>
</table>
<br />

<!-- Search Google -->



En espèrant que ce petit tuto ne soit pas trop compliqué et réalisable sans trop de difficultés. Et qu'il vous ai plus biensur Razz

Si vous avez des questions, des soucis, ou qu'il y a des incompréhension, n'hésitez pas Okay

PS : Désolé pour les fautes qui se serai glissé un peu partout mais j'ai la flemme de tout relire xD


Revenir en haut
Publicité






MessagePosté le: Lun 14 Mar - 17:02 (2011)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Kaefux
Fondateurs

Hors ligne

Inscrit le: 22 Fév 2011
Messages: 45
Masculin Verseau (20jan-19fev)
Version TrackMania: United

MessagePosté le: Lun 14 Mar - 17:38 (2011)    Sujet du message: Bloque Latérale pour le Forum Répondre en citant

Héhé , merci Crystal , j'étudie tous ça se soir et si j'ai un blème je te contact =D
_________________


Revenir en haut
Skype
Kaefux
Fondateurs

Hors ligne

Inscrit le: 22 Fév 2011
Messages: 45
Masculin Verseau (20jan-19fev)
Version TrackMania: United

MessagePosté le: Lun 14 Mar - 17:40 (2011)    Sujet du message: Bloque Latérale pour le Forum Répondre en citant

PAr contre comment on fait des liens hypertexte ? De la couleur ? et ou on met ces jolies codes ? ^^'
_________________


Revenir en haut
Skype
Crystalfire
Ami de la Team

Hors ligne

Inscrit le: 14 Mar 2011
Messages: 2
Masculin
Version TrackMania: United

MessagePosté le: Lun 14 Mar - 18:32 (2011)    Sujet du message: Bloque Latérale pour le Forum Répondre en citant

ah bah c'est c'est de la progra web ^^

Faut que tu lises les cours du site du zéro et que tu apprennes tout ca. Tu ne vas pas y arriver en un jour mais essaies déjà par toi mm d'écrire quelque petit trucs. Restes dans le simple au début : vois comment ca marche et acquière des réflexes.

Mais si t'as un problème sur un code que t'as écris, viens me voir ^^


Revenir en haut
Kaefux
Fondateurs

Hors ligne

Inscrit le: 22 Fév 2011
Messages: 45
Masculin Verseau (20jan-19fev)
Version TrackMania: United

MessagePosté le: Lun 14 Mar - 18:37 (2011)    Sujet du message: Bloque Latérale pour le Forum Répondre en citant

ok dac , bon bah plus qu'a m'y mettre x)
_________________


Revenir en haut
Skype
Contenu Sponsorisé






MessagePosté le: Aujourd’hui à 06:37 (2018)    Sujet du message: Bloque Latérale pour le Forum

Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    ƛcademy đirt ¢ross Index du Forum -> Espace création & fun -> Tutoriels Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  

Portail | Index | Panneau d’administration | faire son forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
T h è m e _ r é a l i s é _ p a r _ la _ g u i l d e _ M i t s u g a