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 One Piece

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9753

    le Dim 7 Déc 2014 - 16:03



    Plop,

    Voici des catégories avec quelques effets au survol, à la demande de Popcorn. L'illustration de forum fait 500*150px, et les images "new", "no new" et "lock" sont de 200*150px.

    Un merci fait toujours plaisir et ça prend pas 20 minutes de vos vies =3

    /!\ 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




    CSS
    Code:
        /* ------------------------------------- CATEGORIES ------------------------------------- */

        /*** MISE EN FORME TITRES CATEGORIES ***/
        .cate_titre h2 {
          text-align: center;
          font-size: 32px;
          font-family: 'Julius Sans One', sans-serif;
          color: #322923;
        }


        /*** MISE EN FORME DU CONTENU ***/
        .ensemble_forum {
          background-color: #EBE6E2;
          border-left: 3px solid #322923;
          border-right: 3px solid #322923;
          position: relative;
          height: 230px;
        }

        .ensemble_forum1 {
          border-radius: 50px 50px 0px 0px;
          border-top: 3px solid #322923;
          border-left: 3px solid #322923;
          border-right: 3px solid #322923;
        }


        /*** ILLUSTRATION QUI SUIT LE TITRE DE CATEGORIE ***/
        .illustration_cate {
          border-radius: 50px 50px 0px 0px;
        }


        /*** MISE EN FORME NOM DU FORUM ***/

        /* SIMPLE */
        a.forumlink_name {
          font-size: 22px;
          font-family: 'Lily Script One', cursive;
          color: #446059;
          position: absolute;
          left: 1.5em;
          margin-top: 20px;
        }

        /* EN HOVER */
        a.forumlink_name:hover {
          color: #769E95;
          text-decoration: none !important;
        }


        /*** MISE EN FORME DES STATISTIQUES ***/

        /* SIMPLE */
        .stats {
          font-size: 14px;
          position: absolute;
          right: 5em;
          font-family: 'Open Sans Condensed', sans-serif;
          margin-top: 30px;
        }

        /* EN HOVER */
        .stats:hover {
          font-weight: bold;
        }


        /*** DESCRIPTION AU SURVOL DE L'IMAGE ***/
        .description {
          width: 500px;
          height: 150px;
          overflow: hidden;
          position: absolute;
          margin-top: 60px;
          left: 2em;
          background-color: #D3D1D1;
        }
         
        .description_img {
          position: relative;
          z-index: 2;
          width: 500px;
          height: 150px;
          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;
        }
         
        .description:hover .description_img {
          margin-left: 500px;
          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;
        }
         
        .description_desc {
          position: relative;
          z-index: 1;
          width: 470px;
          height: 90px;
          margin-top: -140px;
          text-align: justify;
          font-size: 11px;
          color: #446059;
          padding: 15px;
          overflow: auto;
          background-color: #D3D1D1;
        }


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

        /* POSITIONNEMENT */
        .sous_forum {
          position: absolute;
          margin-top: 39px;
          right: 23em;
          width: 150px;
          height: 120px;
          overflow: auto;
          padding: 15px;
          background-color: #D3D1D1;
          font-family: 'Lily Script One', cursive;
          font-size: 11px;
        }

        /* LIENS SIMPLES*/
        .sous_forum a{
          color: #446059;
        }

        /* LIENS AU SURVOL */
        .sous_forum a:hover {
          color: #769E95;
          text-decoration: none !important;
        }


        /*** DERNIERS MESSAGES AU SURVOL DE L'IMAGE ***/
        .derniers_news {
          width: 200px;
          height: 150px;
          overflow: hidden;
          position: absolute;
          margin-top: 38px;
          right: 2em;
          background-color: #373535;
        }
         
        .derniers_news_img {
          position: relative;
          z-index: 2;
          width: 200px;
          height: 150px;
          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;
        }
         
        .derniers_news:hover .derniers_news_img {
          margin-left: 500px;
          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;
        }
         
        .derniers_news_description {
          position: relative;
          z-index: 1;
          width: 170px;
          height: 50px;
          margin-top: -120px;
          text-align: center;
          font-size: 14px;
          color: #D3D1D1;
          padding: 15px;
          overflow: auto;
          background-color: #373535;
          font-family: 'Lily Script One', cursive;
        }

        /* LIENS SIMPLES */
        .derniers_news_description a {
          color: #D3D1D1;
        }

        /* LIENS AU SURVOL */
        .derniers_news_description a:hover {
          color: #769E95;
          text-decoration: none !important;
        }

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

    Puis remplacer le template Index_Box par :
    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="cate_titre">{catrow.tablehead.L_FORUM}</div><div class="ensemble_forum1"><img src="http://img11.hostingpics.net/pics/604824ImgHautCat.png" class="illustration_cate" />
          </div>
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
          <!-- END cathead -->
          <!-- BEGIN forumrow --><div class="ensemble_forum">
        <a class="forumlink_name" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> <div class="stats">Il y a {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</div>
       
        {catrow.forumrow.FORUM_DESC}

        <div class="sous_forum"><span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                <script type="text/javascript">
                  jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
                </script></div>

        <div class="derniers_news"><div class="derniers_news_img"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div><div class="derniers_news_description">{catrow.forumrow.LAST_POST}</div></div>
            <div style="clear: both;"></div></div>
          <!-- END forumrow -->
          <!-- BEGIN catfoot -->
         
          <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
        <div style="width: 100%; border-bottom: 3px solid #322923;"></div>
        <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
        <link href='http://fonts.googleapis.com/css?family=Julius+Sans+One|Lily+Script+One|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

    Et dans vos descriptions de forum :
    Code:
        <div class="description">
           
          <div class="description_img">
                <img src="http://i59.servimg.com/u/f59/17/97/89/15/sans_t10.png" />
          </div>
           
          <div class="description_desc">
                Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est.
          </div>
        </div>
         
        <div style="clear: both;">
        </div>

    Merci de penser au crédit vers NU Wink







    < / Libre service codage >
    avatar
    Candy Libertine
    FémininAge : 20Messages : 136

    le Dim 14 Déc 2014 - 20:46

    Merci beaucoup !! ♥
    avatar
    Féhéla
    FémininAge : 44Messages : 238

    le Lun 15 Déc 2014 - 2:31

    j'aime bien ! Merci
    avatar
    DixieM.
    FémininAge : 26Messages : 49

    le Lun 15 Déc 2014 - 17:10

    Whaaaaa trop la classe Very Happy Merciii du partage :love:
    avatar
    Filou
    FémininAge : 27Messages : 139

    le Lun 15 Déc 2014 - 18:31

    Whouaaaaa !! ça c'est du codage Shocked
    Je me demande combien de temps ça t'a demander.
    Moi j'en serais clairement incapable Rolling Eyes
    avatar
    Halloween
    FémininAge : 24Messages : 9753

    le Lun 15 Déc 2014 - 18:34

    Pas longtemps, il suffit de cumuler plusieurs LS :) C'est pour les beugs que c'est plus long :hum:

    Merci à vous :)




    < / Libre service codage >
    avatar
    Crowley
    FémininAge : 22Messages : 68

    le Lun 15 Déc 2014 - 22:28

    J'adore ! C'est super beau, merci pour le partage :))
    avatar
    Kamora
    MasculinAge : 25Messages : 18

    le Mar 16 Déc 2014 - 3:11

    Wow !!! C'est fou ça !
    avatar
    Menalewa
    MasculinAge : 23Messages : 6

    le Mer 17 Déc 2014 - 12:32

    Un grand - grand - merci o/
    avatar
    Doctor Who
    MasculinAge : 25Messages : 160

    le Jeu 18 Déc 2014 - 20:44

    Merci, j'aime beaucoup x)





    DOCTOR WHO ☼
    © Yamashita d'épicode
    avatar
    Kau
    FémininAge : 16Messages : 148

    le Dim 21 Déc 2014 - 23:22

    Elles sont magnifiques merci beaucoup !
    avatar
    Maya Seiko
    FémininAge : 25Messages : 122

    le Mar 23 Déc 2014 - 2:10

    Merciii !
    avatar
    Tatia38
    FémininAge : 29Messages : 306

    le Mer 24 Déc 2014 - 16:06

    J'adore merci beaucoup
    avatar
    Draly
    FémininAge : 25Messages : 108

    le Jeu 25 Déc 2014 - 12:12

    A tester, le rendu est pas mal. :)
    avatar
    ColorTime'Less
    FémininAge : 21Messages : 102

    le Jeu 25 Déc 2014 - 20:14

    j'aime beaucoup merci
    avatar
    Kowei
    FémininAge : 20Messages : 23

    le Ven 26 Déc 2014 - 13:34

    Merci !
    avatar
    Neithan
    MasculinAge : 22Messages : 28

    le Lun 29 Déc 2014 - 2:48

    merci !
    avatar
    Invité

    le Lun 29 Déc 2014 - 9:16

    Merci pour tes codes tous magnifiques.
    avatar
    Harmonia
    FémininAge : 20Messages : 110

    le Lun 29 Déc 2014 - 12:08

    Merci :o c'est du jolie travail
    avatar
    reshiram44
    MasculinAge : 19Messages : 380

    le Mar 30 Déc 2014 - 19:31

    merci



    Okana
    FémininAge : 18Messages : 26

    le Mer 31 Déc 2014 - 17:16

    Mercii
    avatar
    Shaq'
    MasculinAge : 97Messages : 60

    le Mer 31 Déc 2014 - 18:26

    Merchi
    avatar
    Kinjiro
    MasculinAge : 19Messages : 80

    le Sam 3 Jan 2015 - 21:23

    Merci :p



    avatar
    Clémentine
    FémininAge : 26Messages : 223

    le Dim 4 Jan 2015 - 20:56

    Merci ^^



    avatar
    Nerria
    FémininAge : 20Messages : 44

    le Lun 5 Jan 2015 - 17:23

    Vraiment superbe comme toujours, merci du partage *-*
    Contenu sponsorisé


      La date/heure actuelle est Mar 17 Juil 2018 - 3:58