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 : -50%
-50% Baskets Nike Dunk Low
Voir le deal
64.99 €

    Mise en forme "flottante" des Sous-forums

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Lun 2 Juin 2014 - 10:45



    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.



    Angie Harkness
    Angie Harkness
    FémininAge : 40Messages : 725

    Lun 2 Juin 2014 - 20:42

    il est splendide y'a pas j'aime vraiment ce que tu fait toi et Halloween vous êtes les best de NU *_* finalement je crois je vais te l’emprunté pour un de mes forum je trouve qu'il ira mieux que les catégories que j'ai en ce moment ^^

    EDIT par contre une question pour l'image de droite pourrait-ont savoir qu'elle taille maximum on peut mettre s'il te plait? et la taille des icons nouveau message et pas de message?^^ Merci
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Lun 2 Juin 2014 - 22:34

    J'ai mit dans le attention la taille qu'ils devraient avoir. Après, si tu veux modifier la taille, ce sera à toi de tester. Wink



    Angie Harkness
    Angie Harkness
    FémininAge : 40Messages : 725

    Mar 3 Juin 2014 - 0:35

    HAAA ouyi ok j'avais pas vu merci^^
    Neva
    Neva
    FémininAge : 32Messages : 18565

    Jeu 12 Juin 2014 - 11:21

    Cette mise en forme rend vraiment bien, je trouve ! Et pas mal d'annotations bien pratiques
    Encore merci Nyo !



     
    Shinju.dot
    Shinju.dot
    FémininAge : 34Messages : 88

    Ven 13 Juin 2014 - 16:49

    merci
    Sparky59
    Sparky59
    FémininAge : 24Messages : 54

    Ven 13 Juin 2014 - 18:12

    Merci Very Happy
    Reishi
    Reishi
    MasculinAge : 30Messages : 148

    Ven 13 Juin 2014 - 19:54

    merci !
    Patou972
    Patou972
    FémininAge : 45Messages : 175

    Sam 14 Juin 2014 - 10:01

    merci beaucoup
    Féréole
    Féréole
    FémininAge : 36Messages : 55

    Jeu 19 Juin 2014 - 11:54

    merci !
    Cruelly
    Cruelly
    FémininAge : 30Messages : 2605

    Jeu 19 Juin 2014 - 19:38

    Merciii :)



    :heart: :heart:
    Anonymous
    Invité

    Ven 20 Juin 2014 - 7:01

    Je trouve cette mise en forme vraiment jolie *o*,,. vraiment un grand bravo, comme je peaufine encore mon forum, je vais peut-être remplacer mes anciennes catégories par les tiennes. Je vais tester :)
    Anonymous
    Invité

    Ven 20 Juin 2014 - 7:06

    Na toute compte fait je préfère pas les prendre, j'ai encore du mal avec les templates  Razz 
    Asha
    Asha
    FémininAge : 29Messages : 16

    Sam 21 Juin 2014 - 3:55

    Merci !
    Demoniall
    Demoniall
    FémininAge : 23Messages : 74

    Lun 7 Juil 2014 - 17:34

    Merci !
    Draly
    Draly
    FémininAge : 31Messages : 119

    Mer 16 Juil 2014 - 16:37

    Merci !:p
    Allison01
    Allison01
    FémininAge : 39Messages : 225

    Sam 19 Juil 2014 - 21:28

    merci ^^
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Lun 28 Juil 2014 - 16:03

    merciiiiiiiiiii



    Mise en forme "flottante" des Sous-forums Sans_t14
    Ysamar
    Ysamar
    FémininAge : 44Messages : 37

    Sam 2 Aoû 2014 - 19:26

    merci
    skaera22
    skaera22
    MasculinAge : 29Messages : 72

    Lun 4 Aoû 2014 - 16:54

    thx
    Caine Lornan
    Caine Lornan
    MasculinAge : 42Messages : 87

    Lun 25 Aoû 2014 - 14:21

    Merci :)
    Tatia38
    Tatia38
    FémininAge : 34Messages : 316

    Dim 31 Aoû 2014 - 17:37

    merci !
    Prince Of Spades
    Prince Of Spades
    MasculinAge : 30Messages : 50

    Jeu 4 Sep 2014 - 1:13

    Merci ! o/
    Nemesyss
    Nemesyss
    FémininAge : 33Messages : 31

    Jeu 4 Sep 2014 - 9:40

    merci Very Happy
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Ven 5 Sep 2014 - 16:48

    Merci!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 14:59