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.


1 résultat trouvé pour D2EEF0

Mission #9 - les catégories, c'est du gâteau [ TOUS niveaux ] - Mer 17 Aoû 2016 - 0:31

Oyé oyé !
Tentons aujourd'hui de dédiaboliser nos chères catégories de forumactif ou, si l'on en est familier, d'atteindre la paroxysme de l'originalité (oui oui rien que ça, visons haut les amis). Cette mission s'adresse à TOUS, mais vraiment, vraiment: à TOUS. A TOUS. Je m'explique. A travers différents exercices (trois à l'heure actuelle, si vous avez des idées, n'hésitez pas à m'envoyer un MP), quelque soit votre niveau, vous pouvez participer.

Ne t'enfuis pas jeune novice ! *Youp attrape jeune novice sauvage par le col* Je fournirais TOUS les tutoriels nécessaires à la réalisation de catégories, et je jure solennellement de la facilité de ces tutoriels. En effet ils n'utilisent pas de tableaux, tout est placé en unité de longueur (pixel généralement, pourcentage pourquoi pas). C'est donc plutôt facile. De plus, je vais aussi répertorier tout ce qui fait office de "détails" (les tutos sur les animations typiquement, ou celui sur l'ajout de l'avatar du membre), pour pouvoir atteindre ce que tu souhaites réellement. Le gros avantage d'une mission est que tu n'es pas tenu à l'anonymat des défis, tu peux donc poster dans "problème avec mon code" ou à la suite afin que l'on puisse t'aiguiller (et c'est même mieux <3 ). T'aiguiller, oui, pas te mâcher le boulot ! Le but est réellement que tu progresses et que finalement, tu réalises la facilité de la chose, pour peut-être t'essayer à plus compliqué, qui sait ?! Les exercices 1 et 2 seront tout à fait dans tes cordes héhé, et si l'envie t'en prends, n'hésite pas à participer à l'exercice 3. N'hésite pas à poser des questions si tu n'as pas compris quelque chose dans les tutos fournis !

Et toi qui connaît quelques arcanes secrets du codage (ou qui a déjà lu tous ses tutos mwaha), ne tourne pas les talons ! L'exercice 3 demande de meilleurs connaissances car il s'agit en fait de déconstruire complètement la structure basique de forumactif, d'aller vers le plus originale, le plus foufou pourquoi pas! La participation de Palcopie au défi
"repenser le design des forums" m'a trèèèèès fortement inspiré cet exercice. Tu peux aussi participer aux deux autres exercices, revoir les bases ne fait pas de mal et le deuxième porte plutôt sur la capacité à harmoniser, à coder en fonction d'un design.

Exercice 1 - Pour commencer, exercice libre
En bref : Zouuuu, il est temps de créer ses propres catégories à l'aide de tutoriels et pour commencer, d'un petit schéma. L'exercice est sous spoiler à la suite :

Exercice 1:
Etape 1- Réfléxion
Okhmaka avait délivré un merveilleux conseil qui aide énormément: avant de coder, réfléchissez à la structure, au design de ce que vous avez en tête. Le codage en sera plus aisé car vous saurez directement comment vous souhaitez agencer les choses. Je vous conseille de faire un schéma (sur du papier c'est très bien), ou encore, si vous êtes familier avec un logiciel de graphisme, de faire une maquette complète (très utile pour donner la taille exacte des éléments,mettre le code des couleurs etc). Ce serait sympa de poster ce schéma à la suite, ainsi vos posts futurs montreront l'évolution de votre codage et nous arriverons mieux à vous aiguiller.


Etape 2- la base
Il est temps de réaliser la "base", ce que j'entends par ce mot est: l'espace dans lequel nous allons agencer les choses. Si vous êtes férus de métaphores, la "base" est le terrain vierge sur lequel vous allez construire votre maison. Vous ne devez pas le dépasser, cela empièterait sur le territoire d'un voisin. Okhmaka a réalisé un tuto géniallissime à ce sujet, il enlève tous les tableaux et finalement cela simplifie énormément la chose.  Vous n'êtes pas du tout obligé de créer deux colonnes, vous pouvez justement mettre une largeur suffisante pour qu'il n'y en ait qu'une.

Etape 3- Agencement des éléments dans la base
Là aussi, la suite du tuto d'Okhmaka est très pratique ! Pas de tableaux, on place tous à coup de "margin" (les marges extérieurs d'un élément, les padding étant les marges intérieures)

Etape 4- Les détails, petites fioritures en plus
Tout d'abord, je vous conseille de lire ce tuto afin de vous familiariser brièvement avec toutes les propriétés, et donc de pouvoir mieux réaliser ce que vous souhaitez . Par exemple, si vous souhaitez mettre un dégradé, une ombre porté, ce tuto peut vous aider.

Vous souhaitez utiliser des polices différentes ? Allez faire un tour sur google font, trouver la police qui fait battre votre coeur, puis ajouter une ligne de cette forme (que vous trouvez en cliquant sur quick use de la police en question) :
Code:
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

Vous devez l'ajouter à votre template overall_header, juste après la balise < head > qui se trouve au début du template.

Ensuite, il y'a certains éléments que vous souhaitez intégrer mais qui ne sont pas fournies dans le tuto d'Okhmaka ?
Pour l'avatar du dernier posteur, voici un tuto de Shadow sur le forum des forums.
Je renflouerais certainement cette partie mais je ne vois pas, à l'heure actuelle (avec mon cerveau fatigué), ce qui pourrait manquer. N'hésitez pas à me faire part de vos besoins en la matière !


Etape 4- Les détails, les animations
Un super tuto d'Aeden explique bien le principe des animations  . Si vous l'associez à votre connaissance de différentes propriétés, vous pourrez réaliser de petites animations sympathiques et toutes simples ! (comme le fait d'espacer le texte au survol, de changer de couleur etc... )


Exercice 2 - réaliser des catégories selon un thème pré-existant, harmoniser son design
En bref: s'appuyer sur un design de base pour créer des catégories qui s'harmonisent bien avec lui. Des images diverses sont fournies !


Exercice 2:
Pour cet exercice, vous aurez besoin d'un forum test vierge en PHBB2 . Je vais vous fournir le lien d'une bannière, de différentes images pouvant servir au "no new", "new", "lock" ou encore d'images de catégories, ainsi que du CSS "rudimentaire" à placer dans la feuille de style de votre forum test (affichage ->couleur->feuille de style css). A vous alors d'essayer de créer les catégories les plus en accord avec le thème ! (ou l'idée que vous vous en faites) Vous êtes donc libres mais vous faites aussi face à une exigence héhé. L'image du thème de base est juste au dessus. Vous pouvez modifier les couleurs déjà pré-établies par mes soins.


Etape 1- Réfléxion
Okhmaka avait délivré un merveilleux conseil qui aide énormément: avant de coder, réfléchissez à la structure, au design de ce que vous avez en tête. Le codage en sera plus aisé car vous saurez directement comment vous souhaitez agencer les choses. Je vous conseille de faire un schéma (sur du papier c'est très bien), ou encore, si vous êtes familier avec un logiciel de graphisme, de faire une maquette (très utile pour donner la taille exacte des éléments,mettre le code des couleurs etc).

Etape 2- A vos codes !
Vous pouvez vous aider des tutoriels de l'exercice 1 bien sûr ^^


La base, images, couleurs et préférences:
La bannière ou "logo du forum" dans Gestion des images:
Code:
http://zupimages.net/up/16/32/gbox.png


Dans affichage > gestion des couleurs > deux couleurs ont été modifiées dans couleurs de fond. Il s'agit de : (fond de page en #EBDEC5 et couleur intérieur du cadre du forum en #D2EEF0 )

Les préférences
Dans Général > forum > configuration > structure des pages, mettez un nombre plutôt qu'un pourcentage. J'ai mis 600 personnellement. Comme ceci:


Dans affichage > page d'accueil > structure et hiérarchie, choisissez ce que vous préférez mais généralement, les forums se tournent vers "séparer les catégories sur l'index" en "moyen", comme ceci :


Dans affichage> page d'accueil > En-tête & Navigation, sélectionner la position du logo centré. Comme ceci :



La base, le css rudimentaire et une template modifiée:


Une template a été modifié afin de mettre la barre de navigation en haut et rajouter une police (le link...etc après la balise head, au tout début). Libre à vous d'en ajouter d'autres bien sûr ! Dans Affichage > template > overall_header, remplacez tout par ceci :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>

<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
  
  
  
  <div id="navigation"><div id="navig">{GENERATED_NAV_BAR}</div></div>
  
  
  
  
  
  
  <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>


            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->


Et ajouter ceci en CSS pour personnaliser la barre de navigation (affichage > couleurs > feuille de style css ):

Code:
.bodyline {
padding-right:0px; padding-left: 0px; padding-top:40px; /* enlève les marges à la bannière */
}

#navigation {
  position: absolute; /* place la barre nav en haut */
  top: 0px;
  z-index: 999;
  width: 100%;
  background-color: #d7ad7c;
  text-align: center;
  border-bottom: 2px solid white; /* bordure de la barre nav si vous voulez la changer */
  margin-top: 0px;
  padding: 8px;
}

#navigation img {
display: none; /* un moyen de flemmard de ne pas afficher les images via css, img etant pour cibler les images dans navigation */
}

#navigation a {
  font-size: 17px; /* le a permet de cibler uniquement les liens dans navigation */
  color: white;
  text-decoration: none;
  font-family: 'Indie Flower', cursive;
}



Les images fournies pour les catégories:

Ces images sont de diverses tailles, à vous de les rétrécir avec un logiciel mais, beaucoup mieux: de les ajuster via CSS !!!!! Si jamais vous désirez mon psd de photoshop de la bannière pour avoir plus de ressources, envoyez moi un MP. Vous pouvez aussi utiliser d'autres images bien entendu. Voilà pour le moment les images que je fournis :


















Exercice 3 - Rendre méconnue la structure de base
Vous avez compris le but: abats la structure de base de forumactif, ouvrez la porte à toutes vos envies les plus folles ! Ce qui serait pas mal, c'est de vous poser un objectif en terme de difficultés, d'essayer de poser par écrits vos questionnements sur le sujet, les difficultés que vous rencontrez, en somme, le cheminement de votre codage (mais vous n'êtes pas du tout obligé) (ça peut juste permettre à d'autres de se questionner avec vous quand à votre but, de progresser ensemble vers une connaissance encore plus grande) (MWAHAHAHAHA oui la connaissance mérite un rire diabolique)

Exemple de la participation de Palcopie au défi "repenser le design des forums" :



Revenir en haut

La date/heure actuelle est Ven 17 Aoû 2018 - 5:16