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.

Le Deal du moment : -33%
PC portable DELL GAMING G3 15-3500
Voir le deal
599.99 €

    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.



    Pistachette
    Pistachette
    FémininAge : 27Messages : 32

    Mar 15 Déc 2015 - 21:18

    Merci =)
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 21Messages : 304

    Mer 16 Déc 2015 - 18:27

    Super, merci du partage! :)



    Just want to be yours.
    Anonymous
    Invité

    Sam 16 Jan 2016 - 22:40

    Ne fonctionne pas sous Firefox. Dommage.
    Kilda
    Kilda
    FémininAge : 41Messages : 73

    Mar 2 Fév 2016 - 22:22

    merci
    sunn-day
    sunn-day
    MasculinAge : 26Messages : 44

    Sam 27 Fév 2016 - 1:01

    ty
    patriciadpt30
    patriciadpt30
    FémininAge : 58Messages : 240

    Sam 14 Mai 2016 - 14:45

    Ho ! Merci our le partage je veux voir hi hihi :)



    Patricia :)
    avatar
    céleste callisto
    FémininAge : 29Messages : 55

    Ven 5 Aoû 2016 - 20:58

    merci
    Dark Fairy
    Dark Fairy
    FémininAge : 23Messages : 242

    Mer 10 Aoû 2016 - 15:19

    Je voudrais créer un forum rpg manga/fantasy plutôt clair puisque la première partie du contexte actuel est lumineux. Ces catégories iront je pense! Merci!
    LegendsOfToday
    LegendsOfToday
    FémininAge : 25Messages : 78

    Ven 19 Aoû 2016 - 16:42

    Merci !
    Exuperance
    Exuperance
    FémininAge : 31Messages : 50

    Mer 23 Nov 2016 - 16:21

    merci =)
    Necrolythia
    Necrolythia
    FémininAge : 33Messages : 574

    Ven 30 Déc 2016 - 11:21

    Merci :) j'adore



    Mise en forme "flottante" des Sous-forums - Page 4 KKEVK8u
    Lexucio
    Lexucio
    MasculinAge : 27Messages : 33

    Mar 24 Jan 2017 - 13:32

    Merci ^^
    mijako
    mijako
    FémininAge : 29Messages : 83

    Ven 3 Fév 2017 - 3:05

    omg merci *-*
    naah
    naah
    MasculinAge : 27Messages : 80

    Ven 10 Fév 2017 - 15:13

    merci ♥
    Envola
    Envola
    FémininAge : 29Messages : 62

    Lun 13 Fév 2017 - 23:16

    merci !
    Destan
    Destan
    MasculinAge : 42Messages : 38

    Ven 4 Aoû 2017 - 22:57

    Merci
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 53Messages : 167

    Lun 15 Jan 2018 - 2:39

    merci
    Faïryna
    Faïryna
    FémininAge : 18Messages : 86

    Sam 17 Fév 2018 - 23:10

    Superbe! Merci pour le partage c:
    Idril Palanén
    Idril Palanén
    FémininAge : 29Messages : 83

    Jeu 17 Mai 2018 - 15:06

    J'adore, j'avais trouvé autre choses pour mes catégories mais je change, je trouve cette présentation juste magnifique !
    Brunehaut
    Brunehaut
    FémininAge : 52Messages : 10

    Mer 30 Mai 2018 - 21:12

    Superbe, merci de partager
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Juil 2021 - 11:58