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

    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
    QueenDancing13
    FémininAge : 22Messages : 106

    le Ven 23 Déc 2016 - 19:42

    Merci ^^



    avatar
    mijako
    FémininAge : 26Messages : 83

    le Mar 17 Jan 2017 - 14:40

    merci
    avatar
    Sakura Sinister
    FémininAge : 32Messages : 35

    le Mar 24 Jan 2017 - 11:24

    Merci Very Happy
    avatar
    Safaya
    FémininAge : 21Messages : 23

    le Mar 14 Fév 2017 - 21:02

    Merci ewe
    avatar
    Kya-chan
    FémininAge : 23Messages : 140

    le Lun 27 Fév 2017 - 20:13

    Bonsoir !!!
    Je venais vous informer que les aperçues n'étaient plus visibles ! Une expiration de l'hébergeur ? Ou alors c'est uniquement sur mon ordinateur, cela peut être possible ! (et dans ca cas-là je m'excuse du dérangement, en espérant que ça ne le fait pas à d'autres xD)

    Ce bug est en tout cas, visible pour moi sur quelques tutoriels d'Halloween =3 (après je n'ai regardé que dans les catégories)

    Bonne soirée à vous et pardon du dérangement !




    If I had a hammer...
    I wanna do bad things with you~

    avatar
    Necrolythia
    FémininAge : 31Messages : 547

    le Ven 10 Mar 2017 - 20:28

    pouic, merci :)



    avatar
    memoriam
    FémininAge : 26Messages : 72

    le Sam 11 Mar 2017 - 18:18

    merci du partage
    avatar
    Hana Evali
    FémininAge : 28Messages : 174

    le Ven 31 Mar 2017 - 11:23

    merci !





    Je joue
    • ♚ Kili
    • ♚Ianto Jones
    • ♚ Thor Odinson
    • ♚ James T. Kirk
    J'anime
    • ♚ Les intrigues
    • ♚ Les soirées CB
    • ♚ Les événements
    • ♚ Le flood/les jeux


    avatar
    Mariana Greyson
    FémininAge : 20Messages : 78

    le Ven 31 Mar 2017 - 15:50

    mercii
    avatar
    madame-al
    FémininAge : 27Messages : 12

    le Ven 31 Mar 2017 - 23:58

    merci
    avatar
    luxury67
    FémininAge : 26Messages : 20

    le Dim 2 Avr 2017 - 14:02

    merci beaucoup !
    avatar
    Wildness
    MasculinAge : 26Messages : 16

    le Jeu 20 Avr 2017 - 19:21

    Merci !
    avatar
    Taiga
    MasculinAge : 28Messages : 45

    le Mer 26 Avr 2017 - 9:30

    Merci !
    avatar
    Kaleessi
    FémininAge : 26Messages : 73

    le Dim 18 Juin 2017 - 4:15

    J'aime beaucoup ces différent!! :)
    avatar
    Xophyas
    MasculinAge : 22Messages : 4

    le Lun 26 Juin 2017 - 18:29

    Merci c'est sympa Very Happy
    avatar
    Cisco Montana
    MasculinAge : 54Messages : 2

    le Ven 30 Juin 2017 - 22:20

    Merci beaucoup !!
    avatar
    One..
    MasculinAge : 20Messages : 54

    le Sam 1 Juil 2017 - 11:07

    merci !
    avatar
    Mephitiques
    MasculinAge : 19Messages : 29

    le Sam 8 Juil 2017 - 20:29

    merci
    avatar
    Malizia.
    FémininAge : 22Messages : 90

    le Sam 8 Juil 2017 - 21:26

    Merci !
    avatar
    nuanciel
    FémininAge : 27Messages : 139

    le Lun 11 Sep 2017 - 7:55

    Merci du partage !
    avatar
    Rosedesvents
    FémininAge : 32Messages : 96

    le Lun 11 Sep 2017 - 14:45

    Merci
    avatar
    Koala87
    FémininAge : 31Messages : 5

    le Mer 20 Sep 2017 - 18:35

    Merci
    avatar
    Mystick
    FémininAge : 33Messages : 100

    le Ven 22 Sep 2017 - 21:07

    Merci du partage :)
    avatar
    Vanessa sassa
    FémininAge : 27Messages : 22

    le Ven 3 Nov 2017 - 20:33

    Merci
    avatar
    Sparryx
    MasculinAge : 16Messages : 71

    le Dim 5 Nov 2017 - 13:46

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Mer 12 Déc 2018 - 12:30