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
    Hogoewen
    MasculinAge : 37Messages : 23

    le Mar 12 Déc 2017 - 15:10

    merci
    céleste callisto
    FémininAge : 26Messages : 54

    le Mar 12 Déc 2017 - 15:53

    merci
    avatar
    Liintu
    FémininAge : 28Messages : 65

    le Lun 25 Déc 2017 - 18:26

    Merci !!!
    avatar
    Alwine
    FémininAge : 22Messages : 7

    le Sam 27 Jan 2018 - 17:06

    Exactement ce que je recherchais, merci !
    avatar
    Donsavastano
    MasculinAge : 21Messages : 9

    le Mer 7 Fév 2018 - 17:15

    merci!!
    avatar
    Bunikkk
    MasculinAge : 23Messages : 41

    le Sam 3 Mar 2018 - 19:04

    Wow ! Merci, sublime
    avatar
    Mirage1995
    FémininAge : 23Messages : 16

    le Dim 11 Mar 2018 - 18:16

    Merci :)
    avatar
    Messorem
    MasculinAge : 19Messages : 6

    le Sam 17 Mar 2018 - 18:48

    Merci beaucoup
    avatar
    LizzieWeir
    FémininAge : 27Messages : 14

    le Sam 14 Avr 2018 - 22:23

    J'adore One Piece! Merci pour ce super travail!
    avatar
    Clazones
    MasculinAge : 19Messages : 1

    le Dim 3 Juin 2018 - 10:13

    Merci !
    avatar
    Babo
    FémininAge : 17Messages : 3

    le Sam 21 Juil 2018 - 2:04

    Merci beaucoup ^^
    avatar
    Alouarn
    MasculinAge : 27Messages : 127

    le Sam 4 Aoû 2018 - 20:25

    Merci beaucoup pour ces catégories ! **
    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Aoû 2018 - 18:54