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.

-54%
Le deal à ne pas rater :
-54% sur le jeu MOTOGP 21 sur PC
21.79 € 47.19 €
Voir le deal

    Mise en forme "flottante" des Sous-forums

    NyoTheNeko
    NyoTheNeko
    FémininAge : 27Messages : 5686

    Lun 2 Juin 2014 - 10:45

    Rappel du premier message :



    Sous-Forums



    Ceci est un code de sous-forums crée suite à la Demande de Dark6nika, ici.

    Version phbb2 ▬ CSS3 & HTML5 ▬ Ce que ça donne


    L'image des sous-forums pour indiquer nouveaux messages/pas de nouveaux messages/verrouillé doit être en 100px*140px. L'image de description de catégorie (la large image à droite) est en 350px*177px. Si vous modifiez ces tailles, vous pourriez avoir des problèmes de positions.


    Le code


    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\ Ceci est tout le template! /!\ :
    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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
     <tr>
              <td>
                <div class="secondarytitle"> {catrow.tablehead.L_FORUM}&nbsp;</div>
     <!-- END tablehead -->
     <!-- BEGIN cathead -->
     <div class="catte_titre">
              <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}>
     <!-- END cathead -->
     <!-- BEGIN forumrow -->
           <div class="sous_forum_contour">
            <div class="title_forum">
              <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}>
            </div>
     <div class="contour_description">
              <img class="img_cate" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              <div class="decription">
                <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
              </div>
            </div>
            <div class="forum_liens">
              <span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
            </div>
            <div class="position_last_mess">
              {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
              <div class="dernier_mess">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
              </div>
            </div>
           </div>
     <!-- END forumrow -->
     <!-- BEGIN catfoot -->
     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
                          </td>
              </tr>
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Code HTML à mettre dans chaque description de sous-forum:
    Code:
       <img src="URL_IMAGE_DE_DROITE_ICI" />
        <h3>
           Titre Quelconque -
        </h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet erat ac arcu hendrerit posuere. Donec eu justo vulputate, ultrices quam non, cursus dolor. Nam vitae ornare nulla. Vestibulum sit amet diam mi. Cras quis erat et purus lobortis consectetur. Morbi dui tortor, consectetur scelerisque diam non, sagittis commodo est. Suspendisse ultrices nibh id lobortis aliquet. Phasellus faucibus quam vitae bibendum blandit. Sed tristique nec lacus id tempus. Donec ornare, orci sed sagittis laoreet, tellus quam ornare nisl, in pretium nibh odio vitae neque. Praesent sit amet lectus vehicula, ornare justo in, pulvinar nisl. Nunc ligula lectus, sagittis at vehicula eget, laoreet id odio. Quisque a cursus neque. Nullam non semper lectus. Suspendisse ut neque purus. Etiam in iaculis ligula.
        </p>

    Le CSS:
    Code:
       /*********** DÉBUT CATÉS ***********/
        /* Couleur de fond d'intérieur du forum À retirer si vous avez prévu autre chose. */
        .bodyline {
          background-color: #DCE4E1;
        }

        /* Entoure les sousforums: va permettre de positionner les choses de façon absolue plus tard. */
        .sous_forum_contour {
          position: relative;
          height: 230px;
          width: auto;
          padding: 30px;
        }

        /* Permet de retirer les bords et la couleur de fond de base. */
        .forumline {
            background: none;
            border: none;
        }

        /* Mise en forme du titre de catégorie */
        .secondarytitle h2 {
          display: block;
          width: 100%;
          text-align: center;
          font-size: 18pt;
          color: black;
          font-weight: bold;
        }

        /* Mise en forme du titre de forum */
        .title_forum {
          width: 490px;
          text-align: right;
          margin-bottom: 10px;
        }

        /* Permet d'avoir la bonne couleur de lien */
        .title_forum .forumlink a, .title_forum .forumlink a:link, .title_forum .forumlink a:visited {
          color: black;
          font-size: 14pt;
          font-weight: bold;
          letter-spacing: 1px;
          transition: all ease 1s;
        }

        /* Titre du forum au passage de la souris */
        .title_forum .forumlink a:hover {
          color: #51A8AC;
          letter-spacing: 3px;
          text-decoration: none !important;
          transition: all ease 1s;
        }

        /* Crée la petite barre bleue qui suit le titre du forum */
        .title_forum:after {
          content:"";
          display: inline-block;
          height: 1px;
          width: 100px;
          margin: 5px;
          /* Couleur de la barre */
          background-color: #51A8AC;
          /* Permet de lui donner une ombre */
          box-shadow: 2px 2px 1px black;
        }

        /* Permet d'avoirle carré blanc qui entoure la description */
        .contour_description {
          overflow: visible;
          width: 455px;
          height: 140px;
          padding: 20px;
          /* Couleur puis bordure de l'élément */
          background-color: #FFFFFF;
          border: 1px solid #51A8AC;
        }

        /* Permet de placer la description correctement. */
        .decription {
          width: 340px;
          height: 100px;
          display: inline-block;
          vertical-align: top;
        }

        /* Mise en forme de la description */
        .decription p {
          width: 340px;
          height: 50px;
          padding: 5px;
          overflow: auto;
          /* Couleur du texte */
          color: grey;
          margin: 0px;
          /* Police du texte puis sa taille */
          font-family: 'Times New Roman';
          font-size: 10pt;
          text-align: justify;
          /* Permet de donner une ombre au texte */
          text-shadow: 1px 1px 1px grey;
        }

        /* Mise en forme du titre dans la description */
        .decription h3 {
          font-weight:normal;
          margin: 0px;
          margin-left: 20px;
          text-shadow: 1px 1px 1px grey;
        }

        /* Permet de placer l'image de catégorie à droite. */
        .decription img {
          position: absolute;
          right: 60px;
          bottom: 47px;
        }

        /* Place les liens de sous-forums */
        .forum_liens {
          position: absolute;
          bottom: 90px;
          left: 160px;
          width: 376px;
          height: 16px;
          padding: 2px;
          /* Couleur de fond des liens */
          background-color: #51A8AC;
          overflow: auto;
        }

        /* Permet de donner leur couleur aux liens de sous-forums */
        .forum_liens a, .forum_liens a:link, .forum_liens a:visited, .forum_liens a:hover {
          color: white;
          text-decoration: none !important;
        }

        /* Positionnement du dernier message & du nombre de sujets et messages */
        .position_last_mess {
          position: absolute;
          bottom: 20px;
          left: 300px;
          text-align: center;
          /* Détermine la taille du nombre de sujets et messages */
          font-size: 9pt;
        }

        /* Mise en forme du dernier message */
        .dernier_mess {
          width: 175px;
          height: 40px;
          padding: 5px;
          /* Couleur de fond */
          background-color: #C6C8DC;
          /* Alignement du texte */
          text-align: right;
          /* Permet de donner au texte une ombre. */
          text-shadow: 1px 1px 1px grey;
        }
        
        /*********** FIN CATÉS ***********/

    Modifications supplémentaires


    Dans ce code, beaucoup de choses sont modulables. Si vous voulez des exemples, de choses à changer ou SAVOIR comment modifier certaines choses, n'hésitez pas à poster à la suite ou dans les problèmes. Voici une liste d'idée qui pourraient être expliquées plus tard si besoin est:
    • Modifier les titres de catégories: placement et mise en forme (CSS à modifier:  .secondarytitle et .secondarytitle h2)
    • Mettre des coins arrondis:  (CSS à modifier: .contour_description, .forum_liens et  .dernier_mess)
    • Mettre des effets sur les divers titres et liens (Titre de sous.forum, lien vers les sous-forums et titre de la description):  (CSS à modifier: .title_forum .forumlink a, .title_forum .forumlink a:link, .title_forum .forumlink a:visited et .title_forum .forumlink a:hover, .forum_liens a, .forum_liens a:link, .forum_liens a:visited et séparer .forum_liens a:hover et  .decription h3 et .decription h3:hover (ou .decription:hover h3))
    • Modifier ce qui suit le titre de catégorie (retirer la barre): (CSS à modifier: .title_forum:after)


    Un petit merci ou commentaire est toujours le bienvenu ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.
    - Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.



    Pollux
    Pollux
    FémininAge : 30Messages : 97

    Ven 29 Mai 2015 - 18:21

    Merci
    Likilou
    Likilou
    MasculinAge : 27Messages : 307

    Ven 29 Mai 2015 - 18:22

    merci



    Mise en forme "flottante" des Sous-forums - Page 3 707828SignArthur2
    avatar
    Nal Souclade
    MasculinAge : 22Messages : 167

    Ven 29 Mai 2015 - 18:32

    Super joli ! Merci beaucoup !
    Heine
    Heine
    MasculinAge : 26Messages : 169

    Ven 29 Mai 2015 - 23:41

    Mercii o/



    Mise en forme "flottante" des Sous-forums - Page 3 110407104459204818
    animiix
    animiix
    MasculinAge : 26Messages : 35

    Jeu 4 Juin 2015 - 9:20

    Très beau, merci !
    MajorNeuf
    MajorNeuf
    MasculinAge : 25Messages : 19

    Jeu 4 Juin 2015 - 16:41

    Merci Very Happy
    Arisu
    Arisu
    FémininAge : 32Messages : 116

    Mar 9 Juin 2015 - 1:58

    Merci !
    picka234
    picka234
    FémininAge : 56Messages : 588

    Dim 14 Juin 2015 - 17:29

    merci
    mmorgo
    mmorgo
    FémininAge : 23Messages : 46

    Dim 14 Juin 2015 - 17:59

    je vais l'essayer héhé x3 Merci beaucoup !
    Ju' de fruits
    Ju' de fruits
    FémininAge : 28Messages : 82

    Lun 15 Juin 2015 - 14:38

    Merci !



    Rimaï J. Godwin
    Rimaï J. Godwin
    MasculinAge : 25Messages : 91

    Dim 28 Juin 2015 - 19:00

    Merci m'dame ^^
    Ren Hozukijo
    Ren Hozukijo
    MasculinAge : 28Messages : 10

    Dim 28 Juin 2015 - 19:40

    merci
    petitcupcake
    petitcupcake
    FémininAge : 19Messages : 6

    Jeu 16 Juil 2015 - 16:31

    Merci ! Ça m'a l'air vraiment joli !
    Lindaóma
    Lindaóma
    FémininAge : 23Messages : 150

    Lun 3 Aoû 2015 - 19:57

    Super catégories, et plutôt originales, merci beaucoup pour ce code !



    Mise en forme "flottante" des Sous-forums - Page 3 Signa_10
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2486

    Lun 3 Aoû 2015 - 22:47

    Merci ( ̄ー ̄)
    Démo
    Démo
    FémininAge : 21Messages : 57

    Mer 12 Aoû 2015 - 16:22

    Merci
    rosebleudu10
    rosebleudu10
    FémininAge : 31Messages : 189

    Lun 24 Aoû 2015 - 17:06

    merc
    Sylfaen
    Sylfaen
    FémininAge : 23Messages : 69

    Dim 20 Sep 2015 - 21:44

    thank's ^-^
    Araki
    Araki
    MasculinAge : 31Messages : 141

    Jeu 24 Sep 2015 - 16:57

    Merci!
    avatar
    Isalya
    FémininAge : 24Messages : 12

    Dim 11 Oct 2015 - 16:32

    Merci !
    Pokipsy
    Pokipsy
    FémininAge : 31Messages : 19

    Jeu 5 Nov 2015 - 19:41

    Je vais tester Very Happy
    Sylane
    Sylane
    FémininAge : 23Messages : 7

    Ven 13 Nov 2015 - 0:18

    :)
    Elocha
    Elocha
    FémininAge : 70Messages : 255

    Ven 13 Nov 2015 - 14:58

    need to see !
    merci :)



    eLoChA.
    avatar
    Wolftactick
    FémininAge : 19Messages : 71

    Ven 13 Nov 2015 - 18:23

    Wuw
    Heah92
    Heah92
    FémininAge : 23Messages : 88

    Dim 6 Déc 2015 - 19:07

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Juil 2021 - 14:21