AccueilRechercherS'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.


    Les forum sur deux colonnes [html/css]

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

    Dim 12 Fév 2012 - 13:54

    Rappel du premier message :



    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
    Rubis-Hope
    Rubis-Hope
    FémininAge : 28Messages : 46

    Sam 10 Mai 2014 - 18:56

    Ouha, c'est extra !
    C'est la première fois que je vois un tel style, je suis carrément épatée.
    Merci du partage
    Mephitis.
    Mephitis.
    FémininAge : 23Messages : 46

    Dim 11 Mai 2014 - 17:38

    Merci ! *w*
    Belle Morte
    Belle Morte
    FémininAge : 24Messages : 42

    Lun 12 Mai 2014 - 12:01

    Merci !
    Anonymous
    Invité

    Lun 12 Mai 2014 - 13:13

    Re-merci ^^
    avatar
    Golhbul
    MasculinAge : 39Messages : 16

    Lun 12 Mai 2014 - 17:36

    Merci
    servity
    servity
    MasculinAge : 49Messages : 82

    Lun 12 Mai 2014 - 18:50

    merci pour ce tutoriel



    Les forum sur deux colonnes [html/css] - Page 2 HadqjCkktw
    Dezaia
    Dezaia
    FémininAge : 27Messages : 40

    Mar 13 Mai 2014 - 13:23

    Merci du partage, j'adore



    Les forum sur deux colonnes [html/css] - Page 2 69802510
    adhneryel
    adhneryel
    FémininAge : 30Messages : 5

    Mer 14 Mai 2014 - 6:46

    it is just for phpbb2-?
    Lisou
    Lisou
    FémininAge : 20Messages : 351

    Jeu 15 Mai 2014 - 15:13

    Ouah, trop la classe !
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Jeu 15 Mai 2014 - 15:50

    adhneryel : it's requires modification of the template, and it's only possible in version punbb and phphbb2, so... x)



    sign
    Ryosaki
    Ryosaki
    MasculinAge : 29Messages : 109

    Jeu 15 Mai 2014 - 18:11

    Merci



    Les forum sur deux colonnes [html/css] - Page 2 Tutog
    Shatters
    Shatters
    FémininAge : 27Messages : 57

    Ven 16 Mai 2014 - 0:05

    Merci ~



    J'ai appelé les bourreaux pour, en périssant, mordre la crosse de leurs fusils. J'ai appelé les fléaux, pour m'étouffer avec le sable, avec le sang. Le malheur a été mon dieu. Je me suis allongé dans la boue. Je me suis séché à l'air du crime. Et j'ai joué de bons tours à la folie. (Rimbaud)
    Glow
    Glow
    FémininAge : 21Messages : 94

    Ven 16 Mai 2014 - 18:57

    Merci beaucoup, ça va être super avec le reste c:
    Plume'
    Plume'
    FémininAge : 23Messages : 166

    Ven 16 Mai 2014 - 21:57

    Merci !
    Klemmeria
    Klemmeria
    FémininAge : 21Messages : 147

    Sam 17 Mai 2014 - 15:42

    merchi



    Les forum sur deux colonnes [html/css] - Page 2 Btqy
    Chatchoum
    Chatchoum
    FémininAge : 29Messages : 43

    Lun 19 Mai 2014 - 14:07

    merciiiiiiii
    Ryu-Kin
    Ryu-Kin
    FémininAge : 34Messages : 125

    Mar 20 Mai 2014 - 5:50

    merci beaucoup
    Kovu
    Kovu
    FémininAge : 20Messages : 256

    Mar 20 Mai 2014 - 9:03

    Merci !
    Hayate747
    Hayate747
    MasculinAge : 31Messages : 196

    Mar 20 Mai 2014 - 17:51

    Merci, une fois de plus !
    Titou2302
    Titou2302
    MasculinAge : 18Messages : 95

    Mar 20 Mai 2014 - 21:00

    Merci !

    Natsumi13
    Natsumi13
    FémininAge : 25Messages : 64

    Mer 21 Mai 2014 - 16:51

    Re - Merci
    Nerria
    Nerria
    FémininAge : 23Messages : 44

    Jeu 22 Mai 2014 - 17:26

    Superbes catégories, encore une fois ça va être très utiles surtout qu'on peu très bien les personnalisées à souhait ♥
    xToshi-Shûx
    xToshi-Shûx
    FémininAge : 29Messages : 39

    Ven 23 Mai 2014 - 16:11

    Merci.



    NMichiyo
    NMichiyo
    FémininAge : 32Messages : 4

    Sam 24 Mai 2014 - 7:50

    Merci
    Necro Seth
    Necro Seth
    MasculinAge : 32Messages : 30

    Sam 24 Mai 2014 - 12:19

    Tuto sympa pour optimiser un forum^^
    Contenu sponsorisé


      La date/heure actuelle est Jeu 5 Aoû 2021 - 19:01