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

    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
    TUC
    FémininAge : 30Messages : 103

    le Dim 29 Mar 2015 - 18:38

    merci :)



    avatar
    Uther
    MasculinAge : 21Messages : 93

    le Dim 29 Mar 2015 - 19:04

    Merci
    avatar
    Yumi-chan
    FémininAge : 25Messages : 67

    le Lun 30 Mar 2015 - 0:45

    Merci pour le partage ♥
    avatar
    Kathee
    FémininAge : 25Messages : 667

    le Jeu 2 Avr 2015 - 23:36

    Wow wow wow ! Bravo c'est superbe !



    • Nous serions ravis de vous accueillir •


    • Venez donc voir ce petit petit fofo •
    Catblack
    FémininAge : 22Messages : 85

    le Lun 13 Avr 2015 - 18:07

    merci
    avatar
    Equestria
    FémininAge : 21Messages : 118

    le Mer 15 Avr 2015 - 15:18

    merci
    avatar
    Izaya Orihara
    FémininAge : 16Messages : 105

    le Jeu 16 Avr 2015 - 12:18

    Merci pour le partage !
    avatar
    Leelo
    FémininAge : 27Messages : 149

    le Jeu 16 Avr 2015 - 12:19

    c'est sympa merci
    avatar
    DtwizzY
    MasculinAge : 31Messages : 10

    le Jeu 30 Avr 2015 - 1:10

    Merci Wink
    avatar
    DtwizzY
    MasculinAge : 31Messages : 10

    le Jeu 30 Avr 2015 - 1:21

    Désolé du double-post mais le code ne fonctionne pas...

    Pourrait-il être mis à jour? car il m'aiderait bien pour mon design Wink
    avatar
    Lust Caution
    FémininAge : 23Messages : 79

    le Jeu 30 Avr 2015 - 11:46

    Merci !!!! =3
    Hop80
    MasculinAge : 29Messages : 138

    le Jeu 30 Avr 2015 - 18:37

    super jolie merci
    avatar
    Ushee
    FémininAge : 26Messages : 11

    le Sam 2 Mai 2015 - 16:15

    Merci c'est très ergonomique :)
    avatar
    Seaphie
    FémininAge : 18Messages : 49

    le Ven 8 Mai 2015 - 23:10

    MercI.
    avatar
    Budapest
    FémininAge : 18Messages : 46

    le Dim 10 Mai 2015 - 19:08

    Merci !



    avatar
    Katerinata
    FémininAge : 24Messages : 22

    le Jeu 14 Mai 2015 - 14:31

    Merci ♥
    avatar
    Fluffy-Pompom
    MasculinAge : 29Messages : 5

    le Mar 19 Mai 2015 - 11:37

    Merci beaucoup ! *w*
    avatar
    clémenceuh
    FémininAge : 27Messages : 4

    le Mar 19 Mai 2015 - 13:10

    Merci :)
    avatar
    G U E R L A I N
    FémininAge : 27Messages : 154

    le Mer 20 Mai 2015 - 1:45

    merci :)



    avatar
    Lakia
    FémininAge : 20Messages : 104

    le Mer 20 Mai 2015 - 18:58

    merci !
    avatar
    Laluna
    FémininAge : 24Messages : 74

    le Sam 30 Mai 2015 - 4:45

    Mercii ! :)
    avatar
    Bellabimbo444
    FémininAge : 20Messages : 61

    le Dim 31 Mai 2015 - 19:12

    merci



    avatar
    Ashouille
    FémininAge : 28Messages : 47

    le Dim 31 Mai 2015 - 19:17

    tyyy
    avatar
    Anon
    MasculinAge : 20Messages : 127

    le Sam 6 Juin 2015 - 17:14

    Erreur dans le CSS que je n'arrive pas à trouver :x




    ~
    avatar
    Curieuse
    FémininAge : 20Messages : 19

    le Dim 7 Juin 2015 - 18:24

    mercii
    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Aoû 2018 - 17:07