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

    Rappel du premier message :



    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
    piros54
    MasculinAge : 21Messages : 5

    le Sam 10 Sep 2016 - 13:37

    Merci ! C'est vraiment top.
    avatar
    Sparryx
    MasculinAge : 16Messages : 71

    le Mar 13 Sep 2016 - 6:45

    Merci
    avatar
    Meeko
    MasculinAge : 24Messages : 29

    le Mar 20 Sep 2016 - 5:47

    merci
    avatar
    RaisedByWolves
    FémininAge : 19Messages : 39

    le Lun 10 Oct 2016 - 22:33

    Merci :)
    avatar
    Arkall
    MasculinAge : 26Messages : 14

    le Mer 2 Nov 2016 - 3:43

    c
    avatar
    Géranium
    FémininAge : 18Messages : 56

    le Mar 15 Nov 2016 - 15:08

    MERCI !
    avatar
    Domori
    MasculinAge : 26Messages : 32

    le Ven 18 Nov 2016 - 16:43

    Merci et super travail !
    avatar
    Wolf Valley
    FémininAge : 18Messages : 70

    le Jeu 24 Nov 2016 - 19:18

    Merci c'est magnifaik
    avatar
    Kasshad
    MasculinAge : 28Messages : 316

    le Ven 25 Nov 2016 - 14:31

    Parfait, merci Very Happy



    avatar
    MikeHope
    MasculinAge : 26Messages : 1

    le Mer 11 Jan 2017 - 18:50

    Merci ! C'est super Very Happy
    avatar
    TWISTY.RAIN
    FémininAge : 22Messages : 59

    le Sam 14 Jan 2017 - 4:14

    Merci c'est parfait (L) !



    avatar
    Marie
    FémininAge : 29Messages : 2206

    le Sam 14 Jan 2017 - 23:02

    Coucou!

    Merci pour se partage!



    /

    Kit fait par Arpège. Merci! :love:
    avatar
    mijako
    FémininAge : 26Messages : 83

    le Lun 16 Jan 2017 - 13:54

    merci :X
    avatar
    lounythithi
    MasculinAge : 22Messages : 14

    le Ven 20 Jan 2017 - 3:35

    Merci ^^
    avatar
    Marco Z.
    MasculinAge : 25Messages : 9

    le Lun 20 Fév 2017 - 10:58

    Merci beaucoup pour le partage!
    avatar
    Dearborn
    FémininAge : 24Messages : 109

    le Mar 28 Fév 2017 - 11:41

    Merci!
    avatar
    Black Chocolate
    MasculinAge : 29Messages : 58

    le Mar 28 Fév 2017 - 23:48

    Merci ! ♥
    avatar
    Onlyo
    FémininAge : 20Messages : 24

    le Mar 14 Mar 2017 - 1:13

    Stylé ! ^^
    avatar
    CatVanHels
    FémininAge : 25Messages : 6

    le Ven 17 Mar 2017 - 19:35

    merci !
    avatar
    Nyotengu
    FémininAge : 24Messages : 85

    le Lun 20 Mar 2017 - 9:29

    merci
    avatar
    Miyakano
    FémininAge : 25Messages : 10

    le Ven 7 Avr 2017 - 18:13

    Merci beaucoup ! *_*
    avatar
    Waphy's
    FémininAge : 19Messages : 54

    le Sam 8 Avr 2017 - 14:12

    merci !
    avatar
    Sheraa
    FémininAge : 23Messages : 23

    le Dim 9 Avr 2017 - 19:10

    merci!
    avatar
    Vito
    MasculinAge : 20Messages : 12

    le Lun 10 Avr 2017 - 22:03

    Thanks
    avatar
    Mahogany
    FémininAge : 25Messages : 54

    le Lun 17 Avr 2017 - 22:03

    Merci beaucoup!
    Contenu sponsorisé


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