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 : 9752

    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
    v-r0
    FémininAge : 26Messages : 39

    le Dim 6 Sep 2015 - 19:14

    Tu as vraiment beaucoup de talent! :)
    avatar
    Faucon
    FémininAge : 18Messages : 64

    le Dim 13 Sep 2015 - 12:56

    Merci beaucoup ♥
    avatar
    Sulivan-44
    MasculinAge : 23Messages : 65

    le Ven 18 Sep 2015 - 22:08

    Merci beaucoup !
    avatar
    alysia
    MasculinAge : 26Messages : 33

    le Dim 27 Sep 2015 - 17:41

    Merci
    avatar
    neochrome_ltd
    MasculinAge : 36Messages : 63

    le Sam 10 Oct 2015 - 22:40

    Merci, mais cela a pour effet d'avoir un gros décalage sur le forum.

    Avez vous la raison ?
    avatar
    Reishi
    MasculinAge : 24Messages : 145

    le Jeu 22 Oct 2015 - 13:47

    merci! Very Happy
    avatar
    Opaline
    FémininAge : 18Messages : 86

    le Jeu 22 Oct 2015 - 19:21

    Merci ~



    avatar
    meolyne
    FémininAge : 34Messages : 70

    le Dim 25 Oct 2015 - 22:56

    Merci à vous :)
    avatar
    Rizhskaya.
    MasculinAge : 25Messages : 42

    le Lun 2 Nov 2015 - 5:31

    Merci :)
    avatar
    Misery Mind™
    FémininAge : 27Messages : 152

    le Ven 6 Nov 2015 - 13:52

    Merci
    avatar
    lulu-lorry
    MasculinAge : 49Messages : 48

    le Mar 10 Nov 2015 - 10:18

    grand grand merci, je vais tenté
    avatar
    Kaimie
    FémininAge : 19Messages : 66

    le Jeu 12 Nov 2015 - 21:41

    Merci :)
    Wolftactick
    FémininAge : 16Messages : 71

    le Ven 13 Nov 2015 - 18:27

    Wuw
    avatar
    Yam'
    FémininAge : 24Messages : 73

    le Sam 21 Nov 2015 - 7:19

    merci!
    avatar
    br4nd0n
    Age : 24Messages : 50

    le Sam 21 Nov 2015 - 19:32

    C'est du vraiment très beau boulot, bravo ! :) Merci




    Kit by Adil94
    avatar
    Emilie
    FémininAge : 14Messages : 11

    le Ven 11 Déc 2015 - 18:17

    Merci !!
    avatar
    Nathaël
    MasculinAge : 29Messages : 92

    le Sam 16 Jan 2016 - 22:46

    Attention, ce codage ne fonctionne pas sous Firefox. C'est franchement dommage !



    avatar
    Be Shup's
    FémininAge : 19Messages : 33

    le Lun 18 Jan 2016 - 19:57

    Thank's !



    avatar
    Naïshy
    FémininAge : 16Messages : 65

    le Mar 19 Jan 2016 - 18:43

    thanks. c:
    avatar
    darkazu
    FémininAge : 24Messages : 42

    le Ven 29 Jan 2016 - 18:17

    wow
    avatar
    Mitsuomi73
    MasculinAge : 26Messages : 42

    le Sam 30 Jan 2016 - 11:00

    Merci beaucoup !
    avatar
    Zekarant
    MasculinAge : 17Messages : 51

    le Dim 31 Jan 2016 - 14:23

    Merci !
    avatar
    Amacky
    FémininAge : 26Messages : 133

    le Lun 1 Fév 2016 - 14:38

    Merci beaucoup
    avatar
    Shizuyae
    FémininAge : 19Messages : 57

    le Jeu 4 Fév 2016 - 20:41

    Merci
    avatar
    Lusso
    MasculinAge : 21Messages : 36

    le Sam 6 Fév 2016 - 16:08

    Merchi <3
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Juin 2018 - 22:52