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 - 18:15



    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 - 18:30, édité 2 fois




    < / Libre service codage >
    avatar
    Cruelly
    FémininAge : 25Messages : 2563

    le Sam 15 Nov 2014 - 19:53

    Merci :)



    MON PROJET :heart: j'ai besoin d'avis ^^


    avatar
    CECILE362
    FémininAge : 29Messages : 195

    le Mer 26 Nov 2014 - 10:19

    Merci beaucoup Very Happy
    avatar
    Menalewa
    MasculinAge : 23Messages : 6

    le Mar 16 Déc 2014 - 13:09

    Merci o/
    avatar
    Crowley
    FémininAge : 21Messages : 68

    le Mer 17 Déc 2014 - 0:39

    Code très sympa, merci du partage Very Happy
    avatar
    Invité

    le Mer 17 Déc 2014 - 10:40

    Merci !
    avatar
    AMIANTE
    FémininAge : 22Messages : 36

    le Mer 17 Déc 2014 - 17:20

    c'est très joli, merci !



    uc
    avatar
    Kaamee
    FémininAge : 22Messages : 110

    le Mer 17 Déc 2014 - 20:32

    Merci !



    avatar
    Adèle
    FémininAge : 26Messages : 96

    le Jeu 18 Déc 2014 - 15:37

    Merci ♥
    NamPearl
    FémininAge : 21Messages : 40

    le Dim 21 Déc 2014 - 16:06

    Cool, merci!
    avatar
    ColorTime'Less
    FémininAge : 21Messages : 100

    le Lun 22 Déc 2014 - 12:27

    génial !
    avatar
    Tatia38
    FémininAge : 29Messages : 306

    le Mer 24 Déc 2014 - 15:30

    Merci
    avatar
    petit lu
    FémininAge : 25Messages : 172

    le Jeu 25 Déc 2014 - 18:58

    Merci, c'est super beau
    avatar
    Lessien
    FémininAge : 36Messages : 163

    le Dim 28 Déc 2014 - 13:27

    Merci pour votre travail !
    avatar
    Azzuen
    FémininAge : 19Messages : 61

    le Dim 11 Jan 2015 - 2:28

    Merci beaucoup o/
    avatar
    Invité

    le Dim 11 Jan 2015 - 11:55

    Merci Halloween Very Happy
    avatar
    ASKP
    MasculinAge : 20Messages : 54

    le Dim 11 Jan 2015 - 17:08

    Merci pour ces belles catégories, j'en ferai sûrement usage. Wink
    avatar
    Romann
    FémininAge : 24Messages : 183

    le Lun 12 Jan 2015 - 12:59

    merci très joli !!



    avatar
    xodramm
    FémininAge : 40Messages : 286

    le Lun 12 Jan 2015 - 14:50

    Merci
    avatar
    xodramm
    FémininAge : 40Messages : 286

    le Lun 12 Jan 2015 - 15:53

    Désolé du double post, mais chez moi j'éprouve un problème et je ne peux pas tester le code. Quand je copie / colle le css j'ai un message en rouge qui me dit qu'il y a une erreurs dans le codage.
    avatar
    Daph
    FémininAge : 25Messages : 67

    le Mar 13 Jan 2015 - 1:17

    Merci pour le partage !



    avatar
    Hayate747
    MasculinAge : 28Messages : 196

    le Jeu 15 Jan 2015 - 20:11

    Merci Wink
    avatar
    Lady Doll
    FémininAge : 29Messages : 101

    le Jeu 15 Jan 2015 - 21:10

    merci !
    avatar
    Irissia87
    FémininAge : 30Messages : 124

    le Dim 25 Jan 2015 - 15:00

    merci :)
    avatar
    Pota
    MasculinAge : 26Messages : 4

    le Dim 25 Jan 2015 - 22:26

    Merci :O
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Juin 2018 - 20:14