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
    Kirito
    MasculinAge : 22Messages : 200

    le Jeu 11 Juin 2015 - 10:27

    Merci bcp
    avatar
    Florian Takiya
    MasculinAge : 23Messages : 65

    le Sam 13 Juin 2015 - 4:32

    Ça claque, Merci *o*
    avatar
    Louh
    FémininAge : 25Messages : 15

    le Sam 13 Juin 2015 - 22:57

    Merciiiii Very Happy
    avatar
    Scythe
    FémininAge : 27Messages : 40

    le Dim 14 Juin 2015 - 1:06

    Merci
    avatar
    webs
    MasculinAge : 25Messages : 1097

    le Dim 14 Juin 2015 - 13:46

    merci je prend



    avatar
    picka234
    Age : 53Messages : 440

    le Dim 14 Juin 2015 - 16:20

    merci



    avatar
    Lilynufare
    FémininAge : 27Messages : 341

    le Mer 17 Juin 2015 - 22:50

    jolie
    avatar
    TiGraou
    MasculinAge : 25Messages : 239

    le Dim 28 Juin 2015 - 4:54

    Merci
    avatar
    Atomixy
    MasculinAge : 22Messages : 28

    le Lun 29 Juin 2015 - 14:18

    Superbe ♥
    avatar
    Foxe
    FémininAge : 17Messages : 122

    le Mer 1 Juil 2015 - 15:39

    Ouahhh merci beaucoup



    avatar
    Hidema
    MasculinAge : 23Messages : 53

    le Sam 4 Juil 2015 - 3:27

    Merci pour ces codes, très beau l'ensemble. Wink
    avatar
    Ikkaku
    MasculinAge : 18Messages : 56

    le Dim 5 Juil 2015 - 21:06

    Merci
    avatar
    Maxine Evans
    FémininAge : 24Messages : 94

    le Lun 6 Juil 2015 - 10:39

    merci beaucoup
    avatar
    Zorane
    MasculinAge : 26Messages : 67

    le Lun 20 Juil 2015 - 18:04

    Merci !
    avatar
    Likilou
    MasculinAge : 24Messages : 301

    le Jeu 23 Juil 2015 - 22:07

    merci



    avatar
    rosebleudu10
    FémininAge : 28Messages : 188

    le Mar 28 Juil 2015 - 11:59

    merci
    avatar
    Matantelie
    FémininAge : 24Messages : 36

    le Jeu 30 Juil 2015 - 23:55

    Merci!
    avatar
    Neiko Seiteki
    MasculinAge : 22Messages : 44

    le Dim 2 Aoû 2015 - 1:23

    Merci ♥
    avatar
    Kira Hatsuki
    FémininAge : 16Messages : 142

    le Dim 9 Aoû 2015 - 15:27

    Merci ^^
    avatar
    Kelalin
    FémininAge : 25Messages : 1938

    le Dim 9 Aoû 2015 - 15:36

    Merci (★^O^★)
    avatar
    Little-myrt
    FémininAge : 20Messages : 41

    le Ven 14 Aoû 2015 - 3:44

    C'est joli, super, merci !
    avatar
    Cheshire Cat
    FémininAge : 20Messages : 902

    le Lun 24 Aoû 2015 - 5:24

    Très beau code ^^
    avatar
    Zoé
    FémininAge : 19Messages : 185

    le Lun 24 Aoû 2015 - 8:43

    trop cool !!!!



    avatar
    Kitty Kat.
    FémininAge : 24Messages : 86

    le Mar 25 Aoû 2015 - 7:53

    J'aime beaucoup !!! Very Happy
    En ligne
    avatar
    Yogi Nakagawa
    MasculinAge : 17Messages : 93

    le Dim 20 Sep 2015 - 19:31

    Thanx!
    Contenu sponsorisé


      La date/heure actuelle est Mer 18 Juil 2018 - 5:01