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

    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
    Maxen Cox
    MasculinAge : 23Messages : 26

    le Dim 20 Sep 2015 - 21:22

    Merci, c'est vraiment super joli !! *^*
    avatar
    Miss Houpette
    FémininAge : 21Messages : 76

    le Mer 23 Sep 2015 - 22:18

    Je suis trop inspirée par ces catégories ! *^*
    Merci !! ♥
    avatar
    Neyotox
    MasculinAge : 25Messages : 37

    le Ven 25 Sep 2015 - 1:35

    sublime, merci
    avatar
    Presley♥Cash
    FémininAge : 27Messages : 76

    le Sam 3 Oct 2015 - 21:12

    Merci ♥
    avatar
    Bellatrix
    FémininAge : 26Messages : 15

    le Mer 7 Oct 2015 - 20:45

    Merci !
    avatar
    Amacky
    FémininAge : 26Messages : 133

    le Ven 16 Oct 2015 - 13:18

    merci à toi :)
    avatar
    Tristelune
    FémininAge : 27Messages : 15

    le Mar 20 Oct 2015 - 11:46

    Merchi pour le codage (:
    avatar
    Devil.
    FémininAge : 21Messages : 58

    le Mer 28 Oct 2015 - 18:59

    Un très grand merci !
    avatar
    Laetizya
    FémininAge : 20Messages : 53

    le Ven 30 Oct 2015 - 1:11

    Eh merci !
    avatar
    Miyoko
    FémininAge : 25Messages : 213

    le Lun 2 Nov 2015 - 14:37

    wonderful



    avatar
    SvenO
    MasculinAge : 24Messages : 78

    le Mer 4 Nov 2015 - 23:05

    Merci ! Very Happy



    avatar
    BlondieMood
    FémininAge : 21Messages : 18

    le Jeu 5 Nov 2015 - 9:36

    merchi beaucoup beaucoup plus plus
    avatar
    lulu-lorry
    MasculinAge : 49Messages : 48

    le Sam 7 Nov 2015 - 16:34

    merci beaucoup pour ce tuto
    avatar
    P'tit loup
    MasculinAge : 35Messages : 437

    le Dim 8 Nov 2015 - 16:58

    ça a l'air sympa... voyons voir ça, merci ^^



    avatar
    Feniix
    MasculinAge : 25Messages : 21

    le Dim 8 Nov 2015 - 21:01

    merci
    avatar
    Banhjo
    MasculinAge : 20Messages : 75

    le Mer 11 Nov 2015 - 14:35

    Waw! vraiment cool !
    avatar
    NaLu
    FémininAge : 22Messages : 119

    le Sam 21 Nov 2015 - 18:17

    Merciiiiiiii



    avatar
    Bunny Lune
    FémininAge : 28Messages : 142

    le Lun 14 Déc 2015 - 20:10

    Merci beaucoup pour le partage.
    avatar
    transs-planter
    MasculinAge : 22Messages : 11

    le Mer 16 Déc 2015 - 19:42

    merci !!
    avatar
    Shoki
    FémininAge : 16Messages : 1310

    le Sam 19 Déc 2015 - 15:03

    Merci !





    avatar
    Milia
    FémininAge : 28Messages : 116

    le Lun 21 Déc 2015 - 6:41

    Très jolie. Bravo
    avatar
    Asphebeä
    FémininAge : 24Messages : 17

    le Mer 23 Déc 2015 - 1:12

    Magnifique ! ♥
    avatar
    Shadaan
    FémininAge : 25Messages : 80

    le Ven 25 Déc 2015 - 19:31

    Merci ♥



    avatar
    Clarisse
    FémininAge : 18Messages : 3938

    le Dim 27 Déc 2015 - 18:05

    Merci. :)
    avatar
    Nathaël
    MasculinAge : 29Messages : 92

    le Jeu 7 Jan 2016 - 13:43

    Joli ! :)



    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Juin 2018 - 6:54