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


    Catégories squares

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9754

    le Sam 8 Nov 2014 - 19:15

    Rappel du premier message :



    Plop,

    Une mise en forme de catégorie type "forum en deux blocs" avec un petit effet au survol (apparition des sous-forum) sur la demande de Tony's. Les illustrations "New", "No new" et "Lock" apparaissent à côté du titre de forum, préférez donc les petites images.


    /!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



    Catégories


    Version Phpbb2 ▬ Template & CSS

    Aperçu classique ▬ www | Aperçu au survol ▬ www



    Dans le CSS
    Code:
       /* -------------------------------- CATEGORIES -------------------------------- */

            /* TITRE CATEGORIES */
            .catetitre_content h2{
              color: #ffffff;
              font-family: arial;
              font-size: 24px;
              font-weight: bold;
              text-transform: uppercase;
              letter-spacing: 1px;
              text-shadow: 1px 1px 0px #000000;
            }

            /* CONTENU DE L ENSEMBLE DES FORUM */
            .forum_bloc {
              width: 950px;
            background-color: #F2F2F2;
            }


            /* MISE EN FORME EN DEUX COLONNES */
            .forum {
              float: left;
              width: 460px;
              margin-left: 10px;
            }

            .forum_contenu {
              position: relative;
              z-index: 1;
              width: 99.8%;
              height: 100%;
              margin-left: auto;
              margin-right: auto;
              background-color: #EAEAEA;
            }


            /* MISE EN FORME TITRE FORUM + STATISTIQUES */
            /* Fond */
            .bloc_haut {
              display: inline-block;
              width: 95%;
              background-color: #E1E1E1;
              color: #8D8D8B;
              font-size: 11px;
              padding: 11px;
              border-radius: 15px 15px 0px 0px;
            }
          
            /* Statistiques */
            .stats {
              float: right;
              position: relative;
            }

            /* Titre du forum */
            a.forumlink {
              width: 100%;
              color: #7E807F !important;
              font-family: arial;
              font-weight: bold;
              text-transform: uppercase;
              letter-spacing: 1px;
            }


            /* MISE EN FORME SOUS-FORUM EN HOVER */

            /* Contenu format texte */
            .description {
              width: 400px;
              height: 50px;
              overflow: auto;
              text-align: justify;
              font-size: 11px;
              padding: 10px;
              margin: auto;
            }

            /* Hover */
            .sous-forum {
              width: 420px;
              height: 80px;
              overflow: hidden;
            }

            .sous-forum_img {
              position: relative;
              z-index: 2;
              width: 420px;
              height: 80px;
              background-color: #EAEAEA;
              margin-left: 0px;
              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:hover .sous-forum_img {
              margin-left: 420px;
              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_description{
              position: relative;
              z-index: 1;
              width: 420px;
              height: 80px;
              margin-top: -80px;
              text-align: justify;
              font-size: 11px;
              color: #9C9B99;
              padding: 10px;
              overflow: auto;
            }

            .sous-forum_description a {
              color: #545352;
            }

            .sous-forum_description a:hover {
              color: #1C1C1C;
              text-decoration: none !important;
            }


            /* MISE EN FORME DERNIERS MESSAGES */
            /* Fond */
            .bloc_bas {
              display: inline-block;
              background-color: #E1E1E1;
              color: #545352;
              font-size: 11px;
              padding: 11px;
              border-radius: 0px 0px 15px 15px;
              width: 95%;
              margin-right: 0px;
            }

            /* Lien derniers messages */
            .last a {
              color: #1C1C1C;
              text-decoration: none !important;
            }

            .last {
              float: right;
            }

            /* MISE EN FORME ILLUSTRATION */
        .new {
          position: relative;
          z-index: 1;
          width: 16px;
          height: 16px;
          margin-left: 15px;
        }

            /* -------------------------------- FIN CATEGORIES -------------------------------- */

    Dans le template Index_Box :
    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="catetitre_content">{catrow.tablehead.L_FORUM}</div>

            <!-- END tablehead -->
            <!-- BEGIN cathead -->


            <!-- END cathead -->
            <!-- BEGIN forumrow -->
          

            <div class="forum_bloc">
            <div class="forum">
            
              <span class="bloc_haut">
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> <span class="new"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span>
                <span class="stats" align="right">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span></span>
            
            <div class="forum_contenu"><div class="sous-forum"><div class="sous-forum_img">{catrow.forumrow.FORUM_DESC}</div><div class="sous-forum_description">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
        <div style="clear: both;"></div>
                <br />
              
              </div>
              <span class="bloc_bas"> <span class="last" id="last">{catrow.forumrow.LAST_POST}</span></span>
        <script type="text/javascript">
        jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block;">-</span>')).removeAttr('id');
          </script>
                <br /><br /><br />
            </div>
        
            </div>


            <!-- END forumrow -->
            <!-- BEGIN catfoot -->

            <!-- END catfoot -->
            <!-- BEGIN tablefoot -->

              <!-- END tablefoot --><!-- END catrow -->


    Et dans les descriptions de forum :
    Code:
    <div class="description">
       Iura velut et post cervices post velut urbs et latasque patrimonii patrimonii et parens dives venerabilis Caesaribus leges et latasque frugi liberis dives gentium patrimonii libertatis et dives et frugi permisit parens post et et latasque Caesaribus gentium leges et retinacula oppressas fundamenta efferatarum liberis venerabilis cervices parens libertatis prudens suis patrimonii retinacula frugi post fundamenta iura velut post frugi venerabilis post efferatarum superbas Caesaribus liberis et velut urbs Caesaribus iura retinacula permisit latasque et liberis fundamenta liberis libertatis dives retinacula oppressas et patrimonii liberis dives latasque Caesaribus cervices libertatis leges latasque retinacula retinacula et cervices latasque liberis dives latasque. Iura velut et post cervices post velut urbs et latasque patrimonii patrimonii et parens dives venerabilis Caesaribus leges et latasque frugi liberis dives gentium patrimonii libertatis et dives et frugi permisit parens post et et latasque Caesaribus gentium leges et retinacula oppressas fundamenta efferatarum liberis venerabilis cervices parens libertatis prudens suis patrimonii retinacula frugi post fundamenta iura velut post frugi venerabilis post efferatarum superbas Caesaribus liberis et velut urbs Caesaribus iura retinacula permisit latasque et liberis fundamenta liberis libertatis dives retinacula oppressas et patrimonii liberis dives latasque Caesaribus cervices libertatis leges latasque retinacula retinacula et cervices latasque liberis dives latasque. Iura velut et post cervices post velut urbs et latasque patrimonii patrimonii et parens dives venerabilis Caesaribus leges et latasque frugi liberis dives gentium patrimonii libertatis et dives et frugi permisit parens post et et latasque Caesaribus gentium leges et retinacula oppressas fundamenta efferatarum liberis venerabilis cervices parens libertatis prudens suis patrimonii retinacula frugi post fundamenta iura velut post frugi venerabilis post efferatarum superbas Caesaribus liberis et velut urbs Caesaribus iura retinacula permisit latasque et liberis fundamenta liberis libertatis dives retinacula oppressas et patrimonii liberis dives latasque Caesaribus cervices libertatis leges latasque retinacula retinacula et cervices latasque liberis dives latasque. Iura velut et post cervices post velut urbs et latasque patrimonii patrimonii et parens dives venerabilis Caesaribus leges et latasque frugi liberis dives gentium patrimonii libertatis et dives et frugi permisit parens post et et latasque Caesaribus gentium leges et retinacula oppressas fundamenta efferatarum liberis venerabilis cervices parens libertatis prudens suis patrimonii retinacula frugi post fundamenta iura velut post frugi venerabilis post efferatarum superbas Caesaribus liberis et velut urbs Caesaribus iura retinacula permisit latasque et liberis fundamenta liberis libertatis dives retinacula oppressas et patrimonii liberis dives latasque Caesaribus cervices libertatis leges latasque retinacula retinacula et cervices latasque liberis dives latasque.  
    </div>




    Un petit merci ou commentaire est toujours le bienvenu ^^
    Mettre/laisser un crédit vers Never-Utopia est obligatoire.


    Dernière édition par Halloween le Jeu 13 Avr 2017 - 20:30, édité 2 fois




    < / Libre service codage >
    avatar
    LOUVE ☽
    FémininAge : 28Messages : 53

    le Dim 21 Fév 2016 - 22:33

    merci :)
    avatar
    Frosty Blue
    FémininAge : 22Messages : 162

    le Jeu 25 Fév 2016 - 12:21

    Merci
    avatar
    beza
    FémininAge : 22Messages : 47

    le Jeu 25 Fév 2016 - 18:24

    Thanks!
    avatar
    SweetieBay
    FémininAge : 26Messages : 143

    le Sam 27 Fév 2016 - 5:12

    merci bien.
    avatar
    blomkvist
    FémininAge : 27Messages : 44

    le Dim 13 Mar 2016 - 2:08

    plus je vois tous tes codes, plus j'ai soif d'apprendre, merci encore :heart:



    ☆ once upon a dream ☆
    I know you, I walked with you once upon a dream. I know you, that look in your eyes is so familiar a gleam. And I know it's true that visions are seldom all they seem. But if I know you, I know what you'll do. You'll love me at once, the way you did once upon a dream. ~ byendlesslove.
    avatar
    miekid
    FémininAge : 27Messages : 32

    le Dim 20 Mar 2016 - 6:25

    Mercii ♥
    avatar
    LegendsOfToday
    FémininAge : 22Messages : 78

    le Mar 22 Mar 2016 - 13:17

    Merci! :)
    avatar
    Coco-Lapin02
    MasculinAge : 50Messages : 167

    le Mer 30 Mar 2016 - 16:24

    Merci
    avatar
    Ganta
    MasculinAge : 25Messages : 69

    le Dim 24 Avr 2016 - 20:36

    merci !!
    avatar
    Hiroshina
    FémininAge : 24Messages : 37

    le Jeu 12 Mai 2016 - 16:44

    Merciii.
    avatar
    Maestro
    MasculinAge : 25Messages : 14

    le Ven 13 Mai 2016 - 12:05

    Merci. Wink
    Nal Souclade
    MasculinAge : 19Messages : 163

    le Dim 22 Mai 2016 - 21:56

    Elles sont belles ! Merci !
    avatar
    patriciadpt30
    FémininAge : 55Messages : 240

    le Lun 23 Mai 2016 - 21:45

    Merci pour voir !



    Patricia :)
    avatar
    HamidBélica
    MasculinAge : 18Messages : 2

    le Sam 11 Juin 2016 - 20:33

    Merci Beaucoup
    avatar
    Sian
    FémininAge : 23Messages : 7

    le Lun 20 Juin 2016 - 21:49

    J'aime beaucoup !
    avatar
    *-Atlas-*
    MasculinAge : 29Messages : 137

    le Mar 28 Juin 2016 - 6:43

    je suis curieux de voir



    avatar
    Sheewps
    MasculinAge : 18Messages : 23

    le Mer 29 Juin 2016 - 13:03

    Merci :)
    avatar
    Noburnak
    MasculinAge : 24Messages : 24

    le Ven 8 Juil 2016 - 5:00

    merci !
    avatar
    pizinette
    FémininAge : 30Messages : 5

    le Mar 12 Juil 2016 - 17:33

    Merci beaucoup :)
    avatar
    pizi
    FémininAge : 30Messages : 575

    le Mer 13 Juil 2016 - 10:17

    Super merci :)




    avatar
    Pava
    FémininAge : 83Messages : 62

    le Jeu 14 Juil 2016 - 22:38

    Merci beaucoup ! :)
    avatar
    Omys
    FémininAge : 23Messages : 57

    le Sam 16 Juil 2016 - 21:49

    Merci :)



    avatar
    Carasama
    FémininAge : 22Messages : 95

    le Sam 27 Aoû 2016 - 22:31

    sweet
    avatar
    Mr Kent
    MasculinAge : 23Messages : 23

    le Ven 25 Nov 2016 - 20:12

    Merci beaucoup
    avatar
    Kush-Live
    MasculinAge : 24Messages : 12

    le Mar 20 Déc 2016 - 6:57

    merci
    Contenu sponsorisé


      La date/heure actuelle est Mer 19 Sep 2018 - 19:04