AccueilRechercherS'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.


    (Onyx) Catégorie assez simple [Template et Css]

    The One Pandemonium
    The One Pandemonium
    FémininAge : 26Messages : 97

    le Sam 22 Nov 2014 - 18:32

    Ma demande



    Bonsoir! Me revoici à passer une commande, vu que je galère avec mes templates et j'ai peur de tout reperdre, j'ai décidé de poster de nouveau :'3 Merci beaucoup à ceux qui se lanceront! J'ai essayé d'être claire sur l'image du schéma.

    J'ai refait une catégorie, entretemps j'ai changé d'idées ^^


    Schéma(s) et Eléments
    Schémas : http://image.noelshack.com/fichiers/2014/47/1416677412-truc.png
    Tailles des éléments : Je crois que celui du schéma m'ira ^^
    Effets voulus : Juste une ombre agréable derrière le titre du forum, puis une div (?) fixe pour la description du forum pour que quand le texte devient trop long, on ait une scrollbar :3
    Est-il possible aussi de faire afficher les sous-forums lorsqu'on passe la souris sur l'image?
    Version de votre forum : PHPBB3


    Ressources
    Aucune ^^

    Autres précisions ? Je ne crois pas :o
    /


    Dernière édition par The One Pandemonium le Mar 25 Nov 2014 - 20:58, édité 1 fois



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Onyx) Catégorie assez simple [Template et Css] 1416253868-ladycrowcoupe
    Onyx
    Onyx
    FémininAge : 25Messages : 3296

    le Mar 25 Nov 2014 - 0:57

    Je veux bien prendre cette demande \o/

    Je n'ai pas encore terminé, mais je te ferai un up dès que ce sera fait! juste pour être sûre, les sous-forums apparaissent bien au survol de l'image de la description, right? Et quand est-il des titres des catégories?



    The One Pandemonium
    The One Pandemonium
    FémininAge : 26Messages : 97

    le Mar 25 Nov 2014 - 1:16

    Encore un grand merci Onyx ahhh<3
    En effet, j'imaginais bien un fade-out de l'image vers le noir pour montrer les sous-forums listés et en justify peut-être! :'2

    Pour ce qui est des titres de catégories... je les ais ainsi sur mon fofo: http://image.noelshack.com/fichiers/2014/47/1416323184-short-preambulesanstransparence.png
    As-tu une meilleure idée en tête? J'avoue que je ne serai pas contre un grand titre de catégorie centré avec une ombre derrière aussi... tu me tentes là *v*



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Onyx) Catégorie assez simple [Template et Css] 1416253868-ladycrowcoupe
    Onyx
    Onyx
    FémininAge : 25Messages : 3296

    le Mar 25 Nov 2014 - 4:15

    Bouh!

    Alors voilà, je pense que c'est l'inverse de l'effet souhaité pour les sous-forums, mais j'espère que ça va quand même XD

    http://forum-test-onyx5.forum-canada.com/

    Alors, pour les titres, tu avais des polices en particulier que tu voulais? Et quand tu parles d'ombre, est-ce que c'est vraiment une ombre (comme sur le titre de forum) ou plutôt comme un halo (comme le titre de catégorie)?

    Aussi, je me suis cassée un peu la tête pour l'enveloppe en haut à droite... C'est supposé correspondre à l'image de la dernière réponse ou à l'image New/Old/lock?



    The One Pandemonium
    The One Pandemonium
    FémininAge : 26Messages : 97

    le Mar 25 Nov 2014 - 9:29

    Haaan omg que c'est joli <3 ! Décidément tu es fantastique en codage ^^
    Pour le titre de catégorie, je parlais d'ombre mais finalement j'adore comment t'as fait! Un petit doute: comment pourrais-je mettre un fond de catégorie, genre derrière le texte de chacune (pour enrichir visuellement) Juste le changer dans Images tout bêtement?

    Puis l'enveloppe c'est le petit icone qui renvoit au mini-icône lien dernière réponse! J'crois que c'est comme tu as fait :3
    Ah et juste une petite modification: les sous-forums qui apparaissent lorsque on passe la souris sur l'image, pourrait-elle être en forme de liste/retour à la ligne? *v*



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Onyx) Catégorie assez simple [Template et Css] 1416253868-ladycrowcoupe
    Onyx
    Onyx
    FémininAge : 25Messages : 3296

    le Mar 25 Nov 2014 - 19:38

    Désolée, j'avais rien compris pour les sous-forums u_u

    Donc voilà, toujours au même lien, avec les sous-forums avec retour à la ligne et une image derrière le titre de catégorie ^^



    The One Pandemonium
    The One Pandemonium
    FémininAge : 26Messages : 97

    le Mar 25 Nov 2014 - 19:43

    C'est parfait, c'est tout à fait ça !

    Au fait, j'espère que ce n'est pas trop tard ou que c'est facilement changeable mais est-ce que ça pourrait être rétréci aux dimensions de mon forum ici http://lazuli.forumactif.org/ ? J'ai travaillé sur la structure du forum today et stupidement je n'y avais pas pensé hier.
    C'pas grave si c'est trop tard, je changerai moi-même si tu veux me taper dessus!



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Onyx) Catégorie assez simple [Template et Css] 1416253868-ladycrowcoupe
    Onyx
    Onyx
    FémininAge : 25Messages : 3296

    le Mar 25 Nov 2014 - 19:56

    C'est pas grave ^^

    Comme ça? : http://forum-test-onyx5.forum-canada.com/



    The One Pandemonium
    The One Pandemonium
    FémininAge : 26Messages : 97

    le Mar 25 Nov 2014 - 19:58

    Han je t'aimeuuuh <3

    C'est parfait! *O*



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Onyx) Catégorie assez simple [Template et Css] 1416253868-ladycrowcoupe
    Onyx
    Onyx
    FémininAge : 25Messages : 3296

    le Mar 25 Nov 2014 - 20:24

    Alors voilà les codes ^^

    Template index_box :
    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 -->
    <table class="forumline cate" width="100%" border="0" cellspacing="0" cellpadding="0"><tbody>
      <tr>
        <td width="100%" valign="middle" align="center">
          <span class="cate_title">
            {catrow.tablehead.L_FORUM}
          </span>
        </td>
      </tr>
    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
      <tr>
        <td align="center" valign="center">
          <div class="forum">
            <div class="forum_top">
              <div class="forum_top_left">
                <span class="forumlink">
             <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                    {catrow.forumrow.FORUM_NAME}
                  </a>
           </span>
                <br />
                <span class="forum_stats">
                  Nombre de sujets : {catrow.forumrow.TOPICS} | Nombre de messages : {catrow.forumrow.POSTS}
                </span>
              </div>
              <div class="forum_top_right">
                <span class="forum_last_mess">
                  <span id="forum_last_mess2">
                    {catrow.forumrow.LAST_POST}
                  </span>
                </span>
                <script type="text/javascript">
                  jQuery('#forum_last_mess2').html(jQuery('#forum_last_mess2').html().replace(/<br>/g,'')).removeAttr('id');
                </script>
              </div>
            </div>
            <div class="forum_bottom">
              <div class="forum_desc">
                {catrow.forumrow.FORUM_DESC}
              </div>
              <div class="forum_bloc_sous_forums">
                <div class="forum_sous_forums">
                  <span id="forum_sous_forums2">
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                  </span>
                </div>
                <script type="text/javascript">
                  jQuery('#forum_sous_forums2').html(jQuery('#forum_sous_forums2').html().replace(/, /g,'<br />')).removeAttr('id');
                </script>
              </div>
            </div>
          </div>
        </td>
      </tr>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
      </tbody></table>
    <!-- END tablefoot -->
    <!-- END catrow -->

    CSS :
    Code:
    /******************************************************* DÉBUT CATÉGORIES *******************************************************/


    /*Catégorie*/
    .cate {
      margin-bottom: 10px;
    }

    /*Fond du titre de la catégorie*/
    span.cate_title {
      display: block;
      background-image: url('http://img15.hostingpics.net/pics/956965Sanstitre.png');
      width: 740px;
      margin: 15px;
      padding: 10px;
      padding-bottom: 0px;
    }
    /*Titre de la catégorie*/
    .cate_title h2 {
      display: block;
      margin: 0px;
      padding: 0px;
      font-family: 'Lithos Pro';
      font-size: 28px;
      text-shadow: 0px 0px 5px #000000;
      color: #23709e;
      font-weight: normal;
      letter-spacing: 1px;
    }


    /*Bloc de chaque forum*/
    .forum {
      width: 740px;
      height: 199px;
      margin: auto;
      margin-bottom: 10px;
      padding: 10px;
      background-color: #20231e;
      text-align: center;
      color: #7b848f;
    }


    /*Section du haut du forum*/
    .forum_top {
      width: 718px;
      height: 30px;
      margin: auto;
      padding: 10px;
      background-color: #322614;
      border: 1px solid #201d14;
    }

    /*Section de gauche avec le titre et les stats*/
    .forum_top_left {
      float: left;
      width: 430px;
      text-align: left;
    }
    /*Titre du forum*/
    a.forumlink {
      font-family: 'Lithos Pro';
      font-size: 15px;
      text-shadow: 1px 1px 1px #000000;
      color: #23709e!important;
      font-style: italic;
      font-weight: normal;
      letter-spacing: 2px;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Titre du forum survolé*/
    a.forumlink:hover {
      text-decoration: none!important;
      letter-spacing: 4px;
    }
    /*Statistiques*/
    .forum_stats {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
    }

    /*Section de gauche avec le dernier message*/
    .forum_top_right {
      position: relative;
      float: left;
      width: 278px;
      margin-left: 10px;
      text-align: left;
    }
    /*Dernier message*/
    .forum_last_mess {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #7b848f;
    }
    /*Placement du titre du dernier message*/
    .forum_last_mess a {
      display: block;
      margin-left: 28px;
      margin-bottom: 3px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
    }
    /*Placement de l'image du dernier message*/
    a.last-post-icon {
      display: inline-block;
      position: absolute;
      top: 0px;
      left: 0px;
      margin-left: 0px;
      width: 24px;
      height: 14px;
    }
    /*Mise en forme de l'auteur du dernier message*/
    .forum_last_mess a.gensmall, .forum_last_mess a.gensmall strong {
      display: inline;
      margin-left: 5px;
      margin-bottom: 0px;
      font-family: 'Lithos Pro';
      font-style: normal;
      font-weight: normal!important;
      font-variant: normal;
      font-size: 15px;
      text-shadow: 1px 1px 1px #101010;
    }


    /*Section du bas du forum*/
    .forum_bottom {
      position: relative;
      width: 738px;
      height: 137px;
      margin: auto;
      margin-top: 10px;
    }

    /*Bloc de la description du forum*/
    .forum_desc {
      float: left;
    }
    /*Cadre de l'image de la description*/
    .forum_desc_img_cadre {
      float: left;
      width: 250px;
      height: 125px;
      padding: 5px;
      background-color: #322614;
      border: 1px solid #201d14;
    }
    /*Image de la description*/
    .forum_desc img {
      width: 250px;
      height: 125px;
    }
    /*Description du forum*/
    .forum_desc_desc {
      float: left;
      width: 440px;
      height: 125px;
      margin-top: 6px;
      padding-left: 20px;
      padding-right: 5px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      text-align: justify;
      overflow: auto;
    }

    /*Bloc sous les sous-forums*/
    .forum_bloc_sous_forums {
      position: absolute;
      top: 6px;
      left: 6px;
      width: 250px;
      height: 125px;
      z-index: 1;
    }
    /*Sous-forums*/
    .forum_sous_forums {
      width: 240px;
      height: 115px;
      padding: 5px;
      text-align: justify;
      opacity: 0;
      background-color: rgba(0,0,0,0.7);
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Apparition des Sous-forums*/
    .forum_bloc_sous_forums:hover .forum_sous_forums {
      opacity: 1;
    }

    /******************************************************* FIN CATÉGORIES *******************************************************/

    Descriptions de forum :
    Code:
    <div class="forum_desc_img_cadre"><img alt="Image de la description du forum" src="url_de_l_image_a_mettre" /></div><div class="forum_desc_desc">Postremo ad id indignitatis est ventum, ut cum peregrini ob formidatam haut ita dudum alimentorum inopiam pellerentur ab urbe praecipites, sectatoribus disciplinarum liberalium inpendio paucis sine respiratione ulla extrusis, tenerentur minimarum adseclae veri, quique id simularunt ad tempus, et tria milia saltatricum ne interpellata quidem cum choris totidemque remanerent magistris.</div>


    Tu peux modifier l'image de forum dans la description de forum en mettant l'url de ton image dans src="url_de_l_image_a_mettre"


    Pour l'image de fond derrière le titre de la catégorie, c'est à changer dans le background-image ici :
    Code:
    /*Fond du titre de la catégorie*/
    span.cate_title {
      display: block;
      background-image: url('http://img15.hostingpics.net/pics/956965Sanstitre.png');
      width: 740px;
      margin: 15px;
      padding: 10px;
      padding-bottom: 0px;
    }



    The One Pandemonium
    The One Pandemonium
    FémininAge : 26Messages : 97

    le Mar 25 Nov 2014 - 20:53

    Grand merci encore Onyx! <3



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Onyx) Catégorie assez simple [Template et Css] 1416253868-ladycrowcoupe
    Contenu sponsorisé


      La date/heure actuelle est Dim 17 Nov 2019 - 19:16