AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-55%
Le deal à ne pas rater :
-54% LEGO Brique de rangement 6 tenons
14.99 € 32.99 €
Voir le deal

    Les forum sur deux colonnes [html/css]

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Dim 12 Fév 2012 - 13:54



    Vos forum sur deux colonnes

    Bonjour à vous,

    Je vais vous présenter aujourd'hui un tuto' qui a été très attendu, et dont la technique a été très demandée dans les commandes de codage. Taktiik s'est chargé de vous aider avec mon accord, mais je viens vous présenter ce tutoriel de façon plus "officielle., en espérant qu'il vous aide.

    Tout d'abord, quelques éléments d'indication :

    ▬ pour installer l'ensemble de ce qui est proposé sur votre forum vous n'avez pas besoin de grosses connaissances en codage, je dirais même aucune. Par contre, pour le personnaliser de façon simple (changer les couleurs...) vous devez savoir reconnaitre les codes (donc identifier un code couleur, identifier le nom d'un élément, etc...).
    ▬ pour personnaliser et modifier ce code vous devez avoir des connaissances en codage, suffisamment pour quoi enlever, quoi laisser, à quoi correspond telle "class" etc...
    ▬ vous constaterez que le codage est déjà assez poussé, avec des effets fluides et modernes. Vous avez donc concrètement plusieurs tutoriels en un dans ce message x)

    Si la mise en forme des forum sur deux colonnes (autrement dit l'intitulé du message) ne vous parle pas, voici en application directe sur un forum ce que ça donnera :

    ▬ Lien forum test ▬

    Vous avez donc :
    ▬ les forum sur deux colonnes
    ▬ la description de la catégorie qui apparait progressivement au dessus de l'image l'illustrant à son survol
    ▬ les sous-forum apparaissant progressivement au survol de la languette "voir les sous-forum".

    Je vais donc proposer ce tutoriel en deux partie : la première donne directement les codes, où les placer et comment les modifier de façon simple, pour ceux qui sont pressés ou n'y connaissent pas grand chose en html/css ; la seconde partie s'adresse aux autres et vous permet de comprendre de façon plus technique comment il est possible de réaliser cette apparence sur vos forum.

    Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.

    Avantage de cette mise en forme : elle permet de diminuer grandement la longueur de votre forum. Si votre forum est court, il n'est guère utile de l'utiliser si ce n'est juste pour "le style" qui peut-être vous plait.
    Inconvénient : cette mise en forme est détestée par IE... Très mal interprétée, ça devient le bordel sur vos forum si le navigateur utilisé est IE, et malheureusement c'est encore beaucoup le cas, malgré les progrès qu'ils font, ils ne sont toujours pas suffisamment à la page.


    Les Codes

    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.
    -> Attention, le contenu se trouve sur 3 messages.


    Vous devez avoir pour cette mise en forme 4 codes différents à placer. Il s'agit de :
    ▬ le template "index_box" ou "affichage des catégories"
    ▬ la feuille CSS
    ▬ les titres des catégories (sections)
    ▬ les descriptions des forum

    Commençons par le début, vous allez devoir entièrement modifier votre template "index_box". Je rappelle que les templates ne peuvent être modifiées que dans les versions phpBB2 et punBB de vos forum, et seulement à partir du compte fondateur du dit forum.
    L'intérêt dans notre cas est de tout détruire... pour tout reconstruire. S'il y'en a à qui ça fait peur, laissez tomber tout de suite la modification des templates XD. Sinon rassurez-vous, vous avez à tout moment la possibilité de supprimer votre template modifiée et donc de revenir au template par défaut. Il n'y a pas de réel danger à modifier un template.

    Indication importante : ce tutoriel est fait pour une certaine mise en forme dans la hiérarchie de votre forum Pour le mettre comme il faut, allez dans "Affichage" > Structure & hiérarchie. Choisissez de séparer les catégories sur l'index en niveau moyen. Pensez également à activer l'affichage des sous-forum pour qu'ils apparaissent dans la languette en allant dans Affichage > Structure & Hiérarchie > Liens vers les niveaux inférieurs > Oui / Oui avec image (au choix).

    HTML ▬ index_box

    Ouvrez votre template "index_box" accessible dans "Affichage" > Templates > Général.
    Sélectionnez l'intégralité de votre code et remplacez-le 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}<br />
     {CURRENT_TIME}<br />
     </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><br />
     <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
     <!-- END switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
     </td>
     </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->

    <div class="cate_titre"><span class="catetitre_bloc"></span>
      <span class="catetitre_content">{catrow.tablehead.L_FORUM}</span></div>

     <!-- END tablehead -->
     <!-- BEGIN cathead -->


     <!-- END cathead -->
     <!-- BEGIN forumrow -->
     

    <div class="forum_bloc">
    <div class="forum">
      
      <span class="forumlink">
      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
      </span>
      
      <div class="forum_contenu">
        {catrow.forumrow.FORUM_DESC}<br />
        
        <div class="icone_stats"><table><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
          <td><span class="stats_lastpost">
            <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
            <span class="lastpost">{catrow.forumrow.LAST_POST}</span>
            </span></td>
          </tr></table></div>
        
      </div>
      
      <div class="sous_forum">
        <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
        <span class="ouverture_sousforum">Voir les sous-forum</span>
      </div>
      
    </div>
    </div>


     <!-- END forumrow -->
     <!-- BEGIN catfoot -->

     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->

    <!-- END tablefoot --><!-- END catrow -->
    Vous ne rêvez pas, le code est largement moins long x).
    N'oubliez pas de valider la modification même après avoir enregistré (dans la liste des templates).


    CSS

    Passons maintenant à l'affichage du css. En effet, vous vous êtes peut-être fait quelques frayeurs en allant voir ce que donnait la modification du template SANS css... c'est un peu le bazar. Le CSS va arranger beaucoup de chose puisqu'il va tout mettre en forme.
    Allez donc dans "Affichage" > Couleurs > Feuille CSS.
    Copiez le code suivant :

    Code:
    /* MISE EN FORME DES CATEGORIES ET FORUMS */

    .cate_titre
    {
      clear: both;
      height: 100px;
      margin-top: 50px;
    }
    .catetitre_bloc
    {
    position: relative;
    z-index: 1;
    display: block;
    width: 90%;
    height: 20px;
    margin-left: auto;
    margin-right : auto;
    background-color: #a8a8a8;
    transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -htm-transform: rotate(5deg);
    }
    .catetitre_content
    {
    position: absolute;
    z-index: 2;
    display: block;
    width: 950px;
    margin-left: auto;
      margin-right: auto;
      margin-top: -40px;
    text-align: center;
    padding: 2px;
      border-bottom: 3px dotted #191817;
    }
    .catetitre
    {
    color: #454545;
    font-family: arial;
    font-size: 26px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #000000;
    }

    .forum_bloc
    {
      width: 950px;
      margin-left: auto;
      margin-right: auto;
      margin-top: -30px;
    }
    .forum
    {
    float: left;
    width: 460px;
    height: 250px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 50px;
    }
    a.forumlink
    {
      position: relative;
      z-index: 2;
      display: block;
      width: 100%;
      color: #454545;
      text-align: center;
    font-family: arial;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #000000;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    a.forumlink:hover
    {
      letter-spacing: 4px;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .forum_contenu
    {
      position: relative;
      z-index: 1;
      width: 98%;
      height: 90%;
      padding: 4px;
      margin-left: auto;
      margin-right: auto;
      margin-top: -8px;
      background-color: #d9d9d9;
      border-left: 1px dotted #191817;
      border-right: 1px dotted #191817;
      border-bottom: 1px dotted #191817;
      border-top: 5px solid #191817;
    }
    .description
    {
      display: block;
      width: 400px;
      margin: auto;
      height: 100px;
      overflow: hidden;
      border: 2px solid #9c9c9c;
      box-shadow: 1px 1px 1px #191817;
      -moz-box-shadow: 1px 1px 1px #191817;
      -htm-box-shadow: 1px 1px 1px #191817;
      -webkit-box-shadow: 1px 1px 1px #191817;
      -o-box-shadow: 1px 1px 1px #191817;
    }
    .description_contenu
    {
      position: absolute;
      display: block;
      width: 391px;
      height: 91px;
      overflow: auto;
      background-color: #191817;
      font-size: 10px;
      color: #9c9c9c;
      text-align: justify;
      padding: 5px;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .description_contenu:hover
    {
      opacity: 0.8;
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      filter: alpha(opacity=80);
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .icone_stats
    {
      width: 300px;
      margin: auto;
      margin-top: -30px;
    }
    .stats_lastpost
    {
      display: block;
      width: 160px;
      height: 80px;
      margin-left: 10px;
      background-color: #c8c8c8;
      border: 1px solid #b5b5b5;
      padding: 5px;
      text-align: center;
    }
    .stats
    {
      display: block;
      margin-bottom: 5px;
      border-bottom: 1px dotted #b5b5b5;
      padding-bottom: 5px;
      font-size: 10px;
      color: #8f8f8f;
    }
    .lastpost
    {
      display: block;
      font-size: 11px;
    }
    .sforum
    {
      position: relative;
      z-index: 3;
      display: block;
      height: 0;
        background: #191817;
      color: #b5b5b5;
      overflow: hidden;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .ouverture_sousforum
    {
      position: relative;
      z-index: 3;
      display: block;
      float: right;
      width: 120px;
      margin-right: 20px;
      background: #191817;
      color: #b5b5b5;
      font-size: 11px;
      text-align: center;
      padding: 4px;
      -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    }
    .sous_forum:hover .sforum
    {
      height: 50px;
      background: #191817;
      color: #b5b5b5;
      padding: 4px;
      overflow: auto;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .sous_forum a
    {
      color: #b5b5b5 !important;
      text-shadow: 1px 1px 0px #000000;
    }
    .sous_forum a:hover
    {
      color: #ffffff !important;
    }
    Le résultat est un peu mieux, mais il manquera fatalement les titres de catégorie qui sont trop petits et la description du forum qui n'est pas présente ou mal mise en forme selon les cas.


    Les Titres de catégorie

    Ce sont les titres écris en gros au dessus du rectangle gris penché. Il est impossible de modifier complètement ce titre par le css seul, il faut également changer tout les intitulés de titre Ca peut paraitre compliqué mais ça ne l'est pas, d'autant qu'il n'y en a pas 50 sur vos forum.
    C'est très simple, votre titre doit se présenter sous cette forme :

    Code:
    <span class="catetitre">Votre 1ère catégorie</span>
    Remplacez juste à chaque fois le texte "Votre 1ière catégorie" par votre titre, le reste ne change pas.


    Les Descriptions de forum

    On en voit le bout. Maintenant les descriptions de forum à mettre en forme, il faut qu'elles soient toutes sur le même schéma à savoir :

    Code:
    <div class="description">
    <span style="display: block; width: 400px; height: 100px; background: url(http://www.1001stages.com/photos/rubrique/hd/ecriture-de-nouvelles-1122.jpg) center center no-repeat;">
    <span class="description_contenu">Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.</span>
    </span>
    </div>
    L'adresse de l'image entre parenthèse est votre image de catégorie. Seul 400x100px de l'image se voient, mais votre image peut être plus grande, vu qu'elle est placée en fond. Cependant, afin que votre image soit la plus centrée possible, je vous conseille de faire vos propres images à la dimension de 400x100px.
    Le texte ressemblant à du Latin ici est le contenu de la description de votre catégorie. S'il est trop long, un scroll apparaitra automatiquement.

    Et voilà !

    Il ne reste plus qu'à.... personnaliser Wink.

    Rappel : n'oubliez pas le crédit à Never-Utopia svp ! C'est important pour nous et pour que vous puissiez bénéficier de toutes les nouveautés pour vos forum à la pointe du css Wink

    Tutoriels suivants conseillés :
    - Coupler "forum en 2 colonnes" et "catégories en bloc"
    - Placer facilement des éléments dans un bloc (forum)

    Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Sparrow-style le Dim 8 Déc 2013 - 12:12, édité 8 fois



    sign
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Dim 12 Fév 2012 - 13:55

    Personnaliser !

    La personnalisation se fera essentiellement via le css, surtout si vous n'êtes pas à l'aise en codage, ne vous aventurez pas trop à modifier le template.

    Sachez das un premier temps qu'un code css est composé de plusieurs éléments :
    1) le nom de l'élément auquel s'applique le code, précédé d'un point "." ou d'un "#" selon les cas.
    2) les propriétés appliquées à cet élément, contenues entre accolades {...} et qui sont tout les styles que l'on va appliquer à l'élément nommé.

    En personnalisant, vous n'avez pas à toucher aux noms, mais uniquement à ce qui se trouve entre accolades.


    Le titre de catégorie

    Tout les noms en début de code css portant le mot "cate" (pour "catégorie") sont relatifs au titre de catégorie. Il y a pas mal de code car le rectangle gris penché est un élément à lui seul, par dessus lequel se place ensuite le titre et son soulignement en points.

    Code:
    .catetitre_bloc
    {
    position: relative;
    z-index: 1;
    display: block;
    width: 90%;
    height: 20px;
    margin-left: auto;
    margin-right : auto;
    background-color: #a8a8a8;
    transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -htm-transform: rotate(5deg);
    }

    Ceci est donc votre rectangle, par défaut en gris clair. Pour changer sa couleur vous devez changer cette ligne :

    Code:
    background-color: #a8a8a8;

    en remplaçant le code couleur par un autre de votre choix.

    Changer le soulignement du titre (ici le soulignement avec les points gris foncés) :

    Code:
    border-bottom: 3px dotted #191817;

    Remplacez le "dotted" par "solid" pour avoir un trait plein, par "dashed" pour des pointillées, etc...

    Voici maintenant le code du titre avec les explications à chaque ligne :

    Code:
    .catetitre
    {
    color: #454545; => couleur du titre
    font-family: arial; => police du titre
    font-size: 26px; => taille du texte
    font-weight: bold; => met le texte en gras
    text-transform: uppercase; => force le texte en majuscule
    letter-spacing: 1px; => espace les lettres de 1px
    text-shadow: 1px 1px 0px #000000; => met une ombre au texte
    }

    A vous de changer ce que vous souhaitez dans ce titre.


    Le bloc forum

    Dans mon cas le "bloc forum" contenant le titre et le cadre gris clair est "invisible", dans le sens où il n'a ni bordure ni fond. Il sert uniquement de "boite" dans laquelle les autres éléments sont placés.


    Le titre de forum (forumlink)

    Code:
    a.forumlink
    {
      position: relative;
      z-index: 2;
      display: block;
      width: 100%;
      color: #454545; => changer la couleur
      text-align: center;
    font-family: arial; => changer la police
    font-size: 18px; => la taille
    font-weight: bold; => texte en gras
    text-transform: uppercase; => texte en majuscule
    letter-spacing: 1px; => espacement des lettres
    text-shadow: 1px 1px 0px #000000; => ombre de texte
    }
    a.forumlink:hover
    {
      letter-spacing: 4px; => espacement des lettres
    }

    Le reste du code était pour faire en sorte que la transition soit lente ce qui donne cet effet animé au survol.


    Le contenu du forum

    Code:
    .forum_contenu
    {
      position: relative;
      z-index: 1;
      width: 98%;
      height: 90%;
      padding: 4px;
      margin-left: auto;
      margin-right: auto;
      margin-top: -8px;
      background-color: #d9d9d9; => couleur de fond
      border-left: 1px dotted #191817; => bordure gauche
      border-right: 1px dotted #191817; => bordure droite
      border-bottom: 1px dotted #191817; => bordure basse
      border-top: 5px solid #191817; => bordure haute
    }

    Evitez de changer les tailles si vous n'y connaissez rien, car généralement un changement de taille implique d'autres adaptations de taille ailleurs, sur d'autres codes. Vous risquez de vous embrouiller...

    La Description du forum

    Code:
    .description
    {
      display: block;
      width: 400px;
      margin: auto;
      height: 100px;
      overflow: hidden;
      border: 2px solid #9c9c9c; => bordure
      box-shadow: 1px 1px 1px #191817; => ombre (coce normal)
      -moz-box-shadow: 1px 1px 1px #191817; => ombre (code forefox)
      -htm-box-shadow: 1px 1px 1px #191817; => etc... (les dernières lignes signifient la même chose, simplement adaptées pour différents navigateurs afin d'optimiser la lecture)
      -webkit-box-shadow: 1px 1px 1px #191817;
      -o-box-shadow: 1px 1px 1px #191817;
    }

    => ce code est l'ensemble du bloc description, il donne une bordure et une légère ombre au block.


    Code:
    .description_contenu
    {
      position: absolute;
      display: block;
      width: 391px;
      height: 91px;
      overflow: auto;
      background-color: #191817; => couleur de fond
      font-size: 10px; => taille du texte
      color: #9c9c9c; => couleur de texte
      text-align: jutsify; => alignement du texte
      padding: 5px;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .description_contenu:hover
    {
      opacity: 0.8;
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      filter: alpha(opacity=80);
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }

    => c'est le code du texte qui apparait au survol, les éléments à modifier sont dans le début du code : la couleur de fond et d'écriture.


    Le cadre de stats et dernier message

    Code:
    .stats_lastpost
    {
      display: block;
      width: 160px; => largeur
      height: 80px; => hauteur
      margin-left: 10px; => marge de droite
      background-color: #c8c8c8; => couleur de fond
      border: 1px solid #b5b5b5; => bordure
      padding: 5px;
      text-align: center; => alignement du texte
    }


    Stats et dernier message

    Code:
    .stats
    {
      display: block;
      margin-bottom: 5px;
      border-bottom: 1px dotted #b5b5b5; => bordure basse séparant du coup les deux éléments
      padding-bottom: 5px;
      font-size: 10px; => taille de texte
      color: #8f8f8f; => couleur de texte
    }
    .lastpost
    {
      display: block;
      font-size: 11px; => taille de texte
    }


    Sous-forum

    Code:
    .sforum (bloc contenant les sous-forum non déplié)
    {
      position: relative;
      z-index: 3;
      display: block;
      height: 0;
        background: #191817; => couleur de fond
      color: #b5b5b5; => couleur de texte
      overflow: hidden;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .ouverture_sousforum (languette servant à ouvrir)
    {
      position: relative;
      z-index: 3;
      display: block;
      float: right; => place la languette à droite)
      width: 120px; => largeur
      margin-right: 20px; => marge droite
      background: #191817; = couleur de fond
      color: #b5b5b5; => couleur du texte
      font-size: 11px; => taille du texte
      text-align: center; => alignement du texte
      padding: 4px;
      -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    }
    .sous_forum:hover .sforum (bloc contenant les sous-forum une fois déplié)
    {
      height: 50px;
      background: #191817; => couleur de fond
      color: #b5b5b5; => couleur
      padding: 4px;
      overflow: auto;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .sous_forum a (liens des sous-forum)
    {
      color: #b5b5b5 !important; => couleur du lien
      text-shadow: 1px 1px 0px #000000; => ombre
    }
    .sous_forum a:hover (liens des sous-forum survolés)
    {
      color: #ffffff !important; => couleur du lien
    }


    Dernière édition par Sparrow-style le Dim 12 Fév 2012 - 19:01, édité 1 fois



    sign
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Dim 12 Fév 2012 - 14:25

    Comprendre ...


    Comment réaliser des colonnes avec les forum ?

    Le problème majeur et celui qui nous enlève pas mal de liberté est que les codes FA nous propose de modifier la structure des forum... mais de tous à la fois. Dans le template, nous avez l'impression de n'avoir qu'un exemplaire de forum qui ensuite va en fait se répéter pour chaque. Pas moyen dans ce cas de créer un tableau avec deux colonnes pour mettre les forum dedans.

    Du coup, la solution est autre. Dans mon cas, j'ai trouvé une solution (qui n'est certainement pas la seule et peut-être pas non plus la meilleure) qui consiste à mettre les blocs forum en "flottement". Le flottement ("float") possède des avantages, mais il est normalement à utiliser avec modération car pas toujours bien compris par les navigateurs, et c'est bien le souci que nous avons avec IE d'ailleurs. On vous dira probablement que pour un résultat propre il y a des fois où rien ne remplace un tableau. Lorsqu'il n'est pas possible d'en utiliser, on prend des solutions alternatives. Le float est celle qui m'a parue la plus évidente.

    J'ai donc crée un bloc (forum_bloc) qui permet de définir la largeur totale des deux blocs afin qu'ils puissent se positionner côte à côte. Ensuite, j'ai défini le bloc intérieur contenant l'ensemble des informations d'un seul forum, qui lui est plus petit que la moitié de la largeur totale (il faut compte qu'il y a une marge au milieu des deux blocs forum). Ce bloc est en float left (flottement gauche), et donc tout les blocs s'alignent ainsi, vu qu'ils font la même taille (il faut leur imposer une taille fixe).
    L'intérieur est à remplir comme vous le souhaitez avec les éléments des forums !

    Pour ceux qui voudraient partir des blocs pour les personnaliser à leur guise, voici le code des templates sur lequel vous devez partir :

    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}<br />
             {CURRENT_TIME}<br />
             </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><br />
             <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
             <!-- END switch_user_logged_in -->
             <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
       </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->

    <div class="cate_titre"><span class="catetitre_bloc"></span>
      <span class="catetitre_content">{catrow.tablehead.L_FORUM}</span></div>

       <!-- END tablehead -->
       <!-- BEGIN cathead -->


       <!-- END cathead -->
       <!-- BEGIN forumrow -->
       

    <div class="forum_bloc">
    <div class="forum">
     

     
    </div>
    </div>


       <!-- END forumrow -->
       <!-- BEGIN catfoot -->

       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->

    <!-- END tablefoot --><!-- END catrow -->

    N'oubliez pas que vous pouvez à tout moment regarder le template de base (le lien est en dessous de la fenêtre de code du template) afin de prendre les éléments pour les replacer dans votre code.


    Dernière édition par Sparrow-style le Dim 12 Fév 2012 - 19:02, édité 2 fois



    sign
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 28 Mar 2013 - 14:07

    [Zut je voulais juste alléger en enlevant une ou deux pages de réponse et j'ai tout enlevé U_U, bref, les 1000 et quelques réponses ont été divisées pour que le sujet reste en place tel quel]



    sign
    katia06
    katia06
    FémininAge : 55Messages : 203

    Jeu 28 Mar 2013 - 16:55

    oh on ne voit plus rien
    ben alors sparrow il faut arrêter de faire des bêtises Razz



    bibi0712
    bibi0712
    FémininAge : 46Messages : 66

    Jeu 28 Mar 2013 - 18:58

    Eh bien du coup je redis merci encore une fois ^^
    Noob's
    Noob's
    MasculinAge : 30Messages : 129

    Jeu 28 Mar 2013 - 21:25

    Encore merci alors Razz
    Draigon
    Draigon
    MasculinAge : 27Messages : 20

    Ven 29 Mar 2013 - 2:59

    Merchi cher ami Very Happy
    Cocotawa
    Cocotawa
    FémininAge : 28Messages : 33

    Ven 29 Mar 2013 - 10:24

    Merci beaucoup, c'est exactement ce qu'il me fallait Very Happy
    bianca ~♥~
    bianca ~♥~
    FémininAge : 56Messages : 111

    Ven 29 Mar 2013 - 17:52

    Merci!



    Les forum sur deux colonnes [html/css] Coco_c11
    Bavouille
    Bavouille
    FémininAge : 34Messages : 61

    Ven 29 Mar 2013 - 18:08

    ah j'ai déjà utilisé le tuto mais j'ai besoin de revoir un truc pour modifier certaines choses du coup je poste un message ^^ merci encore pour le tuto
    RozenBreizh
    RozenBreizh
    FémininAge : 33Messages : 1411

    Ven 29 Mar 2013 - 20:31

    Encore merci pour le tuto - oui j'ai envie d'utiliser ton code aussi <3
    Arcanata
    Arcanata
    MasculinAge : 30Messages : 18

    Ven 29 Mar 2013 - 21:06

    Merci :)
    patate_masquey
    patate_masquey
    MasculinAge : 31Messages : 73

    Ven 29 Mar 2013 - 21:45

    merci
    Kripterya
    Kripterya
    FémininAge : 38Messages : 98

    Sam 30 Mar 2013 - 4:45

    i though that i already post over here,thank! ^^
    Sparky59
    Sparky59
    FémininAge : 24Messages : 54

    Sam 30 Mar 2013 - 10:20

    Bravo ! C'est superbe.
    Leiden
    Leiden
    FémininAge : 34Messages : 25

    Sam 30 Mar 2013 - 12:36

    Merci !
    Kamesora
    Kamesora
    FémininAge : 32Messages : 93

    Sam 30 Mar 2013 - 12:54

    merci beaucoup
    Boou
    Boou
    FémininAge : 31Messages : 50

    Mar 6 Mai 2014 - 16:58

    Merci beaucoup c:
    Ashem
    Ashem
    FémininAge : 39Messages : 255

    Mer 7 Mai 2014 - 10:24

    Merci
    Asha
    Asha
    FémininAge : 29Messages : 16

    Jeu 8 Mai 2014 - 1:30

    Et encore une fois. )
    Neko-Rika
    Neko-Rika
    FémininAge : 25Messages : 115

    Jeu 8 Mai 2014 - 9:20

    Merci !
    Ailou ~3
    Ailou ~3
    FémininAge : 24Messages : 61

    Jeu 8 Mai 2014 - 13:28

    merci
    avatar
    Narlya
    FémininAge : 22Messages : 20

    Ven 9 Mai 2014 - 20:38

    Ah oui je connais ce genre de catégorie je trouve ça sympa ! ^^ merci du partage ! ^^
    Shuna
    Shuna
    FémininAge : 30Messages : 137

    Sam 10 Mai 2014 - 15:29

    merci j'adore *^*
    Contenu sponsorisé


      La date/heure actuelle est Mar 15 Oct 2024 - 9:24