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.

-44%
Le deal à ne pas rater :
Samsung Galaxy M33 5G 6GB Ram 128 Go 5000 mAh Dual Sim
179.99 € 319.99 €
Voir le deal

    Personnalisation du libre service "catégories simplettes" par Onyx

    Örmée
    Örmée
    MasculinAge : 35Messages : 139

    Ven 20 Mar 2020 - 11:49

    Personnalisation du libre service "catégories simplettes" par Onyx



    Bonjour à tous et à toutes !
    Nous aurions besoin de votre aide pour le codage de notre futur forum.
    Nous avons trouvés notre bonheur pour pas mal de choses dans le Libre Service.

    Néanmoins, pour les catégories, nous aurions besoin d'une personnalisation et ce, un peu plus poussé qu'un simple changement de couleur.
    https://www.never-utopia.com/t52469-categories-simplettes
    C'est donc pour cela que je poste ici plutôt qu'ailleurs.
    Je tâcherais d'être la plus précise possible.
    D'avance, nous remercions celui ou celle qui s'occupera de notre demande. cheers


    Schéma(s) et Eléments


    Schémas : Personnalisation du libre service "catégories simplettes" par Onyx Ccyp

    Cadre rose : bloc catégorie s'adaptant à la nouvelle largeur avec image de fond, centrage du texte
    Bloc jaune : message new, no new, lock, d'une taille de 115*200
    Cadre bleu claire : vous pouvez le laisser comme dans le Libre Service
    Cadre vert clair : adapter le bloc qui comprend une image pour qu'elle englobe la totalité des autres blocs (sauf le bloc catégories)
    Cadre orange : image de la largeur du bloc sous-forum avec une hauteur harmonisé par rapport au bloc message new, etc. Effet atténuation gardé.
    Cadres bleus : blocs sous -forum avec liens centrés et bloc description avec texte justifié.

    Tailles des éléments : Je pense que le bloc de départ dans le Libre Service était de 750 pixels (pour le bloc catégories), nous aimerions qu'il s'adapte de manière à prendre la largeur totale, image des news comprit qui lui fait 115 pixels de largeur. Quant à la hauteur du bloc sous-forum, vous pouvez l'adapter pour harmoniser le tout, quitte à changer un peu la hauteur du message new etc.
    Effets voulus : Le même effet actuel sur l'image mais adapté à toute la longueur du bloc sous-forum.
    Version de votre forum : PHPBB2


    Ressources


    Vous pouvez utilisez les mêmes que ceux dans le Libre Service, je les personnaliserais par la suite lorsque le thème sera assez bien avancé.


    Autres précisions ?


    J'espère que le shémas et les explications sont assez claires. Le forum est actuellement en construction, je vous mets ici le lien du forum test qui sert à la création du forum : https://oncmeliaminor-test.forumactif.com/
    Un crédit de Never Utopia ainsi que du codeur qui aura réalisé notre demande sera intégré directement dans la Page d'Accueil au même endroit que les crédits des images utilisés.

    Encore merci à celui ou celle qui prendra le temps de réaliser notre demande.
    Nous sommes conscient que le codage nécessite du temps, donc à votre aise :)

    L'équipe d'Oncmelia Minor :hudada:



    Dernière édition par Örmée le Sam 28 Mar 2020 - 14:19, édité 1 fois
    Örmée
    Örmée
    MasculinAge : 35Messages : 139

    Mar 24 Mar 2020 - 16:56

    Bonjour à tous,

    Petit message pour spécifier que la commande est toujours d'actualité :)

    Merci à vous o/
    Örmée
    Örmée
    MasculinAge : 35Messages : 139

    Jeu 26 Mar 2020 - 19:25

    Bonjour à tous o/

    En temps normal, je n'aurais pas up aussi vite mais vu qu'on a déjà, avec l'équipe, tâché d'arriver nous-même au résultat voulu, je me permets donc de upper pour vous spécifier qu'on a presque atteint notre but mais qu'il reste cependant deux "bugs" à devoir régler (jusqu'ici, on a pas trouvé)

    C'est donc un code hybride entre le LS d'Onyx et une précédente commande.

    Cela risque peut-être de piquer les yeux de certains d'entre vous mais nous débuttons en codage (ou plutôt, nous sommes vachement rouillés) donc voyez-nous plutôt comme les scientifiques qui multiplient les expériences pour obtenir un résultat plutôt brouillon Razz

    Voici le forum sur lequel le codage est le plus avancé : https://azrae-rpg.forumactif.com/
    Vu qu'on est plusieurs à bosser dessus, nous avons chacun notre fofo "test" x)

    Aperçu de ce que cela donne actuellement :

    Personnalisation du libre service "catégories simplettes" par Onyx J7z7

    Voilà le code du template :

    Code:
    <link href='http://fonts.googleapis.com/css?family=Lobster|Great+Vibes' rel='stylesheet' type='text/css' />
      <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="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>  <!-- BEGIN inc -->
          <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
          <!-- END inc -->
          <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
          <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">
                  Sujets: <em>{catrow.forumrow.TOPICS}</em> | Messages: <em>{catrow.forumrow.POSTS}</em>
                </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_bloc_sous_forums">
                        <div class="cate-orme">{catrow.forumrow.FORUM_DESC}
                <div class="ss-forum"><div style="text-align: center;width: 100%;margin: auto;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
                  <script type="text/javascript">$('.ss-forum').each(function(){$(this).html($(this).html().replace(/>, /g,"><br />"));});</script>
                </div>
                <script type="text/javascript">
                  jQuery('#forum_sous_forums2').html(jQuery('#forum_sous_forums2').html().replace(/, /g,'<br />')).removeAttr('id');
                </script>
              </div>
              <div class="forum_bottom">
             
            </div>
          </div>
        </td>
      </tr>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
      </tbody></table>
    <!-- END tablefoot -->
    <!-- END catrow -->

    Et le code du CSS:

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


    /*Catégorie*/
    .cate {
      margin: auto;
      margin-bottom: 10px;
      padding-bottom: 5px;
      background-color: #0f120f;
      border: 2px solid #1f1d1a;
      width: 900px;
    }

    /*Fond du titre de la catégorie*/
    span.cate_title {
      display: block;
      background-image: url('https://2img.net/r/hpimg4/pics/781032956965Sanstitre.png');
      width: 900px;
      margin: 15px;
      padding: 5px;
    }
    /*Titre de la catégorie*/
    .cate_title h2 {
      display: block;
      margin: 0px;
      padding: 0px;
      font-family: 'Great Vibes';
      font-size: 36px;
      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-image: url('https://2img.net/image.noelshack.com/fichiers/2014/48/1416945713-pattern.png');
      text-align: center;
      color: #7b848f;
    }


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

    /*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: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-shadow: 1px 1px 1px #000000;
      color: #23709e!important;
      font-style: italic;
      font-weight: normal;
      letter-spacing: 2px;
      padding-bottom: 5px;
      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: 12px;
    }

    /*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: 0px;
      margin-bottom: 3px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
    }
    /*Placement de l'image du dernier message*/
    .forum_last_mess span > a:nth-last-of-type(1) img {
      display: inline-block;
      position: absolute;
      top: 0px;
      left: 0px;
      margin-left: -25px;
      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: arial;
      font-style: normal;
      font-weight: normal!important;
      font-variant: normal;
      font-size: 12px;
      text-shadow: 1px 1px 1px #101010;
    }


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


    /* Container */
    .cate-orme{
      width: 740px;
      min-height: 120px;
      max-height: 215px;
      display: flex;
    }
    /* CSS pour les sous-forums plus hauts */
    .cate-orme > .large{
      height: 215px !important;
    }
    /* Style de l'image de fond */
    .cate-orme > img{
      position: absolute;
      opacity: 1;
      z-index: 1;
      -o-transition: ease-in 0.75s;
      -moz-transition: ease-in 0.75s;
      -webkit-transition: ease-in 0.75s;
      transition: ease-in 0.75s;
    }
    /* Diminution de l'opacité au survol */
    .cate-orme:hover > img{
      opacity: 0.1;
    }
    /* Style de la description & de l'ensemble des sous-forums */
    .cate-orme > .desc, .cate-orme > .SI, .cate-orme > .fin, .cate-orme > .ss-forum{
      -o-transition: ease-in 0.75s;
      -moz-transition: ease-in 0.75s;
      -webkit-transition: ease-in 0.75s;
      transition: ease-in 0.75s;
      height: 120px;
      padding: 5%;
      overflow: auto;
      z-index:2;
    }
    /* Le texte est transparent par défaut. */
    .cate-orme > .desc, .cate-orme > .ss-forum{
      opacity: 0;
    }
    /* S'il n'y a pas d'image de fond, le texte apparaît. */
    .cate-orme > .SI{
      opacity: 1 !important;
    }
    .cate-orme > .SI ~ .ss-forum{
      opacity: 1 !important;
    }
    /* Affichage de la description & de l'ensemble des sous-forums au survol */
    .cate-orme:hover > .desc, .cate-orme:hover > .ss-forum{
      opacity: 1;
    }
    /* Taille du bloc de description s'il y a des sous-forums */
    .cate-orme > .desc, .cate-orme > .SI{
      width: 75%;
      padding: 5px 25px;
      text-align: justify;
    }
    /* Taille du bloc de description s'il n'y a pas de sous-forums */
    .cate-orme > .fin{
      width: 100%;
      padding: 5px 25px;
      text-align: justify;
    }
    .cate-orme > .fin ~ .ss-forum{
      width: 0px !important;
      padding: 0 !important;
    }
    /* Taille du bloc des sous-forums */
    .cate-orme > .ss-forum{
      width: 25%;
      padding: 5px 25px 5px 0;
      display: flex;
    }


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

    Bref, vous pouvez voir qu'on a réussi à remettre la colonne avec les images messages mais que celle-ci est non seulement surdimensionnée mais elle n'est pas reprise dans le bloc qui contient actuellement l'image.

    Le second problème est au niveau de la taille de la zone catégorie mais on se doute qu'une fois le première problème réglé, le second se réglera automatiquement aussi Question

    Nous y sommes presque et nous continuons de chercher au cas où même si là, pour l'instant, nous n'avons pas trouvé la solution. :cow:

    Au plaisir de vous lire o/
    Örmée
    Örmée
    MasculinAge : 35Messages : 139

    Sam 28 Mar 2020 - 14:21

    Bonjour à tout le monde ! :love:

    Après quelques jours d'efforts intenses pour notre cerveau, nous avons fini par obtenir l'effet recherché ! :omg:

    La commande n'a donc plus lieu d'être :)

    Merci à NU pour ses Libres Services et ses nombreux tutos qui nous ont aidés ! :love:

    Nous ne manqueront pas de vous citer allégrement sur la PA de notre futur forum. cheers

    L'équipe d'Oncmelia Minor :hudada:
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5239

    Mar 31 Mar 2020 - 19:25

    Merci d'être venu nous tenir au courant :) ! J'archive le sujet et bon courage ♥

    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Aoû 2022 - 12:43