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.

Le Deal du moment :
Aliexpress : codes promo valables sur tout le site
Voir le deal

    Mise en forme "flottante" des Sous-forums

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    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.



    CN.June
    CN.June
    FémininAge : 24Messages : 315

    Ven 5 Sep 2014 - 22:49

    Lerci beaucoup pour ce tutoriel Wink
    J'aime beaucoup la disposition des différents éléments !
    liliebia
    liliebia
    FémininAge : 36Messages : 68

    Lun 6 Oct 2014 - 22:17

    Merci :)
    sandy13
    sandy13
    FémininAge : 34Messages : 15

    Lun 6 Oct 2014 - 22:36

    Merci
    Tony`s
    Tony`s
    MasculinAge : 32Messages : 64

    Mer 8 Oct 2014 - 8:38

    merci
    Madras
    Madras
    FémininAge : 39Messages : 285

    Mar 4 Nov 2014 - 7:22

    Merci
    Deadpoolio
    Deadpoolio
    MasculinAge : 34Messages : 277

    Mar 4 Nov 2014 - 10:16

    Je sais pas si j'utiliserai mais je remercie quand même l'auteur pour ce partage :)
    Pokebip
    Pokebip
    MasculinAge : 26Messages : 69

    Jeu 6 Nov 2014 - 8:30

    coool
    Hayate747
    Hayate747
    MasculinAge : 34Messages : 196

    Ven 7 Nov 2014 - 17:00

    Merci !! :)
    Shakespeare
    Shakespeare
    FémininAge : 34Messages : 110

    Sam 8 Nov 2014 - 13:40

    Merci beaucoup !
    avatar
    TATACARO13
    FémininAge : 49Messages : 80

    Sam 15 Nov 2014 - 17:00

    merci



    Mise en forme "flottante" des Sous-forums - Page 2 967953logodusite

    Mise en forme "flottante" des Sous-forums - Page 2 381658signatureBAU
    hirondelle
    hirondelle
    FémininAge : 34Messages : 134

    Ven 21 Nov 2014 - 21:11

    Merci ♥
    Haniwa
    Haniwa
    FémininAge : 29Messages : 206

    Ven 5 Déc 2014 - 17:36

    Merci
    ShiShi_Chan
    ShiShi_Chan
    MasculinAge : 34Messages : 51

    Mar 16 Déc 2014 - 5:39

    Très sympa merki bien !
    Noruenu
    Noruenu
    FémininAge : 31Messages : 123

    Ven 23 Jan 2015 - 21:42

      Merci ! :B
    Saphire
    Saphire
    FémininAge : 26Messages : 146

    Mar 27 Jan 2015 - 19:30

    merci
    Rudein
    Rudein
    FémininAge : 27Messages : 87

    Dim 15 Fév 2015 - 23:28

    Merci beaucoup !
    Kianda
    Kianda
    MasculinAge : 23Messages : 88

    Lun 23 Fév 2015 - 19:21

    Magnifique ! Merci :)



    Mise en forme "flottante" des Sous-forums - Page 2 1416416855-kandiasigna
    Selmacke
    Selmacke
    FémininAge : 33Messages : 100

    Mar 10 Mar 2015 - 15:08

    J'aime beaucoup merci :)
    Iliass
    Iliass
    MasculinAge : 32Messages : 24

    Dim 15 Mar 2015 - 0:09

    merci
    avatar
    Valens
    MasculinAge : 35Messages : 53

    Mer 25 Mar 2015 - 15:13

    merci c'est magnifique
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 32Messages : 315

    Jeu 26 Mar 2015 - 22:20

    C'est trop beau *3*
    Professeur Felyne
    Professeur Felyne
    MasculinAge : 38Messages : 85

    Jeu 21 Mai 2015 - 20:25

    Merci ^^



    .
    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Ven 22 Mai 2015 - 17:25

    Merci !
    Lakia
    Lakia
    FémininAge : 25Messages : 138

    Sam 23 Mai 2015 - 11:44

    merci !! :)
    Asami No Yoru
    Asami No Yoru
    FémininAge : 24Messages : 18

    Lun 25 Mai 2015 - 14:56

    Merci :3



    http://thousand-sunny.forumactif.org/
    Mon fofo :3 venez nombreux Very Happy (en fait ... Si vous voulez...)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:38