AccueilDernières imagesRechercherS'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.

-17%
Le deal à ne pas rater :
Casque de réalité virtuelle Meta Quest 2 128 Go Blanc (+29,99€ ...
249.99 € 299.99 €
Voir le deal

    Catégories style science-fiction bleues

    Cheshire Cat
    Cheshire Cat
    FémininAge : 26Messages : 975

    Ven 27 Mai 2016 - 1:22



    Bonjour amis de Never Utopia ! Aujourd'hui je vous présente une toute nouvelle catégorie.

    Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

    Ces catégories sont faites pour la version PHPBB2 avec une hiérarchie séparée moyenne.

    Merci d'ajouter un crédit à Never Utopia sur votre forum.

    Réalisé à la demande d'Arkaline.

    Catégories style science-fiction bleues Z268

    Alors, elles sont pas toutes belles ! :face:

    - La taille de la création est d'environ 900 pixels
    - Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.
    - La taille de l'avatar du dernier poste_r est fixée à 63 pixels de largeur.
    - Vous êtes autorisés à ne pas activer l'affichage des sous-forums.
    - Des indications ont été ajoutées dans le code pour ne pas vous perdre à certains endroits.

    Pour commencer l'installation de nos nouvelles catégories, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > Index_box et remplacer le code d'origine par le suivant. Une fois cela fait, enregistrez et validez votre template.
    Code:
    <link href='https://fonts.googleapis.com/css?family=Montserrat|Raleway' 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="fondcat" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
         <th colspan="4" nowrap="nowrap" class="titrecat">{catrow.tablehead.L_FORUM}<div class="barrecat"></div></th>
     </tr>
     <!-- END tablehead --><!-- BEGIN cathead -->
       <tr>
             <!-- BEGIN inc -->
     <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
     <!-- END inc -->
     <td colspan="4">
     <h1 class="titrecat">{catrow.cathead.CAT_TITLE}</h1>
     </td>
     </tr>
     <!-- END cathead -->
     <!-- BEGIN forumrow -->
     <tr>
     <td>
     <img class="imgcat" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
     </td>
     <td>
     <h2 class="titrefrm">
     <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
     </h2>
     <div class="descricat">{catrow.forumrow.FORUM_DESC}</div>
     <div class="sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
     </td>
                    <td>
                            <div class="derniermessage">
                              <span class="topics">{catrow.forumrow.TOPICS}</span>
                              <span class="messages">{catrow.forumrow.POSTS}</span><br />
                             {catrow.forumrow.LAST_POST}
                            </div>
                    </td>
     <td>
                
                   <div class="avatardernierposter">
                              <!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar -->
                       </div>
     </td>
     </tr>
     <!-- END forumrow -->
     <!-- BEGIN catfoot -->
     <tr>
     <!-- BEGIN inc -->
     <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
     <!-- END inc -->
     <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
     </tr>
     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Ensuite, nous allons avoir besoin d'ajouter les descriptions des forums. Pour cela, nous allons faire Généralités > Forum > Catégories et forums. Dans chaque description, il va falloir copier ce code.
    Code:
    <img alt="Image au dessus de la description" src="http://zupimages.net/up/16/15/ml8e.png" />
    <div class="texte">
     Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur.
    </div>

    Notre code n'est cependant pas complet et nous allons devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS
    Code:
    /*Début Catégories par Cheshire Cat*/
    .fondcat{
      width:875px;
      margin:auto;
      margin-top:10px;
      margin-bottom:5px;
      padding-top:7px;
      padding-bottom:13px;
      background-color:#142342;
      border-left:5px solid #0393da;
      border-right:5px solid #0393da;
    }
    .imgcat{
      position:relative;
      top:1px;
      width:100px;
      height:100px;
      margin-left:5px;
      border:1px solid #0393da;
    }
    .titrecat h2{
      position:relative;
      z-index:2;
      color:#142342;
      font-size:25px;
      font-family: Impact;
      font-weight:normal;
      letter-spacing:2px;
      font-style:italic;
      text-shadow:0px 0px 5px #0393da;
      text-transform:uppercase;
      text-align:center;
    }
    .barrecat{
      z-index;1;
      position:relative;
      bottom:25px;
      width:850px;
      height:10px;
      margin:-15px auto -15px auto;
      background-color:#0393da;
      border-radius: 100% 100%;
      box-shadow:0px 0px 2px #0393da;
    }
    .titrefrm{
      position:relative;
      top:5px;
      font-size:18px;
      font-family: Impact;
      text-align:center;
      text-transform:uppercase;
      font-style:italic;
      font-weight:normal;
    }
    .titrefrm a{
      color:#0393da; /*Couleur du texte du forum*/
      text-decoration:none;
      letter-spacing:0px;
      -webkit-transition:all 0.5s ease-out;
      transition:all 0.5s ease-out;
    }
    .titrefrm a:hover{
      color:#FFFFFF; /*Couleur du texte du forum au survol*/
      letter-spacing:5px;
      text-decoration:none !important;
      -webkit-transition:all 0.5s ease-in;
      transition:all 0.5s ease-in;
    }
    .descricat{
      position:relative;
      bottom:5px;
      left:5px;
      width:500px;
      height:80px;
      border:1px solid #0393da;
    }
    .descricat img{
      width:500px;
      height:80px;
    }
    .descricat .texte{
      position:absolute;
      top:0px;
      width:480px;
      height:59px;
      margin:5px;
      padding:5px;
      background-color:#FFFFFF;
      border:1px solid #0393da;
      overflow:auto;
      text-align:justify;
      font-family: 'Raleway', sans-serif;
      font-size:12px;
      color:#304f8c;
      opacity:0;
      -webkit-transition:all 0.4s ease-out;
      transition:all 0.4s ease-out;
    }
    .descricat .texte:hover{
      opacity:1;
      -webkit-transition:all 0.4s ease-in;
      transition:all 0.4s ease-in;
    }
    .sousforum{
      position:relative;
      bottom:5px;
      left:5px;
      width:502px;
      min-height:18px;
      padding-top:2px;
      background-color:#0393da;
      border-bottom-left-radius:50% 75%;
      border-bottom-right-radius:50% 75%;
      text-align:center;
      font-size:0px;
    }
    .sousforum a{
      padding-right:10px;
      font-size:11px;
      color:#FFFFFF; /*Couleur des liens des sous-forum*/
      font-family: 'Montserrat', sans-serif;
      -webkit-transition:all 0.5s ease-out;
      transition:all 0.5s ease-out;
    }
    .sousforum a:hover{
      color:#304f8c; /*Couleur des liens du sous-forum au survol*/
      text-decoration:none !important;
      -webkit-transition:all 0.5s ease-in;
      transition:all 0.5s ease-in;
    }
    .derniermessage{
      width:140px;
      height:80px;
      margin-top:1px;
      margin-left:5px;
      padding:10px;
      background-color:#FFFFFF;
      border:1px solid #0393da;
      text-align:center;
      font-family:'Raleway', sans-serif;
      font-size:11px;
      color:#304f8c;
      line-height:20px;
    }
    .topics{
      padding-right:30px;
      font-size:30px;
      font-family: Impact;
      color:#FFFFFF; /*Mettre la couleur de fond du cadre derniermessage*/
      text-shadow:1px 1px 0px #0393da; /*Couleur pour afficher le texte*/
    }
    .messages{
      padding-left:5px;
      font-size:25px;
      font-family: Impact;
      color:#FFFFFF; /*Mettre la couleur de fond du cadre derniermessage*/
      text-shadow:1px 1px 0px #0393da; /*Couleur pour afficher le texte*/
    }
    .derniermessage a{
      text-decoration:none;
      -webkit-transition:all 0.5s ease-out;
      transition:all 0.5s ease-out;
    }
    .derniermessage a:hover{
      color:#727bc4; /*COuleur du liens du sujet au survol*/
      text-decoration:none !important;
      -webkit-transition:all 0.5s ease-in;
      transition:all 0.5s ease-in;
    }
    .avatardernierposter{
      width:63px;
      height:100px;
      margin-top:1px;
      margin-left:4px;
      margin-right:5px;
      border:1px solid #0393da;
      background-color:#FFFFFF;
      overflow:hidden;
      visibility:visible;
    }
    .avatardernierposter img{ /*Redimenssion de l'avatar du dernier posteur*/
      margin-top:-5px;
      width:63px;
    }
    /*Fin Catégories par Cheshire Cat*/

    Vous n'avez pas besoin de poster à la suite de ce message pour voir les codes, mais un petit "Merci" fait toujours plaisir ! Very Happy

    Mettre/laisser un crédit vers Never-Utopia est obligatoire.


    Dernière édition par Cheshire Cat le Mar 12 Sep 2017 - 20:48, édité 9 fois
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 24 Juil 2016 - 5:49

    Salut!

    Alors prem : C'est pour quel version de forum? Et quelle structure et hiérarchie? Je dirais phpbb2 avec hiérarchie séparée sur l'index moyen, mais je ne suis pas sûre u_u Il faut ajouter cette information à ton premier post.

    Dans ton template, pourquoi ton forumrow commence avant le cathead? Il est pas supposé, il doit commencer après.

    Sinon, sans nécessairement ajouter un crédit, il faudrait que tu mentionnes que les utilisateurs doivent ajouter un crédit vers NU à quelque part sur leur forum.

    Sinon, la transition du titre sur firefox ne fonctionne pas parce que par défaut, la valeur de base de firefox est "normal". Donc cela passe de "normal" à "5px", soit 2 statuts différents à la place de "0px" à "5px" qui suit une échelle de valeur et sur laquelle une transition peut être utilisée. Va savoir pourquoi firefox est le seul navigateur assez stupide pour ne pas comprendre que normal veut automatiquement dire 0px... Même Internet Explorer le voit...
    Bref, il faudrait que tu rajoutes un letter-spacing: 0px; au titre sans hover.

    Sinon, je crois que c'est tout pour moi, ça fonctionne bien et c'est joli ^^



    Cheshire Cat
    Cheshire Cat
    FémininAge : 26Messages : 975

    Sam 6 Aoû 2016 - 16:13

    Coucou !
    Les modifications ont été faites, mais par contre le forumrow se termine après le cathead donc j'ai laissé comme ça ^^
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 6 Aoû 2016 - 19:10

    Salut!

    Petite description :
    > Catrow (Begin) : Contient 1 catégorie et se répète X fois selon le nombre de catégories sur le site.
    > > Tablehead (Begin et End) : Haut du tableau (si on est en mode "collé sur l'index", c'est le titre du site et si on est en mode "séparé sur l'index",c'est le nom de la catégorie).
    > > > Cathead (Begin et End) : Haut de la catégorie avec hiérarchie "collé sur l'index". Ne sert à rien en mode "séparé sur l'index".
    > > > Forumrow (Begin et End) : Contient 1 forum et se répète X fois selon le nombre de forums dans 1 catégorie.
    > > > Catfoot (Begin et End) : Bas de la catégorie avec hiérarchie "collé sur l'index".  Ne sert à rien en mode "séparé sur l'index".
    > > Tablefoot (Begin et End) : Bas du tableau (en mode "séparé sur l'index", c'est le bas de catégorie).
    > Catrow (End) : Fin.

    Donc j'insiste. Le cathead se commence et se termine avant le forumrow. Cela ne cause pas trop de problèmes puisque tu utilises la hiérarchie séparée, mais c'est quand même une erreur de structure.


    Dernière édition par Onyx le Lun 8 Aoû 2016 - 1:07, édité 1 fois



    Cheshire Cat
    Cheshire Cat
    FémininAge : 26Messages : 975

    Sam 6 Aoû 2016 - 19:28

    Bon d'accord, c'est juste que j'ai mal compris je pense x)
    Bon c'est modifié du coup ^^
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 16 Oct 2016 - 1:57

    Salut!

    Cela semble bon alors je valide! Le sujet sera bientôt déplacé dans le Libre Service Wink



    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Sam 25 Fév 2017 - 19:26

    Merci !
    Anonymous
    Invité

    Sam 25 Fév 2017 - 23:16

    Merci pour le partage !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 11:27