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.


114 résultats trouvés pour phpBB2

[HTML5 & CSS3] - Boutons 'Nouveau' & 'Répondre' originaux - Ven 3 Juil 2015 - 16:23




Boutons 'Nouveau' & 'Répondre" originaux


Bonjour à tous ! Alors voici un petit ls concernant les boutons 'Nouveau' et 'Répondre' qui servent respectivement à créer un nouveau sujet et à répondre à un autre, mais ça, vous le saviez déjà.

C'est pourquoi j'ai choisi aujourd'hui de les placer un peu comme des widgets sur la page de visualisation des sujets et des messages.


Pour avoir un petit aperçu je vous invite à checker ce lien où les boutons sont en position fixe sur le côté du forum et où les boutons bougent pour se dévoiler à 100% quand on les survole.



Nous n'allons utiliser dans ce ls que les template 'viewforum_body' et 'viewtopic_body' ainsi que nos CSS.


Je vous rappelle que, vu que nous modifions les templates il sera necessaire que votre forum tourne sous PHPBB2.

Je tiens à rapeler aussi que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci  :toto:



Occupons-nous donc tout d'abord de nos deux templates. Dans le premier qui est 'viewforum_body' nous allons supprimer ce code qui apparaît deux fois:


Code:

<td align="left" valign="middle" width="50">
   <!-- BEGIN switch_user_logged_in -->
   <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}1" alt="{L_POST_NEW_TOPIC}" border="0" /></a>
   <!-- END switch_user_logged_in -->
</td>


Nous allons maintenant tout simplement intégrer ce code:


Code:

<span class="new_topic"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" alt="{L_POST_NEW_TOPIC}" class="new_topic_img"/></a></span>


Que vous pouvez placer n'importe ou dans votre template. Le mieux étant de le mettre à la première ou à la dernière ligne pour s'y retrouver.
Passons maintenant au second template, 'viewtopic_body'. Nous allons procéder de la même manière. Vous allez rechercher ce code qui apparaît deux fois également et que vous allez supprimer.


Code:

<td align="left" valign="middle" nowrap="nowrap">
   <span class="nav">
   <!-- BEGIN switch_user_authpost -->
   <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
   <!-- END switch_user_authpost -->
   <!-- BEGIN switch_user_authreply -->
   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
   <!-- END switch_user_authreply -->
   </span>
</td>   


Et nous allons ensuite intégrer ce code que vous pouvez placer également n'importe où SAUF entre les balises et présentes dans ce template.


Code:

<span class="new_topic"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" alt="{L_POST_NEW_TOPIC}" class="new_topic_img"/></a></span>
<span class="reply"><a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" class="reply_img"/></a></span>


Vous pouvez maintenant enregistrer et publier vos templates, et nous allons s'occuper des CSS à présent. Un CSS ici qui n'est pas très compliqué et qui fait appel aux propriétés 'transform' et 'transition' de CSS3.


Code:
/* DEBUT MISE EN PAGE BOUTONS NEW ET REPLY - FANGS */

.new_topic {
  position: fixed;
  top: 15px;
  left: -20px;
  -webkit-transition: 1s;
  transition: 1s;
}

.new_topic:hover {
  left: 0px;
}

.reply {
  position: fixed;
  top: 75px;
  left: -20px;
  -webkit-transition: 1s;
  transition: 1s;
}

.reply:hover {
  left: 0px;
}

/* FIN MISE EN PAGE BOUTONS NEW ET REPLY - FANGS */


Une dernière chose avant de vous laisser personnaliser. Pour vos images 'Nouveau' et 'Répondre' que vous pouvez bien évidemment modifier dans les réglages de votre forum.
Et bien sur vous pouvez personnaliser ces codes à l'infini, mais je vous conseille d'avoir quelques notions en codage pour ne pas... tout casser ?



Si vous avez une question, je vous rappelle que cette section est disponible !


Fangs

[HTML5 & CSS3] - Catégories & forums modernes - Mer 1 Juil 2015 - 18:58




Catégories et forums modernes

Bonjour à tous !  cheers


Me voici avec un nouveau libre service ! Ca faisait très longtemps que j'avais pas codé et du coup cet après midi je me suis dit qu'il était temps de s'y remettre !


Ce que je vous propose la c'est une mise en page des catégories et forums que j'aime pas mal. Je me suis bien débrouillé :)


Pour avoir un petit aperçu je vous invite à regarder cette image. (À noter que la description de forum apparaît au survol de l'image).


Il y a donc trois étapes à suivre pour ce LS donc:
- Le HTML dans les templates
- Le CSS
- Quelques codes dans la description de vos forums et dans votre titres de catégories


Je vous rappelle que, vu que nous modifions les templates il sera necessaire que votre forum tourne sous PHPBB2 ou PUNBB.

Je tiens à rapeler aussi que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci  :toto:

Assez parlé, tout d'abord on va premièrement se rendre dans le template 'index-box'. Vous allez tout selectionner et remplacer par ceci:


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>
<div class="index_fc">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="categorie">{catrow.tablehead.L_FORUM}</div>
   <!-- END tablehead -->
   <!-- BEGIN forumrow -->
      <div class="forum">
                <div class="forum_case">
                     <div class="description">
                        {catrow.forumrow.FORUM_DESC}
                     </div>
                     <div class="bottom_section"></div>
                     <div class="bottom_border"></div>                  
                     <div class="forum_name">
                           <a class="forum_link" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                     </div>
                     <div class="tnm">
                        {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                     </div>
                </div>
      </div>
   <!-- END forumrow -->

<!-- END catrow -->
</div>

N'oubliez pas de publier votre template. Donc à ce stade-ci, votre forum doit être aussi laid que possible. C'est pourquoi nous allons nous occuper des CSS, et plus particulièrement ceux-ci que vous allez coller dans vos feuilles de style:

Code:

/* DEBUT MISE EN PAGE CATEGORIES ET FORUMS - FANGS */
/* clearfix categorie - regle un bug*/
.index_fc::after {
  clear: both;
  content: "";
  display:block;
}

.categorie {
  position: relative;
  clear: both;
  height: 50px;
  position: relative;
  margin-top: 50px;
  margin-bottom: -18px;
  margin-left: 35px;
  z-index: 2;
}

.categorie_txt {
  position: relative;
  font-size: 40px;
  font-family: 'Josefin Slab', Georgia, serif;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  text-align: right;
}

.forum {
  width: 980px;
  margin: auto !important;
}

.forum_case {
  float: left;
  width: 490px;
  height: 245px;
  background-color: #111418;
}

.description {
  position: relative;
  width:490px;
  height: 245px;
  margin: 0 !important;
  padding: 0 !important;
}

.bottom_section {
  position: relative;
  margin-top: -40px;
  width: 490px;
  height: 40px;
  background-color: #fff;
  opacity: 0.3;
}

.bottom_border {
  position: relative;
  margin-top: -40px;
  width: 490px;
  height: 40px;
  border-top: 1px solid #fff;
}

.tnm {
  position: relative;
  margin-top: -30px;
  height: 30px;
  width: 480px;
  margin-right: 11px;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000;
  font-family: Georgia, Arial, serif;
}

.forum_name {
  position: relative;
  margin-top: -30px;
  height: 30px;
  width: 480px;
  margin-left: 10px;
  z-index: 2;
}

.forum_link {
  color: #fff !important;
  text-shadow: 1px 1px 2px #000;
  font-variant: small-caps !important;
  text-decoration: none;
  font-size: 16px;
  font-family: Georgia, Arial, serif;
}

.description_img {
  position: relative;
  width: 490px;
  height: 245px;
  margin-top: -245px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: all;
  transform: all;
}

.description_img:hover {
  position: relative;
  width: 490px;
  height: 245px;
  margin-top: -245px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: all;
  transform: all;
  opacity: 0.2;
}

.description_txt {
  position: relative;
  width: 460px;
  height: 215px;
  padding: 15px;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  font-size: 12px;
  font-family: Georgia, Arial, serif;
  text-align: justify;
}

/* FIN MISE EN PAGE CATEGORIES ET FORUMS - FANGS */

Les deux premières étapes sont terminées. Mais ce n'était que du copier-coller. Les deux porchaines risquent d'être un peu plus longues.


Vous allez vous rentre dans la configuration de vos catégories et forums et pour chaque titre de catégories vous allez entrer ce code:


Code:
<span class="categorie_txt">Nom de votre catégorie</span>

Et enfin vous allez vous rendre dans les description de vos forums et allez utiliser ce code:


Code:
<div class="description_txt">
       Lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet.    
</div>
<div class="description_img">
      <img alt="**" src="URL DE L'IMAGE 490*245" />
</div>

Cette étape peut paraître longue mais elle est nécessaire.


Bien sur vous pouvez personnaliser ces codes à l'infini, mais je vous conseille d'avoir quelques notions en codage pour ne pas... tout casser ?



Si vous avez une question, je vous rappelle que cette section est disponible !


Connexion rapide « flottante » (Templates+CSS) - Mer 20 Mai 2015 - 23:42




Connexion Rapide dans un bloc flottant

Bonjour à tous les N'Utopiens et N'utopiennes =)
Voici un petit tuto qui va vous aider à faire ce qui est indiqué dans le titre, inutile de le répéter je suppose, c'est assez clair =D

PHBB2
Vous devez être : Fondateur
Difficulté : Facile
Apercu : Ici



Puisqu'il est question de CONNEXION, il est impératif que vous soyez DÉCONNECTÉS chaque fois que vous voulez voir le rendu Wink en ce qui me concerne, je visualisais à partir d'un autre navigateur pour éviter de me connecter/déconnecter à chaque fois !


Pour éviter de retrouver la connexion rapide 2 fois sur le forum, vérifiez que l'option « connexion rapide » est décochée ! (Panneau d'admin -> affichage -> page d'accueil -> généralités -> affichage de la connexion rapide : ne pas afficher


Étape 1 - Template

Allez dans les templates -> général -> overall header.

Allez vers la fin du template, juste avant ceci :
Code:
<!-- BEGIN html_validation -->


Et collez ceci :
Code:
<!-- BEGIN switch_user_logged_out -->
<div class="fastconnex">
  <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form">
    <tr>
        <td width="100%" valign="top" align="center" class="row1"> 
            <label><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="20" name="username" /></label><br />
            <label><span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" size="20" name="password" /></label><br /><br />
            <input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
        </td>
    </tr>
</table>
</form>
  </div>
<!-- END switch_user_logged_out -->


Enregistrez et n'oubliez pas de publier le template !

Étape 2 - CSS

Collez ceci dans votre feuille de styles (CSS)

Code:
.fastconnex {
width:200px;/*largeur du bloc*/
height:200px;/*hauteur du bloc*/
background-color:#ABA9A6;/*couleur du fond*/
position:absolute;/*le bloc ne bougera pas*/
top:80px;/*on place le bloc a 100px du haut*/
right:30px;/*on place le bloc a 30px de la droite*/
border:5px solid #755b8e; /*bordure facultative*/
box-shadow: 3px 0px 5px #3d2f4a; /*ombre facultative*/
border-radius: 5px; /*Les bordures arrondies, facultatif*/
color: #555555; /*Couleur du texte*/
}


Si vous souhaitez que le bloc suive la page au scroll, remplacez la donnée « absolute » par « fixed ».

Vous pouvez placer le bloc où vous le souhaitez dans la page. Si vous voulez qu'il s'affiche à gauche, changez « right » par « left». De même, si vous souhaitez qu'elle soit plus au bas de la page, changez « top » par « bottom ».


Vous avez jusqu'ici toutes les informations nécessaires au bon fonctionnement du bloc, mais voici quelques trucs supplémentaires.

Modifier le texte


Modifier « Nom d'utilisateur »
Ciblez ceci dans le code template donné plus haut :
Code:
{L_USERNAME}
supprimez-le et écrivez tout simplement ce que vous voulez.

Modifier « Mot de passe »
Ciblez ceci dans le code template donné plus haut :
Code:
{L_PASSWORD}
supprimez-le et écrivez tout simplement ce que vous voulez.

Modifier « Connexion »
Vous commencez à saisir le principe Wink
Code:
{L_LOGIN}
supprimez-le et écrivez tout simplement ce que vous voulez.

Avoir une forme plus originale


Forme en cercle
Changez cette partie du CSS
Code:
border-radius: 5px;


Et remplacez par ceci
Code:
border-radius: 100px;



Modifier la forme avec une image

Ceci s'adresse à ceux qui savent grapher ou qui ont un graphiste sous la main ! =D
Pour plus de facilité, essayez d'établir d'avance la taille de votre bloc pour créer votre image au bon format.

Vous devez créer la forme vous-même dans un logiciel comme photoshop !
Dans le CSS, enlevez le « background-color » et changez-le pour ceci :

Code:
background-image:url("adressedevotreimage");
background-repeat:no-repeat


Exemple absolument magnifique (not)

Voilà ! Il y a une tonne de possibilités de modifications alors amusez-vous avec le CSS ! =)
J'espère que cela vous seras utile !

©️tuto by nemesis AKA wave



Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Invité

Qui est en ligne en tableau - Dim 17 Mai 2015 - 18:29

{#}html{/#} {#}css{/#} {#}qeel{/#} {#}auteur_Asphodèle{/#} {#}phpBB2{/#}



Qui est en ligne «Art Sport»


venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Invité

Barre de navigation «Art Sport» - Dim 17 Mai 2015 - 18:24

{#}html{/#} {#}css{/#} {#}navigation{/#} {#}effet_hover{/#} {#}position_fixe{/#} {#}auteur_Asphodèle{/#} {#}phpBB2{/#}




Barre de navigation «Art Sport»


Voir ce que ça donne

- La version du forum doit être PhpBB2.
- La navigation a largeur d'environ 855 pixels.


Le template overhall_header :::
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>
   <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>
    {RICH_SNIPPET_GOOGLE}

   <!-- 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');
         if(pm != null) { 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}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {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']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (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 class="navig" align="{MENU_POSITION}"><div class="navigin">{GENERATED_NAV_BAR}</div></div>
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.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" style="z-index: 10000 !important;">
      <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 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 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 -->


Le CSS :::
Code:
/* DEBUT BARRE DE NAVIGATION */
.navig {
  height: 41px;
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
}
.navigin {
  background-color: #BFCFC5;
  box-shadow: 0 0 5px #615B5A;
  font-family: Helvetica,Verdana,Arial;
  height: 41px;
  margin: auto;
  width: 855px;
  text-align: center;
  vertical-align: top;
}
.navig a.mainmenu {
  text-decoration: none;
  color: #F17272;
  display: inline-block;
  margin: 0px;
  font-family: Calibri;
  font-size: 15px;
  font-weight: 700;
  height: 30px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  text-decoration: none;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
}
.navig a.mainmenu:hover {
  background-color: #8DB09B;
}
.navig a.mainmenu img {
  display: none;
}
/* FIN BARRE DE NAVIGATION */


Pensez à me créditer (Fait par Asphodèle sur Never Utopia.)


code (c) crackle bones



Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Invité

Qui est en ligne «Art Sport» - Dim 17 Mai 2015 - 17:01

{#}html{/#} {#}css{/#} {#}qeel{/#} {#}auteur_Asphodèle{/#} {#}phpBB2{/#}



   

Qui est en ligne «Art Sport»

 venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Invité

Catégories «Art Sport» - Dim 17 Mai 2015 - 16:32

{#}html{/#} {#}css{/#} {#}categories{/#} {#}auteur_Asphodèle{/#} {#}phpBB2{/#}



   

Catégories «Art Sport»

venez poster ici.

Onyx

Catégories Grises/Noires plutôt basiques - Dim 3 Mai 2015 - 3:39



Catégories Grises/Noires plutôt basiques


Voici un petit LS de catégories très simples que j'ai faites pour la demande de Shakespeare.

Pour voir l'aperçu : cliquez ici.

Ce LS est en deux parties.
  • Tout d'abord, nous allons installer les catégories dans le template.
  • Puis, nous allons mettre en forme les catégories à l'aide du CSS.


- La version du forum doit être PhpBB2.
- Pour ce qui est de l'hiérarchie et la structure des catégories, il faut choisir "Séparer sur l'index : Moyen".
- Les catégories ont une largeur d'environ 800 pixels.
- Ce LS est fait pour des forums avec des noms assez courts parce qu'il n'y a pas beaucoup d'espace pour le nom.

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





1. Les catégories (Template Index_Box)



Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BOX

Puis, on va entièrement remplacer le template "Index_Box" par ceci :
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="categorie">
  <div class="cate_title">
    {catrow.tablehead.L_FORUM}
  </div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
  <div class="forum_bloc">
    <div class="forum_title">
      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
        {catrow.forumrow.FORUM_NAME}
      </a>
    </div>
    <div class="forum_stats">
      {catrow.forumrow.POSTS} messages et {catrow.forumrow.TOPICS} sujets
    </div>
    <div style="clear: both;"></div>
    <div class="forum_desc">
      <div class="forum_desc_desc">
        {catrow.forumrow.FORUM_DESC}
      </div>
    </div>
    <div class="forum_middle_bloc">
      <div class="forum_old_new_lock_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="forum_last_mess">
        {catrow.forumrow.LAST_POST}
      </div>
    </div>
    <div class="forum_sous_forums">
      <div class="forum_sous_forums_over">
        <span id="forum_sf">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
        <script type="text/javascript">jQuery('#forum_sf').html(jQuery('#forum_sf').html().replace(/, /g,',<br />')).removeAttr('id');</script>
      </div>
    </div>
    <div style="clear: both;">
    </div>
  </div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->





2. Mise en forme (CSS)



Si vous regardez vos catégories, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme nos catégories à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/**************************************** DÉBUT DES CATÉGORIES ****************************************/

/*Bloc de catégorie*/
.categorie {
  width: 790px;
  margin: auto;
  margin-bottom: 15px;
  color: #656565;
}

/*Liens des catégories*/
.categorie a, .categorie a.gensmall, .categorie .gensmall a {
  text-decoration: none!important;
  color: #757575;
}
/*Liens survolés des catégories*/
.categorie a:hover, .categorie a.gensmall:hover, .categorie .gensmall a:hover {
  text-decoration: none!important;
  color: #a5a5a5;
}

/*Bloc du titre de catégorie*/
.cate_title {
  margin: auto;
  border-bottom: 8px double black;
  margin-bottom: 10px;
  text-align: center;
}
/*Titre de catégorie*/
.cate_title h2 {
  display: inline-block;
  margin: 0px;
  margin-bottom: 5px;
  padding: 0px;
  font-family: verdana;
  font-weight: normal;
  font-size: 30px;
  text-align: center;
  color: #656565;
}


/*Bloc de forum*/
.forum_bloc {
  width: 790px;
  height: 144px;
}

/*Bloc de titre de forum*/
.forum_title {
  float: left;
  width: 360px;
  border-bottom: 2px solid black;
  height: 29px;
  text-align: left;
}
/*Titre de forum*/
a.forumlink {
  display: inline-block;
  font-family: Verdana;
  color: #757575!important;
  font-size: 24px;
  font-weight: normal;
}
/*Titre survolé de forum*/
a.forumlink:hover {
  color: #a5a5a5!important;
}

/*Statistiques*/
.forum_stats {
  float: left;
  width: 440px;
  border-bottom: 2px solid black;
  height: 12px;
  padding-top: 17px;
  margin-left: -20px;
  margin-top: -3px;
  text-align: right;
  font-family: Verdana;
  font-size: 10px;
}

/*Bloc de description de forum*/
.forum_desc {
  float: left;
  margin-top: 10px;
  padding: 1px;
  padding-right: 0px;
  width: 349px;
  height: 98px;
  background-color: black;
}
/*Description de forum*/
.forum_desc_desc {
  height: 98px;
  width: 348px;
  padding-right: 1px;
  text-align: justify;
  overflow: auto;
  color: #d5d5d5;
  font-family: verdana;
  font-size: 10px;
}

/*Bloc image new old lock et dernier message*/
.forum_middle_bloc {
  float: left;
  margin-top: 10px;
  margin-left: 15px;
  width: 205px;
  height: 100px;
  text-align: center;
}
/*Bloc image new old lock*/
.forum_old_new_lock_img {
  width: 205px;
  margin-bottom: 10px;
}

/*Bloc dernier message*/
.forum_last_mess {
  color: #656565;
  height: 50px;
  width: 205px;
  font-family: verdana;
  font-size: 10px;
}

/*Bloc des sous-forums*/
.forum_sous_forums {
  float: left;
  margin-top: 10px;
  margin-left: 15px;
  width: 205px;
  height: 100px;
}
.forum_sous_forums_over {
  width: 200px;
  height: 100px;
  overflow: auto;
  padding-right: 5px;
  font-family: verdana;
  font-size: 10px;
}

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



C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Problème avec mon code" ou dans "Personnalisations" pour recevoir de l'aide.

À plus !

Catégories « Lavande » (corps catégorie + onglets + liens persos) - Dim 19 Avr 2015 - 2:53



Catégories « Lavande »



Informations



Voici une mise en forme de catégories aux tons mauves, que je poste en libre service suite à la commande de MxPrime2.

Cliquez ici pour visionner l'aperçu.

Langages : HTML, CSS, Javascript.
Version : phpBB2.
Largeur totale : 852px.
Tailles des images (redimensionnées) : image de fond du titre de la catégorie 800x80px (vous pouvez aussi mettre un pattern) | image description 75x90px | image nouveau-vieux-vérouillé 168x45px

Explications :
→ les catégories sont en onglets grâce au tutoriel de vic_le_faucheur.
→ un corps catégorie, divisé en 3 images, entoure chaque catégorie.
→ la description contient : l'image de gauche, le texte de description du forum, ainsi que le bloc de liens.
→ les liens ne sont pas les sous-forums, qui ont été retirés selon le désir de MxPrime2. Ils sont remplacés par des liens personnalisables (vous pouvez donc faire un lien pour un sujet ou pour un sous-forum).
→ ne pas mettre plus de 4 liens dans le bloc.
→ le lien du dernier forum actif renvoie vers le dernier message posté.
→ les textes en dégradé sont produits grâce au CSS.

Pré-requis :
Vérifiez que dans votre Panneau d'Administration > Affichage > Page d'accueil > Structure et hiérarchie, vous soyez bien en mode "Séparer les catégories sur l'index : Moyen". Puis, sur la même page, plus en bas, vous pouvez modifier la longueur du titre du sujet affiché à 24 caractères.


Codes



Template index_box entier : Page d'accueil - affichage des catégories (Pan. d'admin > Affichage > Templates > Général, remplacer l'ancien index_box, enregistrez puis validez Tag phpbb2 sur Never Utopia - graphisme, codage et game design - Page 2 Ajouter) :
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>

<div id="conteneur_onglets_cate">
  <div class="onglet_cate">Catégorie 1</div> •
  <div class="onglet_cate">Catégorie 2</div> •
  <div class="onglet_cate">Catégorie 3</div> •
  <div class="onglet_cate">Catégorie 4</div> •
  <div class="onglet_cate">Catégorie 5</div>
</div>
  
<div id="conteneur_cate">
  
<!-- BEGIN catrow -->

<!-- BEGIN tablehead -->
<div class="categorie">
  
<table border="0" cellpadding="0" cellspacing="0" cellmargin="0" style="width:auto; margin: auto;"><tr><td>
  
  <div class="cat_haut"></div><div class="cat_milieu">
  <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" cellmargin="0">
    
  <tr>
    <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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 class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
<!-- END cathead -->
  
<!-- BEGIN forumrow -->
<div class="cat_milieu"><table class="forums" border-spacing="0" border="0" cellpadding="0" cellspacing="0" cellmargin="0" valign="middle"><tr><td>

  <tr class="forum_ligne1">
      <td border="0" cellpadding="0" cellspacing="0" cellmargin="0" colspan="2" nowrap="nowrap" width="100%" class="forumlink_block">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </span>
            <span class="forum_stats">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets</span>
      </td>
  </tr>
    
  <tr class="forum_ligne2">
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="forum_description" valign="top">
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
      </td>
      <td class="forum_dernmess" align="center" valign="top">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
        <div class="dernmess_contenu"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>
  </tr>
    
  </td></tr></table></div>
<!-- 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 -->
    <div class="cat_milieu"><div class="cat_marge_bas"></div>
    
    </div>
    </table>
  
    <div class="cat_bas"></div>
  
   <img src="{SPACER}" alt="" height="5" width="1" />
<!-- END tablefoot -->
</div>
  
<!-- END catrow -->
</div>


Code à coller et à modifier dans la description d'un forum (Pan. d'admin > Général > Catégories et forums > Modifier Tag phpbb2 sur Never Utopia - graphisme, codage et game design - Page 2 Editer) :
Code:
<table style="width: 100%; max-height:100px; margin-bottom: -12px;" cellpadding="0" cellspacing="0" border="0" border-spacing="0" valign="middle">
  <tbody>
      <tr>
            
        <td class="descr_img">
            <img alt="Image de description" src="http://nsm08.casimages.com/img/2015/04/16//15041606025519468513176454.png" />                    
        </td>
                                        
        <td class="descr_texte">
            <div class="descr_texte_contenu">
              <div>
<span class="d_texte_special">Lorem Ipsum</span>Aliquam quis nibh sed augue malesuada hendrerit. Maecenas ultrices scelerisque lectus nec molestie. Nulla suscipit, nibh sit amet viverra adipiscing, lacus eros dapibus magna, id mattis sapien tortor ac odio. Sed id libero porttitor, laoreet nisl eu, mattis nisi. Quisque lorem odio, accumsan et ipsum ac, vehicula commodo neque. Integer tempus nulla eget quam molestie, quis sodales diam rutrum. Vivamus dapibus lacus a magna tempor, id fringilla ligula ornare. Nunc consequat nibh orci, in pulvinar augue ascelerisque at. Duis volutpat pulvinar auctor. Vivamus nec augue mattis, feugiat turpis vitae, ultrices dui. Maecenas blandit vestibulum lorem, eget congue mi iaculis vel. Aliquam non molestie lacus. Curabitur sed enim diam. Morbi sed iaculis orci. Nunc et orci non arcu iaculis pellentesque.          
              </div>
            </div>
        </td>

        <td class="descr_liens">
            <div><!-- ne pas mettre plus de 4 liens -->
              <a href="URL DU LIEN">Lien 1</a><br />
              <a href="URL DU LIEN">Lien 2</a><br />
              <a href="URL DU LIEN">Lien 3</a><br />
              <a href="URL DU LIEN">Lien 4</a><br />    
            </div>
        </td>

      </tr>
  </tbody>
</table>


CSS (Pan. d'amin > Affichage > Couleurs > Feuille de style CSS > collez puis enregistrez) :
Code:
/********************* DEBUT CATEGORIES PAR ELYSIA DE NEVER UTOPIA *********************/

/* _____ Reglages de base _____ */

a { text-decoration: none; }
a:hover { text-decoration: none !important; }


/* _____ Onglets _____ */

#conteneur_onglets_cate
{
  width: 840px;;
  height: 50px;
  line-height: 50px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 30px;
  overflow: visible;
  background-color: #edeff7;
  box-shadow: 0 5px 5px #9a9faf;
  display: none;
  text-align: center;
  color: #9a9faf;
}
#conteneur_onglets_cate div
{
  display: inline-block;
  color: #8a85ac;
  text-shadow: 0px 0px 3px #fff;
  font-size: 18px;
  margin-left: 5px;
  margin-right: 5px;
  font-family: 'Times New Roman', serif;
  transition: all ease 1s;
}
#conteneur_onglets_cate div:hover
{
  color: rgba(213,215,242, 0.5);
  text-shadow: 0px 3px 3px #d2d5e1, 0 0 0 #000, 0px 3px 3px #d2d5e1, 0 0 1px #7d849c;
  transition: all ease 1s;
}


/* _____ Fonds categories en images _____ */

.cat_haut
{
  background: url('http://nsm08.casimages.com/img/2015/04/15//15041510472119468513174440.png') top center no-repeat;
  width: 852px;
  height: 20px;
  margin: auto; /*Permet de centrer la partie du corps*/
}
.cat_milieu
{
  background: url('http://nsm08.casimages.com/img/2015/04/15//15041510494419468513174442.png') center repeat-y;
  width: 800px;
  margin: auto;
  padding: 0 26px 0 26px;
}

.cat_milieu .forumline {
  border: 0 solid;
}

.cat_bas
{
  background: url('http://nsm08.casimages.com/img/2015/04/15//15041510472019468513174439.png') bottom center no-repeat;
  width: 852px;
  height: 29px;
  margin: auto;
}


/* _____ Mise en forme titre de la catégorie _____ */

.secondarytitle
{
  width: 800px;
  height 80px;
  line-height: 80px;
  background : url('http://nsm08.casimages.com/img/2015/04/18//15041802332319468513180672.png') repeat; /* image fond titre categorie */
  border-bottom: 9px solid #fff;
}
.secondarytitle h2
{
  color: rgba(213,215,242, 0.5);
  font-size: 40px;
  text-transform: uppercase;
  font-weight: normal;
  font-family: 'Times New Roman', serif;
  text-shadow: 1px 4px 5px #d2d5e1, 0 0 0 #000, 1px 4px 6px #d2d5e1, 0 0 1px #7d849c;
}
/* reglages pour selection */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }


/* _____ Mise en forme titre du forum _____ */

.forums
{
  width: 800px;
  padding: 0 10px 0 10px;
  background: #fff;
}
.forumlink_block
{
  height: 25px;
  line-height: 25px;
  background: #edeff8;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.forumlink a
{
  font-size: 20px;
  color: rgba(213,215,242, 0.5);
  font-weight: normal;
  font-family: 'Times New Roman', serif;
  text-shadow: 0px 3px 3px #d2d5e1, 0 0 0 #000, 0px 3px 3px #d2d5e1, 0 0 1px #7d849c;
  display: inline-block;
  position: relative;
  left: 90px;
  top: 10px;
}

.forum_stats {
  font-size: 11px;
  float: right;
  margin: 5px 28px -5px 0;
  color: #b8bdd3;
  font-style: italic;
}


/* _____ Mise en forme forum _____ */

.forum_ligne2
{
  background: #f7f7f9;
  max-height: 100px;
}

/* Description (image + textes + liens) */

.forum_description /* conteneur */
{
  margin: 0;
  padding: 0;
  width: 80%;
  padding: 5px;
  height: 90px;
  overflow: hidden;
}

.descr_img img /* image perso */
{
  width: 75px;
  height: 90px;
}

.descr_texte /* colonne texte */
{
  padding-left: 5px;
}
.descr_texte .descr_texte_contenu /* conteneur texte */
{
  padding: 2px;
  width: 410px;
  background: #fff;
  margin: 0;
}
.descr_texte .descr_texte_contenu div /* texte */
{
  padding: 5px;
  border: solid 1px #ced2de;
  height: 74px;
  overflow: auto;
  font-size: 16px;
  color: #b3b3b3;
  text-align: justify;
}
.d_texte_special /* texte special du debut */
{
  font-size: 18px;
  font-weight: bold;
}
.d_texte_special::after /* mettre point apres texte special */
{
  content: " . ";
  font-size: 20px;
  font-weight: 900;
}

.descr_liens /* colonne liens persos */
{
  padding-left: 5px;
}
.descr_liens div /* conteneur liens persos */
{
  background: #fff;
  width: 98px;
  height: 90px;
  text-align: center;
  line-height: 23px;
}
.descr_liens div a /* liens persos */
{
  display: inline-block;
  height: 25%;
  font-size: 16px;
  color: #b3b3b3;
}
.descr_liens div a::before /* mettre point avant lien perso */
{
  content: ". ";
  font-weight: 700;
}


/* Dernier message du forum */

.forum_dernmess {
  margin: 0;
  padding: 5px 5px 0 0;
  width: 20%;
  height: 90px;
}

.forum_dernmess img {
  width: 168px;
  height: 45px;
}


.dernmess_contenu
{
  width: 100%;
  height: 40px;
  background: #fff;
  padding-top: 5px;
}
.dernmess_contenu img
{
  display: none;
}
.dernmess_contenu .gensmall, .dernmess_contenu .gensmall a
{
  line-height: 0.9em;
  font-size: 13px;
  color: #b3b3b3;
}
.dernmess_contenu .gensmall a
{
  color: #838cb2;
}


/* _____ Marge interieure bas categories _____ */

.cat_marge_bas
{
  width: 800px;
  height: 10px;
  margin: auto;
  background: #fff;
}

/********************* FIN CATEGORIES PAR ELYSIA DE NEVER UTOPIA *********************/


Javascript (Pan. d'admin > Modules > Gestion des codes javascript > Activez. Puis créez un nouveau, cochez Placement : Sur l'Index et collez) :
Code:
$('document').ready(function()
      {
      if($('.categorie').size() > 1)
        {
          $('#conteneur_onglets_cate').css( 'display' , 'block' );
          $('#conteneur_onglets_cate .onglet_cate').click(function()
          {
            change_categorie( $('.onglet_cate', '#conteneur_onglets_cate').index( this ) )
          });
        
         $('.onglet_cate:eq(0)').click();
    }
      });

      function change_categorie( index )
      {
          if( $('.categorie:eq(' + index + ')').size() != 0 )
          {
            $('#conteneur_cate').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );

          
           $('.categorie').css( 'display' , 'none' );
            $('.categorie:eq(' + index + ')').fadeIn( 500 );
          
           $('.onglet_cate.actif').removeClass('actif');
            $('.onglet_cate:eq('+ index +')').addClass('actif');
          }
          else alert('Vous ne pouvez pas accéder à cette catégorie.');
      }

$(function(){
    $('.last-post-icon').each(function(){
        var link = $(this).attr('href');
        $(this).closest('span').find('a').eq(0).attr('href', link);
    });
});



Le crédit est obligatoire. Vous pouvez créditer "catégories par Elysia de Never Utopia" ou bien seulement "catégories provenant de Never Utopia".


Un petit merci ou commentaire est toujours le bienvenu ^^
Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.

Alumine

Enlever des liens de la navigation - Sam 18 Avr 2015 - 11:02



Enlever des liens de la navigation


Toutes versions - CSS only  -

Ce tuto va vous permettre d'enlever certains liens de votre barre de navigation, ceux qui ne vous servent pas, ou que vous souhaitez déplacer.
Voilà un aperçu avant/après avoir enlevé FAQ et Rechercher
Tag phpbb2 sur Never Utopia - graphisme, codage et game design - Page 2 1429380868-nav1
Tag phpbb2 sur Never Utopia - graphisme, codage et game design - Page 2 1429380868-nav2




Avec les sélecteurs de CSS on peut sélectionner un lien par son adresse, et ensuite lui appliquer des propriétés, comme ceci:
Code:
a[href=blabla]{propriétés}

Donc il suffit de connaître l'adresse du lien pour pouvoir le modifier !
Voici les adresses des liens de la barre de navigation, ce sont les mêmes pour tous les forums:

Accueil:           /
FAQ:               /faq
Rechercher:   /search
Calendrier:   /calendar
Membres:      /memberlist
Groupes:        /groups
Profil:            /profile?mode=editprofile
Messagerie:  /privmsg?folder=inbox
Connexion:    /login

Une exception, le "Déconnexion". Pour lui, on utilise le id, à savoir :
Déconnexion:    #logout

Et pour supprimer quelque chose, la propriété est
Code:
display:none;

Donc ça nous donne, selon le lien que vous souhaitez supprimer, ceci (il est préférable d'entourer l'adresse du lien par des guillemets, sinon le / peut être mal interprété ) On cible uniquement les liens qui sont dans le bloc de class "nav", comme ça si vous remettez l'un de ces liens autre part que dans la barre de navigation, il ne sera pas supprimé. Le !important spécifie que cette propriété a une priorité absolue sur les éventuelles autres qui s'appliqueraient au même lien.

Code:
.nav a[href="/"]{ display:none !important;}
.nav a[href="/faq"]{ display:none !important;}
.nav a[href="/search"]{ display:none !important;}
.nav a[href="/calendar"]{ display:none !important;}
.nav a[href="/memberlist"]{ display:none !important;}
.nav a[href="/groups"]{ display:none !important;}
.nav a[href="/profile?mode=editprofile"]{ display:none !important;}
.nav a[href="/privmsg?folder=inbox"]{ display:none !important;}
.nav a[href="/login"]{ display:none !important;}
.nav #logout{ display:none !important;}


On peut également combiner ces sélecteurs, en les séparant par une virgule et un espace, comme ceci:
Code:
.nav a[href="/faq"], .nav a[href="/search"]{ display:none !important; }


Et grâce aux adresses des liens plus haut, vous pouvez tout à fait les remettre autre part sur votre forum (sur le message de page d'accueil par exemple, ou dans un message) comme ça:
Code:
<a href="ADRESSE DU LIEN">Texte du lien</a>

Texte du lien

A-Lice

Catégories Taupes - Ven 10 Avr 2015 - 18:31




Catégories Taupes


Suite à une demande de Moys voici des catégories taupes.

Je précise que l'arrière plan rose pâle correspond à mon forum.

HTML & CSS ~ Voici donc un aperçu : wwwphpBB2


Et le code :
Template index_box à remplacer en entier :
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 --><!-- END tablehead -->
   <!-- BEGIN cathead -->
      <!-- BEGIN inc --><!-- END inc -->
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
      <!-- BEGIN inc --><!-- END inc -->
<div class="cat_titre"><a class="cat_titre" title="{catrow.cathead.CAT_DESC}" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="cat_bloc1"><div class="cat_desc">{catrow.forumrow.FORUM_DESC}
      <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
      <!-- END switch_moderators_links --></div> <div class="cat_sousfora" id="sousfora">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
<script type="text/javascript">
  <!--
                      jQuery('#sousfora').html(jQuery('#sousfora').html().replace(/, /g,'<div style="width: 100%; border-bottom: 2px solid black; margin-top: 5px; margin-bottom: 5px;"></div>')).removeAttr('id');
  jQuery(document).ready(function(){
    jQuery('a.gensmall').each(function (){
    var texte = jQuery(this).attr('title') ;
    if(texte){
    texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
    jQuery(this).attr('title', texte);
    }
    });
  });
  //-->
  </script>
<div class="cat_bloc2"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><div style="padding: 10px;">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</div>
{catrow.forumrow.LAST_POST}
   <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
        <!-- END avatar --></div>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
      <!-- BEGIN inc --><!-- END inc -->
   <!-- END catfoot -->
<div style="height: 5px;"></div>
   <!-- BEGIN tablefoot -->
<!-- END tablefoot --><!-- END catrow -->


Template overall_header (après < head > ligne 4) :
Code:
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>


CSS :
Code:
a.cat_titre {
font-size: 40px;
color: #54413d;
font-family: 'Poiret One', cursive;
opacity: 0.5;
transition: all 0.5s;
padding: 10px;
text-indent: 15px;
text-decoration: none;
}

a.cat_titre:hover {
transition: all 0.5s;
opacity: 1;
}

.cat_bloc1 {
width: 560px;
height: 110px;
border: 2px solid black;
padding: 10px;
background: #f5f5f2;
overflow: auto;
display: inline-block;
margin-top: 5px;
}

.cat_bloc2 {
margin-left: 15px;
width: 190px;
height: 120px;
padding: 5px;
background: #f5f5f2;
text-align: center;
font-size: 12px;
display: inline-block;
border: 2px solid black;
vertical-align: top;
margin-top: 5px;
}

.cat_desc {
width: 360px;
text-align: justify;
font-size: 12px;
color: #9c887d;
display: inline-block;
vertical-align: top;
}

.cat_sousfora {
width: 160px;
padding-top: 5px;
padding-bottom: 5px;
background: #e0dcce;
color: #9c887d;
border: 2px solid black;
text-align: center;
font-size: 14px;
display: inline-block;
vertical-align: top;
margin-left: 15px;
}

.cat_sousfora a.gensmall {
color: #9c887d;
font-size: 14px;
}

/*SUPRESSION DU SOULIGNEMENT DES LIENS*/
a {text-decoration: none;}
a:link {text-decoration: none;}
a:hover {text-decoration: none!important;}
a.forumlink {text-decoration: none;}
a.forumlink:hover {text-decoration: none!important;}
a.topiclink {text-decoration: none; }
a.topiclink:hover {text-decoration: none!important; }
/*Fin*/


Remarques :
-Le forum doit faire 830px de largeur.
-Il ne faut absolument pas mettre de virgules dans les descriptions des sous-fora pour ne pas déformer le code.


/!\ En cas de problème, c'est ici ou que ça ce passe.
Un petit merci ou commentaire est toujours le bienvenu ^^
- Mettre/laisser un crédit vers Never-Utopia est obligatoire.

Nyan-cat

Catégories " Las Vegas " PHPBB2 - Lun 30 Mar 2015 - 21:12


Catégories " Las Vegas "

APERCU

Voici mon tout premier Libre Service de catégories, qui est dans une ambiance relativement nocturne avec un petit air de Las Vegas. C'est des Spots, de la lumière, un peu sixties et des étoiles pleins les yeux.


I - TEMPLATE INDEX_BOX

Il faut que vous supprimiez l'intégralité de votre template, puis mettre celui-ci.

Code:

<link href='http://fonts.googleapis.com/css?family=Abril+Fatface|Oswald|Bree+Serif|Alfa+Slab+One|Covered+By+Your+Grace|Dancing+Script'rel='stylesheet' type='text/css'>
<table>
  <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_title">
  {catrow.tablehead.L_FORUM}
</div>
<div class="categorie_bloc">
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <div class="cate_forum">
    <div class="categorie_forum_milieu">
      <table _moz_resizing="true" border="0">
      <tbody>
         <tr>
            <td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
     
                                  {catrow.forumrow.FORUM_DESC}
      <br />
            </td>
      <td><div class="categorie_forum_stat">
      <div class="forum_last_stats">
        {catrow.forumrow.TOPICS} • {catrow.forumrow.POSTS}
      </div>
      <div class="forum_last_mess">
        {catrow.forumrow.LAST_POST}
      </div>
    </div></td><td>
               <img class="old_new_lock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
            </td>
         </tr>
      </tbody>
   </table>
      <div class="sous_forum_lien">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
    </div>
  </div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->


II - CSS

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

/*Bloc des forums*/
.cate_forum {
  height: 200px;
  width: 900px;
}

/*Bloc des titres des catégories*/
.cate_title {
  width: 800px;
  height: 75px;
  margin: auto;
  text-align: center;
  background-repeat: no-repeat;
  background-position: top center;
  margin-bottom: -10px;
}
/*Titres des catégories*/
.cate_title h2 {
  display: block;
  height: 60px;
  margin: 0px;
  font-family: "Alfa Slab One";
  font-size: 55px;
  letter-spacing: 1px;
  color: #272744;
}
.cate_title h2 img {
  margin-top: -25px;
  margin-left: 20px;
}
.cate_title h2 span {
  display: none;
}
a.nav img {
  display: none;
}


/*Bloc des catégories*/
.categorie_bloc {
  background-color: #0C0C1C;
  width: 900px;
  margin: auto;
  margin-bottom: 10px;
  padding-top: 50px;
  padding-bottom: 1px;
  font-family: "abeatbykai", sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: #272744;
}


/*Image Old New Lock*/
.old_new_lock {
  float: left;
  margin-left: -70px;
  margin-top: -120px;
 

}

/*Bloc complet du milieu*/
.categorie_forum_milieu {
  position: relative;
  float: left;
  margin-top: 10px;
  margin-left: 65px;
  margin-right: 15px;
  width: 750px;
  height: 140px;
  padding: 10px;
  padding-top: 17px;
  background-color: #111124;
}

/*Titres des forums*/
.forumlink {
  position: absolute;
  margin-top: -15px;
  margin-left: 15px;
  z-index: 2;
  height: 50px;
  font-size: 40px;
  font-family: 'Alfa Slab One', cursive;
  color: #272744!important;
  font-weight: normal;
}
/*Titres survolés des forums*/
.forumlink:hover {
  color: #6D6DAB!important;
  text-decoration: none!important;
}
/*Désactiver les images des titres*/
.forumlink img {
  display: none;
}

/*MISE EN FORME DESCRIPTION*/               
    .description {
      font-size: 11px;
      line-height: 11px;
      text-align: justify;
      position: relative;
      padding: 15px;
      height: 70px;
      width: 430px;
      overflow-y: auto;
      padding-right: 5px;
      margin-top : 40px;
    }

    .losange {
    height: 80px;
    width: 80px;
    float: right;
    margin-right: -280px;
    margin-top: 40px;
    border: 5px solid #0C0C1C;
    background: #0C0C1C;
    -ms-transform: rotate(45deg); /* Internet Explorer */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari et Chrome */
    -o-transform: rotate(45deg); /* Opera */
    }

/*Bloc des sous forums*/
  .sous_forum_lien {
      font-size: 11px;
      line-height: 11px;
      text-align: justify;
      position: relative;
      margin-top : -25px;
      margin-left: -10px;
      overflow: auto;
      height: 17px;
      width: 400px;
      background-color: #111124;
    }


/*Bloc des statistiques et du dernier message*/
.categorie_forum_stat {
  position: relative;
  float: left;
  margin-top: 10px;
  width: 160px;
  height: 70px;
  padding: 5px;
  text-align: center;
}
/*Statistiques*/
.forum_last_stats {
  margin-left: 3px;
  margin-right: 3px;
  padding-bottom: 3px;
  font-size: 25px;
  font-family: "Abril Fatface";
  color: #37A03F;
}
/*Police du dernier message*/
.forum_last_mess, .forum_last_mess a.gensmall {
  font-size: 11px;

  font-family: "abeatbykai", sans-serif;
}
/*Couleur des liens du dernier message*/
.forum_last_mess a {
  color: #37A03F;
}

/*Les barres de défilement dans les catégories*/
.forum_desc::-webkit-scrollbar {height:11px; width:6px; background:none; margin-right:5px;}
.forum_desc::-webkit-scrollbar-thumb {background:rgba(241,163,189,1); height:30px; border-radius:30px;}
.forum_desc::-webkit-scrollbar-corner {background:none;}

/*Retirer les soulignements*/
a { text-decoration: none; }

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


III - POUR LES DESCRIPTIONS DE CATÉGORIES

Code:
<div class="losange">
       <img src="http://www.pixenli.com/images/1427/1427468682011529000.png" class="imgforum" />
</div>
       
<div class="description">
                 et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna. Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu.  et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna. Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu.               
</div>


• Ce code fait 900px de large.
• Les images des losange suivent la rotation de ceux-ci.
• Les boutons font 100*100.


Un petit merci ou commentaire est toujours le bienvenu ^^
- Mettre/laisser un crédit vers Never-Utopia est obligatoire.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.

Afficher la zone Lancés de dés dans une catégorie précise - Lun 16 Mar 2015 - 13:01



Afficher la zone "Lancés de dés" seulement dans un forum en particulier



Ce code permet d'afficher la zone "lancer de dés" seulement dans certaines catégories / forums ! (version phpBB2)

Note : le code n'est pas sous hide, je tenterai de vérifier les commentaires donc si vous avez la moindre question pour une amélioration / une précision, n'hésitez pas. ♥

Ce code a été créé pour un forum en phphbb2, mais il fonctionne aussi sur PunBB et Invision :)


Rendu



Pour en savoir plus sur le lancé de dés, je vous invite à lire le Tutoriel officiel de ForumActif ainsi que le Tutoriel par Halloween sur Never Utopia


Par défaut, le lancé de dés est disponible dans tous les sujets de votre forum.
Mais, parfois on ne l'utilise que dans une zone précise du forum, et on n'en a pas besoin partout.
Cette option permet de masquer la zone "Lancé de dés" par défaut puis l'afficher seulement dans un forum / catégorie :)
/!\ Attention, je parle ici de l'ensemble de zone lancé de dé, pas d'afficher seulement un dé en particulier Wink

Ce code peut-il totalement empêcher le lancé de dés dans les forums non autorisés ? Non. Dans les catégories où on ne souhaite pas avoir le lancé de dés, la zone est seulement masquée visuellement, les membres peuvent toujours y accéder dans le code source.


Attention, il ne faut pas accepter l'option "Activer le bbcode [ roll ] pour le lancé de dé"
En effet, cette option permet d'éditer un message pour changer le lancé de dé.


Connaissances



Avant de se lancer dans le code, on commence par réfléchir à ce qu'on sait :)

Où se trouvent la zone lancé de dé ? → dans les pages "Répondre" et quand on prévisualise un message de réponse.
On va donc commencer par regarder si on est bien sur une page pour poster un message. Quand on envoie un message, notre URL ressemble à ceci : https://www.never-utopia.com/post

Comment savoir dans quelle catégorie / forum on est ? → le fil d’Ariane
Quand on répond à un sujet, on a le fil d'Ariane en haut.
Tag phpbb2 sur Never Utopia - graphisme, codage et game design - Page 2 66RzZUX
Ce fil d’Ariane est constitué de liens qui permettent de naviguer sur le forum, et on peut donc regarder si les liens sont dans notre liste des forums "autorisés" ou non.

Fonctionnement



Donc, si on suit la logique, voici ce qu'on peut faire :
(il y a souvent 100 manières de faire la même chose. Ici j'ai fait un choix d'appréhender le problème comme ça, mais on aurait pu s'y prendre autrement Very Happy)


  1. On établit une liste de forums et catégories où le lancé de dés est autorisé.
  2. On va vérifier si le chemin de la page sur laquelle on se trouve est bien /post.
  3. On regarde une zone de lancé de dé sur la page (si la zone n'est pas là, ça ne sert à rien de continuer le reste du code) et si elle est là, on la cache.
    Pourquoi ne pas cacher l'élément par défaut tout simplement (en CSS), puis l'afficher à certains moments ? Par ce que si la personne a le javascript désactivé ou bien qu'il y a une erreur de JS dans la page... Notre JS pour afficher la zone de lancé de dé juste aux bons endroits ne fonctionnera pas.

  4. On récupère les liens du fil d’Ariane.
  5. On regarde si l'un de ces liens est présent dans notre liste "Fora / catégories autorisés".
    → si oui : on affiche la zone lancé de dés



Template posting_body


PA > Affichages > Templates > Poster & Messages privés

On va commencer par entourer toute la zone dans une div, pour pouvoir la sélectionner ensuite en javascript.

On va repérer toute la zone qui correspond au lancé de dé, elle commence ici :
Code:
<!-- BEGIN switch_roll_dice -->


Et se finit ici
Code:
<!-- END switch_roll_dice -->


Tout le code au milieu ne s'affiche que si le lancé de dé est activé :)

On va donc remplacer
Code:
<!-- BEGIN switch_roll_dice -->

Par :
Code:
<!-- BEGIN switch_roll_dice -->
    <div class="js-roll-dice">
    <!-- modification pour le javascript "afficher le lancer de dés seulement sur certaines pages" -->


Et ensuite
Code:
<!-- END switch_roll_dice -->


Par
Code:
 </div> <!-- fermeture de .js-roll-dice -->
<!-- END switch_roll_dice -->


On valide, on publie, et normalement, il n'y a aucun changement visuel.

Javascript


PA > Modules > Html & Javascript
On crée un nouveau javascript activé sur toutes les pages avec un nom clair.

Je vous mets l'ensemble du code :
Code:
/*
 * Tuto lancé de dés
 * Masquer la zone lancé de dés partout sauf dans certains forums
 *
 * version : phpbb2
 * Never Utopia
 */
$(function () {
    if (document.location.pathname === "/post") {

        /* url des parties autorisées
         * MODIFIER ICI
         * */
        /* url des parties autorisées */
        var exceptions = [
            "/f6-banniere-concours-ga",
            "/f3-presentations",
            "/c5-arene"
        ];
        
        var $dices = $(".js-roll-dice").hide();

        if ($dices.length < 1) return;

        $("a.nav").each(function () {
            if (exceptions.indexOf($(this).attr("href")) > -1) {
                $dices.show();
                return false;
            }
        });
    }
});


La version avec plus de commentaires :
Spoiler:


Rajouter les lien des catégories autoriseés


On modifie cette partie là :
Code:
/* url des parties autorisées */
var exceptions = [
    "/f6-banniere-concours-ga",
    "/f3-presentations",
    "/c5-arene"
];


Prenez l'url de votre catégorie exemple, et gardez juste la partie après le nom de domaine.
Ainsi si vous avez : https://www.never-utopia.com/f3-presentations
Il faut mettre "/f3-presentations".

De la même manière, si on a https://www.never-utopia.com/c21-communaute
On va mettre : "/c21-communaute".

Attention, il y a des virgules entre chaque lien, mais pas de virgule à la fin Wink

Exemples:


Toutes les sous catégories et sous forums à l'intérieur des liens que vous mettrez seront pris en compte. Ainsi si je mets "Communauté" dans les exceptions, tous les sous forums de cette catégorie auront la zone "Lancé de dés" affichée.


Conclusion



A partir de ce principe là, on pourrait aussi autoriser le lancé de dés partout, sauf sur certains forums (^-^).

Pour tout problème, je vous invite à vous rendre dans la section "Problème en codage".

Catégories blanches et bleues avec avatar du dernier posteur - Jeu 12 Mar 2015 - 19:34


Bonjour à tous,

Voici un LS de catégories réalisé en réponse à la demande de .loumpia


Aperçu - Live - Version : PHBB2


Quelques petites précisions
Couleur des liens : #4861A3
Couleurs des liens au survol : #6274a3
Image New/No New/Lock : 137*48 px ( redimensionnement auto )
Avatar du dernier posteur : 100*160 px ( redimensionnement auto )
Bleu clair correspondant au fond du forum : #d5e7f5 (à mettre dans le PA si vous voulez cette couleur)
Séparation des liens de sous-forums : ✩
Les tailles de polices sont celles que vous avez définies dans votre PA ( la moyenne pour les descriptions et la petite pour les liens et message du dernier posteur )
Pour obtenir la même police pour les titres, allez lire ce sujet

Attention, si vous avez déjà modifié votre template index_body par le passé, veillez à le sauvegarder quelque part afin de pouvoir le récupérer si vous vous rendez compte que vous souhaitiez garder certaines de vos modifications en plus de ces nouvelles catégories.
( Pensez à sauvegarder vos templates modifiés de manière générale )




Code à ajouter à votre feuille de style CSS (Panneau d'administrateur > Affichage > Images et Couleurs > Couleurs > CSS) :
Code:
#categories {
  background:transparent;
  }
  table#categories td {
  background:#FFFFFC;
  }
  table#categories td a {
  color:#4861A3;
  transition:color linear 0.2s;
  -webkit-transition:color linear 0.2s;
  }
  table#categories td a:hover {
  color:#6274a3;
  transition:color linear 0.2s;
  -webkit-transition:color linear 0.2s;
  }
  table#categories td img.imgnewpost {
  width:137px;
  height:48px;
  }
  table#categories td.newpost {
  border-radius:40px 0px 0px 40px;
  padding-left:10px;
  }
  table#categories td span#nbposts {
  text-transform:uppercase;
  font-size:9px;
  }
table#categories td span#lastpost {
  height:56px;
  width:127px;
  overflow:visible;
  }
  table#categories td.descriptions {
  border-radius:0px 40px 40px 0px;
  padding-right:10px;
  }
  table#categories div.description {
  padding:5px;
  margin:5px 0px 5px 0px;
  overflow:auto;
  height:80px;
  text-align:justify;
  }
  table#categories div.forumlink {
  text-align:center;
  margin-top:-20px;
  }
  #categories div.forumlink a{
  font-size:20px;
  color:darkblue;
  font-family:'Indie Flower';
  }
  table#categories div#details {
  text-align:center;
  }
  table#categories div.lastpost-avatar {
  height:120px;
  width:80px;
  }
  table#categories div.lastpost-avatar img {
  height:120px;
  width:80px;
  }


Code à enregistrer dans le template Index_box après avoir effacé son contenu (Panneau d'administration > Affichage > Templates > Général > Index_box Affichage des catégories) :
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 --><table class="forumline" width="100%" border="0" cellspacing="7" cellpadding="5" id="categories">
   <!-- BEGIN cathead -->
   <tr>
      <td class="{catrow.cathead.CLASS_CAT}" colspan="3" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <td class="newpost" align="center" valign="middle">
         <img class="imgnewpost" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                  <span id="lastpost" class="gensmall"><br /><br />{catrow.forumrow.LAST_POST}</span>
      </td>
                <td align="center" valign="middle">
            <div class="lastpost-avatar"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>
                </td>
      <td valign="top" width="100%" class="descriptions">
                  <div class="forumlink"><link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css' /><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />                  <span id="nbposts" class="gensmall"><b>{catrow.forumrow.POSTS}</b> messages dans <b>{catrow.forumrow.TOPICS}</b> sujets</span></div>
                  <div class="description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
         <div id="details" class="gensmall">
                          <span id="lienssousforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                            <script type="text/javascript">
                              jQuery('#lienssousforums').html(jQuery('#lienssousforums').html().replace(/, /g,' ✩ ')).removeAttr('id');
                            </script>
                          </span>
         </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 --><div style="color: rgba(0,0,0,0.2); font-weight: bold; font-size: 8px; margin-top: -10px; text-align: center;">©015 Catégories by Lunay on <a href="http://www.never-utopia.com/">NU</a></div>


« Je ne comprends pas, rien ne s'affiche dans la deuxième case ! »
Vous devez avoir activé l'affichage de l'avatar du dernier posteur dans votre PA si vous souhaitez qu'il s'affiche. Pour ce faire : Panneau d'Administration > Affichage > Page d'accueil > Structure et hiérarchie > Hiérarchie > Afficher les avatars dans la colonne "Derniers messages" : Oui
De plus, sur cette même page vous devez choisir la hiérarchie niveau moyen sans séparation des catégories, c'est à dire la deuxième option.


Je rappelle que le copyright est obligatoire et que vous avez la possibilité de demander de l'aide pour personnaliser votre code dans cette partie. De plus, si vous rencontrez un problème avec ce code, cette partie vous permettra de demander de l'aide.


Un petit merci ou commentaire est toujours le bienvenu ^^

Faire un design différent pour chaque catégorie (HTML et CSS) - Mer 4 Mar 2015 - 22:14




Faire un design différent pour chaque catégorie (CSS uniquement)


Édit d'Onyx : Bien que les notions vues dans ce tutoriel fonctionnent, je vous conseillerais d'utiliser ce tutoriel de Nihil Scar Winspeare qui utilise une méthode plus simple et plus propre.


Vous savez qu'on peut faire une mise en forme pour les forums et les catégories... Mais saviez-vous que vous pouvez personnaliser chacune de vos catégories pour qu'elles soient tous différentes les unes des autres? Eh bien, c'est ce que ce tuto vous montrera ^^


Voici quelques exemple de ce qu'on peut obtenir :
Exemple 1
Exemple 2
Exemple 3


Voilà tout ce qu'on va voir qu'on peut personnaliser individuellement :
- Les titres de chaque catégorie.
- Le fond (design général) de chaque catégorie.
- Les titres de chaque forum.
- Le fond (design général) de chaque forum et de chaque partie de chaque forum.
- La description des forums.

Et tout ce qu'on ne peut pas personnaliser individuellement :
- La structure des catégories et des forums.
- Les images New/Old/Lock.
- La mise en forme (police et couleur) des liens vers les sous-forums.
- La mise en forme (police et couleur) du dernier message.
- La mise en forme (police et couleur) des statistiques (nombre de messages et de sujets)


Voici comment est séparé le tutoriel, soit nos grandes étapes à suivre :
1. Comment faire une disposition "générale" pour les catégories et forums. Aperçu.
2. Comment personnaliser chaque fond et titre de catégorie. Aperçu.
3. Comment personnaliser chaque fond et titre de forum. Aperçu.
4. Problèmes possibles


- La version du forum doit être "PHPBB2".
- La hiérarchie et la structure des catégories doivent être "Séparer sur l'index : moyen".
- Le niveau de ce tutoriel est intermédiaire/avancé.



1. Comment faire une disposition "générale" pour les catégories et forums


Rappel :
Ce tuto utilise PhpBB2 et la hiéarchie "Séparer sur l'index: moyen". Si vous êtes sur une autre version de forum ou que vous utilisez une autre hiéarchie, la procédure à suivre est un peu différente.

Avant tout, il faut construire une structure générale pour nos catégories et nos forums. Pour cela, vous pouvez utiliser les tutos déjà existants, des LS, vos propres compétences ou la structure que j'utiliserai pour vous montrer comment faire.

Normalement, avec la hiéarchie que nous avons choisie, les catégories sont faites avec des "table" et des "td". Néanmoins, outre le fait que l'usage des tableaux pour autre chose que mettre en forme des données est de plus en plus déconseillé, je trouve cela plus facile à comprendre visuellement lorsqu'on utilise des "div", alors l'exemple suivant vous montrera la structure des catégories à l'aide de "div". Cela ne vous empêche pas de bâtir vos propres catégories selon la méthode que vous préférez ^^

Donc voilà, en gros, comment les différentes parties du template Index_box sont structurées (les informations entre parenthèses sont des simple indications, ne les recopiez absolument pas dans votre template) :
Code:
(Autres trucs avant le début des catégories)

<!-- BEGIN catrow --> (Indique le début des catégories)

  <!-- BEGIN tablehead --> (Indique le début de la partie du haut de chaque catégorie)

    <div> (Ouverture de la div qui englobe toute la catégorie)

      <div> ( Ouverture de la div du titre de catégorie)
        {catrow.tablehead.L_FORUM}
      </div> (Fermeture de la div du titre de catégorie)

      <div> (Ouverture de la div qui englobe tous les forums)

  <!-- END tablehead --> (Indique la fin de la partie du haut de chaque catégorie)

  <!-- BEGIN forumrow --> (Indique le début de chaque forum)

        <div> (Ouverture de la div qui englobe un seul forum)
          Trucs à l'intérieur du forum
        </div> (Fermeture de la div qui englobe un seul forum)

  <!-- END forumrow -->  (Indique la fin de chaque forum)

  <!-- BEGIN tablefoot --> (Indique le début de la partie du bas de chaque catégorie)

    </div> (Fermeture de la div qui englobe tous les forums)

  </div> (Fermture de la div qui englobe toute la catégorie)

  <!-- END tablefoot --> (Indique la fin de la partie du bas de chaque catégorie)

<!-- END catrow --> (Indique la fin des catégories)


Une fois qu'on a notre structure globale de faite, on veut habituellement la mettre en forme. Pour cela, on on ajoute une "class" à chaque "div" (ou span, ou td, ou ce que vous préférez utiliser) et on s'en sert pour personnaliser chaque partie dans le CSS.

Pour ce qui est des éléments "à l'intérieur du forum" que je n'ai pas pris la peine de détailler, voici une petite liste rapide des différentes variables et de leur signification (avec PhpBB2 et la hiérarchie "Séparer sur l'index: moyen") :

VariableSignification
{catrow.tablehead.L_FORUM}Titre de forum
{catrow.forumrow.FORUM_FOLDER_IMG}URL de l'image Old/New/Lock. Habituellement, on prend on complet l'image qui contient cette variable lorsqu'on crée la structure des forums
{catrow.forumrow.U_VIEWFORUM}Lien d'un forum à l'intérieur d'une catégorie
{catrow.forumrow.FORUM_NAME}Le nom d'un forum à l'intérieur d'une catégorie
{catrow.forumrow.FORUM_DESC}Description de forum
{catrow.forumrow.switch_moderators_links.L_MODERATOR} {catrow.forumrow.switch_moderators_links.MODERATORS}Personnes qui peuvent modérer ce forum ou sous-forum
{catrow.forumrow.L_LINKS} {catrow.forumrow.LINKS}Liens des sous-forums d'un forum
{catrow.forumrow.TOPICS}Nombre de sujets dans un forum
{catrow.forumrow.POSTS}Nombre de messages dans un forum
{catrow.forumrow.avatar.LAST_POST_AVATAR}Avatar du dernier posteur
{catrow.forumrow.LAST_POST}Dernier message



Vous disposez de ces différentes variables en les entourant de "span", "div", "td" ou ce que vous préférez. Puis, vous fonctionnez pareil pour les personnaliser, à savoir en rajoutant des "class", puis en utilisant le CSS.

Il y a tellement de façons différentes de fonctionner qu'il n'y a pas de modèle précis... Néanmoins, pour le bien de ce tuto, il sera important d'entourer le titre de forum ainsi que le titre de catégorie d'un span ou d'une div (comme le titre de catégorie) et de lui donner une class précise.

De plus, il est important d'utiliser le plus possible des tailles "fixes". Si vous mettez certains éléments avec une largeur ou une hauteur en % ou que vous avez tendance à utiliser des "span" qui s'ajuste au contenu, cela risque de causer des problèmes par la suite.




Voici à quoi correspond la structure des catégories que j'utiliserai pour l'exemple du tuto et qui vous donnera cet aperçu :
Code:
<!-- BEGIN catrow -->

  <!-- BEGIN tablehead -->
    <div class="cate_bloc">
      <div class="cate_title">
        {catrow.tablehead.L_FORUM}
      </div>
     
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
        <div class="forum_bloc">
         
          <div class="forum_principal_bloc">
           
            <div class="forum_title_bloc">
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </div>
         
            <div class="forum_img_bloc">
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            </div>
         
            <div class="forum_desc_bloc">
                {catrow.forumrow.FORUM_DESC}
            </div>
         
            <div class="forum_lastmess_stats_bloc">
           
              <div class="forum_stats_bloc">
                  {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
              </div>
           
              <div class="forum_lastmess_bloc">
                  {catrow.forumrow.LAST_POST}
              </div>
           
            </div>
         
            <div style="clear: both"></div>
          </div>
         
          <div class="forum_sousforums_bloc">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
          </div>
         
      </div>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
  </div>
  <!-- END tablefoot -->

<!-- END catrow -->


Ainsi que mon CSS (sans forum ou catégorie personnalisée) de base :
Code:
/*Bloc de catégories*/
.cate_bloc {
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}


/*Bloc des titres de catégorie*/
.cate_title {
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}
/*Titre des catégories*/
.cate_title h2 {
  margin: 0px;
  padding: 0px;
  font-size: 36px;
  color: #dfdfdf;
  font-family: 'Vivaldi';
  text-align: center;
}


/*Bloc de un forum*/
.forum_bloc {
  margin: auto;
  margin-bottom: 20px;
  width: 700px;
}
/*Bloc du milieu de forum*/
.forum_principal_bloc {
  width: 640px;
  margin: auto;
  padding: 2px 20px 10px 20px;
  background-color: #a3a3a3;
  border: 1px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-left: 3px solid #c4c4c4;
  border-radius: 30px;
}


/*Bloc de titre de forum*/
.forum_title_bloc {
  margin-left: -65px;
  height: 27px;
  margin-bottom: 5px;
  text-align: center;
}
/*Titre de forum*/
.forum_title_bloc a.forumlink {
  font-family: 'monotype corsiva';
  font-size: 24px;
  color: #dfdfdf!important;
  text-decoration: none!important;
  letter-spacing: 1px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Titre de forum survolé*/
.forum_title_bloc a.forumlink:hover {
  color: #dfdfdf!important;
  letter-spacing: 5px;
}


/*Bloc de image new-old-lock*/
.forum_img_bloc {
  float: left;
  height: 80px;
  width: 85px;
}


/*Bloc de la description*/
.forum_desc_bloc {
  float: left;
  margin-left: 25px;
  margin-top: -5px;
  height: 78px;
  width: 343px;
  border: 1px solid #dfdfdf;
  padding: 5px;
  border-radius: 10px;
  background-color: #c4c4c4;
  text-align: justify;
  font-size: 10px;
  overflow: auto;
}


/*Bloc du denier message et des statistiques*/
.forum_lastmess_stats_bloc {
  float: left;
  margin-left: 25px;
  height: 78px;
  width: 148px;
  text-align: center;
  background-color: #c4c4c4;
  border: 1px solid #dfdfdf;
  border-radius: 10px;
}
/*Bloc des statistiques*/
.forum_stats_bloc {
  margin: auto;
  margin-top: 5px;
  width: 140px;
  height: 18px;
  text-align: center;
  font-size: 11px;
  font-family: 'times new roman';
  margin-bottom: 5px;
  border-bottom: dotted 2px #dfdfdf;
}
/*Bloc du dernier message*/
.forum_lastmess_bloc {
  margin: auto;
  width: 140px;
  text-align: center;
  font-size: 12px;
  font-family: 'times new roman';
}


/*Bloc des sous forums*/
.forum_sousforums_bloc {
  margin: auto;
  height: 20px;
  overflow: auto;
  width: 580px;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  font-size: 12px;
  font-family: 'Times New Roman';
  background-color: #a3a3a3;
  border-bottom: 3px solid #c4c4c4;
  border-left: 1px solid #c4c4c4;
  border-right: 1px solid #c4c4c4;
  border-radius: 0 0 30px 30px;
  vertical-align: bottom;
  line-height: 20px;
}
/*Écriture des sous-forums*/
.forum_sousforums_bloc .gensmall {
  vertical-align: bottom;
  font-size: 12px;
  line-height: 20px;
  font-family: 'Times New Roman';
}




2. Comment personnaliser chaque fond et titre de catégorie


Avant de commencer cette étape, il va falloir que toutes les catégories, forums et sous-forums soient déjà créés.

Si vous voulez savoir pourquoi, c'est que pour personnaliser chaque catégorie, on va aller "ajouter" un deuxième fond de catégorie qui cachera le premier. Ce "deuxième fond" ne s'ajustera pas automtiquement à la hauteur de la catégorie, alors nous devront lui donner une hauteur nous-même. Et si jamais vous rajoutez des forums ou sous-forums dans votre catégorie, vous devrez ensuite ajuster de nouveau la hauteur.

Bref, il faut que toutes les catégories, forums et sous-forums soient déjà créés avant de continuer.




Pour cette étape, nous allons utiliser ce qu'on appelle "les positions" et "le z-index". Je vais vous expliquer certaines de leurs particularités au fur et à mesure qu'on les utilisera. Néanmoins, si vous voulez plus d'informations, je vous invite à aller sur cette étape de cursus.




La question est :
Comment personnaliser une catégorie spécifique... Alors que la seule chose qu'on peut accéder dans une catégorie spécifique, c'est son titre?

La réponse est :
En se servant justement de ce titre!

Bon, ok, c'est chelou dit comme ça >< Du coup, je vais vous montrer un screen qui vous montrera une catégorie normale :
Schéma de base

Donc en ordre :
- On a toujours notre fond de catégorie normal. (Pas vraiment de profondeur)
- Par dessus, on a le titre de catégorie et les forums. (Pas vraiment de profondeur)


Ce qu'on va faire, c'est qu'on va mettre des éléments supplémentaires dans le titre de catégorie et on va aller les positionner pour cacher l'ancien design de la catégorie, comme ceci :
Schéma de ce qu'on veut avoir

Donc en ordre :
- On a toujours notre fond de catégorie normal. (Profondeur 0)
- Par dessus, il y a le fond de catégorie personnalisé qui va venir "cacher" notre fond de catégorie normal. (Profondeur 1)
- Quant à notre titre de catégorie personnalisé, on va aller le mettre par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Nos forums sont par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Notre titre de catégorie de base n'est pas sur l'image, mais il est caché en dessous du fond de catégorie personnalisé. (Profondeur 0)


Ok... mais pourquoi tu parles de profondeur et de "z-index" dans ton image? Ça veut dire quoi?
Je veux "cacher" certains éléments (titre de catégorie normal et fond de catégorie normal) avec d'autres éléments. Pour faire cela, je dois m'assurer que mes éléments personnalisés soient "par dessus" les éléments normal. Pour cela, j'utilise le "z-index".


Et c'est quoi un "z-index"?
C'est une propriété de CSS qui indique justement la profondeur d'un élément. Cela nous permet de superposer comme on le veut des éléments. Plus un z-index est élevé, plus l'élément sera "par dessus". Plus le z-index est petit, plus l'élément sera "en dessous".

Donc si je veux que mon fond de catégorie de personnalisé soit "par dessus" mon fond de catégorie normal, il va falloir que je lui donne z-index plus gros que le fond de catégorie normal, tout simplement.




Maintenant que vous avez une petite idée de ce à quoi cela va ressembler, on va commencer le travail \o/

Comme dit plus haut, pour personnaliser le fond et le titre de catégorie de chaque catégorie, on va passer par le seul endroit où nous avons accès à une catégorie spécifique : le titre de catégorie.

Donc nous allons aller dans la catégorie que nous voulons personnaliser et on va aller mettre ceci dans le titre :
Code:
<span class="cate1">Titre de catégorie</span><span class="catefond1"></span>


Ce qu'on vient de faire?
On vient d'entourer notre titre de catégorie d'un span avec la class "cate1" pour pouvoir personnaliser la mise en forme de ce titre de catégorie.
Quant au deuxième span avec la class "catefond1", il va correspondre à notre fond de catégorie personnalisé.




Maintenant, on passe aux modifications du CSS! On commence par ajouter une position "relative" à notre fond de catégorie de base.

Errr... Une position?
Pour ce qui nous intéresse dans ce tutoriel, une position a 2 utilités.

Premièrement, cela nous permet d'utiliser le "z-index". En effet, le "z-index" ne fonctionne que si notre élément a une "position".

Deuxièmement, cela nous permet de faire du "positionnement". Et oui, les "positions" permettent de "positionner", c'est logique :hum:. Entre autres, la position "relative" laisse le bloc à son emplacement actuel. C'est donc la position que nous allons utiliser le plus souvent lorsque nous souhaitons simplement nous servir du "z-index". Mais, on va aussi utiliser la position "absolute".

La position "absolute" fait que l'élément se place toujours en haut à droite de son plus proche "parent" ayant une position "relative". Si un élément avec position "absolute" n'a aucun parent avec position "relative", il se met automatiquement en haut à droite de l'écran. En effet, la position relative permet de lancer un message qui dit "hé ho, je suis votre référence et votre dieu". Du coup, les éléments avec position "absolute" vont chercher parmi leurs "parents" et vont aller se placer par rapport au premier qui a la position "relative" qu'il sera capable de trouver.


Ici, on va vouloir que notre fond de forum normal serve de "référence" à notre fond de forum personnalisé lorsqu'on va vouloir le positionner. Du coup, on ajoute une position "relative" à notre fond de catégorie de normal :
Code:
/*Bloc de catégories*/
.cate_bloc {
  position: relative;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}





Ensuite, si on se référe à notre schéma de tout à l'heure, on constate que nos forums doivent être par dessus notre fond de forum personnalisé. Plus précisément, on a besoin d'un "z-index: 2;". Et pour pouvoir utiliser un "z-index", il nous faut une "position". On va donc mettre un "z-index: 2;" et une "position: relative;" à nos forums :
Code:
/*Bloc de un forum*/
.forum_bloc {
  position: relative;
  z-index: 2;
  margin: auto;
  margin-bottom: 20px;
  width: 700px;
}





Maintenant qu'on a positionné et ajusté la profondeur de nos éléments normaux, on va passer aux éléments "personnalisés". On va commencer par le titre de catégorie lui-même.

Pour cela, on copie/colle le CSS du titre de la catégorie de base, puis on va changer le nom pour ".cate_title .cate1".

Pourquoi ".cate_title .cate1"?
Tout à l'heure, nous avions entouré notre titre de catégorie d'un span avec la class "cate1". Du coup, nous mettons ".cate1" pour sélectionner cette class.

Quant au ".cate_title" juste avant, c'est parce que ce titre de catégorie n'existe pas seulement sur la page d'accueil. Quand on entre dans un sujet, il y a le titre de catégorie en haut de notre sujet. Comme on ne veut pas que le titre de catégorie soit personnalisé partout et qu'il brise notre design, on met "cate_title" avant la class du titre personnalisé. Comme ça, le titre de catégorie est personnalisé seulement lorsqu'il est dans une catégorie.

Bref, cela nous donne ceci :
Code:
.cate_title .cate1 {
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}





La hauteur, les margins et la largeur n'étant pas pris en compte dans les éléments de type "inline" comme un "span". Alors si vous avez une hauteur, largeur ou des margins pour votre titre de catégorie, vous aller devoir transformer ajouter un "display: block;" pour transformer votre "span" en "bloc" et qu'il ait les bonnes dimensions. Si vous n'en avez pas, tant mieux pour vous, vous pouvez passer à la prochaine étape.

Présentement, cela me donne ceci :
Code:
.cate_title .cate1 {
  display: block;
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}





En suivant notre schéma de base, on se rend compte que si on ne veut pas que notre titre de catégorie personnalisé soit caché par le fond de catégorie personnalisé, on va devoir faire la même chose que pour les forums et lui mettre un "z-index". Donc on rajoute un "z-index: 2;" et une "position: relative;" pour que le "z-index" fonctionne :
Code:
.cate_title .cate1 {
  display: inline-block;
  position: relative;
  z-index: 2;
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}





Voilà ce qu'on a pour le moment : aperçu.

C'est décalé T_T
Pas de panique, c'est normal ! Notre titre de catégorie normal a un padding de "10px". Comme notre titre de catégorie personnalisé est à l'intérieur, c'est normal que ce padding le décale. En plus, il y a une bordure à gauche, donc ça crée un décalage supplémentaire.

Pour régler ce décalage, on va se servir de "top" et le "left" pour le positionner correctement. Le "top" indique à quel distance du haut le bloc doit se placer et le "left" indique à quel distance de la droite le bloc doit se placer. Pour le haut, on veut annuler le padding de 10px, donc on va mettre "top: -10px;". Pour la gauche, on veut annuler le padding de 10px et aussi annuler le décalage de la bordure gauche de 3px. On va donc mettre un "left: -13px;".

Bref, à vous de calculer combien il y a de décalage en haut et à gauche à cause d'un "padding" ou d'un "border" et d'ajuster en conséquence avec "top" et "left". Si vous n'en n'avez pas, tant mieux, passez à l'étape suivante ^^

Pour moi, cela va donner ceci :
Code:
.cate_title .cate1 {
  display: inline-block;
  position: relative;
  z-index: 2;
  top: -10px;
  left: -13px;
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}


Et maintenant, il ne nous reste plus qu'à changer ce qu'on veut, soit les couleurs (principalement). Une fois les couleurs changées, cela me donne ce screen.

Et voilà pour le titre de catégorie!




Maintenant, on passe au fond de catégorie personnalisé. Ce qu'on veut faire, c'est venir ajouter un fond qui va venir "cacher" le fond de catégorie de base. Pour cela, on va commencer par copier/coller le CSS du fond de catégorie de base, puis on change le nom pour ".cate_title .catefond1".

Pourquoi ".cate_title .catefond1"?
Tout à l'heure, nous avions ajoutés un span avec la class "catefond1" dans notre titre de catégorie. Du coup, nous mettons ".catefond1" pour sélectionner cette class.

Quant au ".cate_title" juste avant, c'est parce que ce titre de catégorie n'existe pas seulement sur la page d'accueil. Quand on entre dans un sujet, il y a le titre de catégorie en haut de notre sujet. Comme on ne veut pas que le fond personnalisé de notre catéforie apparaisse partout et qu'il brise notre design, on met "cate_title" avant la class du fond de catégorie personnalisé. Comme ça, le fond apparait seulement lorsqu'il est dans une catégorie.

Donc pour le moment, cela ressemble à :
Code:
.cate_title .catefond1 {
  position: relative;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}





Bon, on ne voit rien du tout ><. C'est normal, puisque c'est un "span" à l'intérieur duquel il n'y a aucun texte. Dans les éléments de type "inline" comme un "span", les margins, la hauteur et la largeur n'est pas prise en compte. Alors, on va aller ajouter un "display: block;" pour transformer notre "span" en "bloc" et le faire apparaître :
Code:
.cate_title .catefond1 {
  display: block;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}





En suivant notre schéma de base, on se rend compte que notre fond de catégorie personnalisé doit être par dessus le fond de catégorie normal, en dessous des forums et en dessous du titre de catégorie personnalisé. Pour ça, on va devoir lui mettre un "z-index". Donc on rajoute un "z-index: 1;" :
Code:
.cate_title .catefond1 {
  display: block;
  z-index: 1;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}





Mais, mais, mais... Pourquoi ça ressemble à ce screen? C'est tout petit! Et c'est très très décalé T_T
Encore une fois, c'est normal Wink C'est tout petit parce qu'on ne lui a pas donné de "hauteur". Ça, on va s'en occuper en avant dernier.

Pour le décalage, il ne faut pas oublier qu'on est en position "relative"... Et qu'on est dans le titre, donc c'est normal que ça ne soit pas au bon endroit. Pour le positionner correctement, on va changer la position "relative" pour la position "absolute". Comme ça, le fond personnalisé va se placer dans le coin en haut à droite du fond normal. En plus, comme il y a un padding en haut de 20px et une bordure en haut de 5px, on va devoir ajouter un "top: -25px;". Comme il n'y a rien à régler du côté gauche, on se contente de mettre un "left: 0px;"

Cela va donner ceci :
Code:
.cate_title .catefond1 {
  display: block;
  position: absolute;
  z-index: 1;
  top: -25px;
  left: 0px;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}


Mais c'est toujours trop petit, regarde T_T
Patience, j'avais dit qu'on devait lui donner une hauteur, non?

C'est à vous d'essayer des hauteurs jusqu'à ce que vous arrivez à la bonne. (ou vous pouvez le calculer avec un logiciel de graph ou un autre outil, à vous de choisir). Dans mon cas, il me faut une hauteur de 440px, ce qui donne ceci :
Code:
.cate_title .catefond1 {
  display: block;
  position: absolute;
  z-index: 1;
  top: -25px;
  left: 0px;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  height: 440px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}


Et maintenant, il ne nous reste plus qu'à changer ce qu'on veut, soit les couleurs (principalement). Une fois les couleurs changées, cela me donne cet aperçu.

Et voilà pour le fond de catégorie!




Là, je viens de montrer comment faire pour personnaliser 1 titre de catégorie et 1 fond de catégorie. Pour les autres, c'est plus facile. Pour chaque catégorie que vous voulez personnaliser, vous devez mettre le titre sous ce format, en changeant le "1" par le nombre que vous voulez :
Code:
<span class="cate1">Titre de catégorie</span><span class="catefond1"></span>


Puis, vous recopiez le titre de catégorie personnalisé et le fond de catégorie personnalisé de la première catégorie en changeant le "1" de ".cate1" et de ".catefond1" par le chiffre que vous avez donné à votre autre catégorie et vous changez les couleurs ^^



3. Comment personnaliser chaque fond et titre de forum


Comment personnaliser le design d'un forum spécifique... Alors que la seule chose qu'on peut accéder dans un forum spécifique, c'est son titre et sa description de forum?

La réponse est :
En se servant justement du titre de forum ET de la description de forum ^^




Bon, un peu plus de détails ne feraient pas de mal, n'est-ce pas?

Jusqu'à présent, nous avons suivi ce schéma. Maintenant, nous allons suivre ce nouveau schéma.

Donc en ordre :
- On a toujours notre fond de catégorie normal. (Profondeur 0)
- Notre titre de catégorie de base n'est pas sur l'image, mais il est caché en dessous du fond de catégorie personnalisé. (Profondeur 0)
- Par dessus, il y a le fond de catégorie personnalisé qui va venir "cacher" notre fond de catégorie normal. (Profondeur 1)
- Quant à notre titre de catégorie personnalisé, on va aller le mettre par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Nos forums normaux sont par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Nos forums personnalisés sont par dessus les forums normaux. (Profondeur 3)
- Le contenu de nos forums personnalisés (écriture) sont par dessus nos forums personnalisés (Profondeur 4)




Maintenant que vous avez une petite idée de ce à quoi cela va ressembler, on va commencer le travail \o/

Comme dit plus haut, pour personnaliser les forums et le titre de forum de chaque catégorie, on va passer par deux endroits. Pour le titre de forum personnalisé, on va passer par le titre de forum.

Donc nous allons aller dans le forum que nous voulons personnaliser et on va aller mettre ceci dans le titre :
Code:
<span class="forum1">Titre de forum</span>


Ce qu'on vient de faire?
On vient d'entourer notre titre de forum d'un span avec la class "forum1" pour pouvoir personnaliser la mise en forme de ce titre de forum.




Maintenant, on vient personnaliser notre titre de forum en utilisant le nom "a.forumlink .forum1".

Pourquoi "a.forumlink .forum1"?
Juste tout à l'heure, nous avions entouré notre titre de forum d'un span avec la class "forum1". Du coup, nous mettons ".forum1" pour sélectionner cette class.

Quant au "a.forumlink" juste avant, c'est parce que les titres de forums n'existent pas seulement sur la page d'accueil. Quand on entre dans un sujet, il y a le titre de forum en haut de notre sujet. Comme on ne veut pas que le titre de forum soit personnalisé partout et qu'il brise notre design, on met "a.forumlink" avant la class du titre personnalisé. Comme ça, le titre de catégorie est personnalisé seulement lorsqu'il est dans une catégorie.

Bref, cela nous donne ceci :
Code:
a.forumlink .forum1 {
}





Si on regarde notre schéma, on voit que l'écriture doit avoir un "z-index" parce qu'on veut qu'il soit par dessus les forums personnalisés. Par conséquent, on va leur donner un "z-index: 4;" et un "position: relative;" pour que le "z-index" fonctionne :
Code:
a.forumlink .forum1 {
  position: relative;
  z-index: 4;
}



Minute papillon, pourquoi on a pas rajouté de "display: block;" comme pour le titre de catégorie?

Tout simplement parce que nous n'avions ni largeur, ni hauteur, ni marges. Le titre de catégorie en avait et devait recevoir un "display: block;" parce qu'un "span" n'accepte pas la largeur, la hauteur ou les marges. Si on en a pas, cela ne nous sert à rien de mettre un "display: block;"


Et maintenant, il ne nous reste plus qu'à changer ce qu'on veut, soit les couleurs (principalement). Je ne vous montre pas de screen parce que la couleur que j'ai choisi ressemble trop à l'ancienne, mais vous comprenez le principe, non?

Et voilà pour le titre de forum!




Maintenant, on passe au design de forum. Pour cela, on va commencer par ouvrir notre template Index_Box ainsi que la description du forum que nous voulons personnaliser.

Puis, on va reproduire entièrement la structure d'un forum dans notre description. Pour vous aidez, vous pouvez tout simplement recopier la partie entre "forumrow" de votre template et enlever les variables telles que le titre de forum, la description de forum, les statistiques, etc...

Pour moi, cela donne ceci :
Code:
<div class="forum_bloc">
                            
   <div class="forum_principal_bloc">
                                   
      <div class="forum_title_bloc">
                          
      </div>
                                 
      <div class="forum_img_bloc">
                          
      </div>
                                 
      <div class="forum_desc_bloc">
                           Bla bla bla
      </div>
                                 
      <div class="forum_lastmess_stats_bloc">
                                        
         <div class="forum_stats_bloc">
                               
         </div>
                                        
         <div class="forum_lastmess_bloc">
                               
         </div>
                                      
      </div>
                                 
      <div style="clear: both">
            
      </div>
                     
   </div>
                            
   <div class="forum_sousforums_bloc">
                     
   </div>
                        
</div>


Ok... Mais pourquoi on fait ça?
Bah, on voulait changer le design de la partie "forum", non? Alors on va le refaire au complet, mais avec quelques petites modifications.

... Quelles modifications?
Eh bien, pour commencer, on va ajouter la class "forum_bloc1" au bloc qui entourne notre forum (le "forum_bloc").

Sa class va donc devenir celle-ci :
Code:
<div class="forum_bloc forum_bloc1">


... Et ça sert à quoi?
À tout plein de choses! On va se servir de cette nouvelle class pour aller placer notre nouveau design de forum "par dessus" l'ancien, entre autre.

Pour débuter, on va aller mettre une position "absolute" à notre class ".forum_bloc1" Et comme on veut que ça soit en haut à droite de son "parent" ayant la position "relative" le plus proche (bref, le bloc qui englobe le forum), on lui donne un "top: 0px;" et un "left: 0px;". Cela va donner ceci :
Code:
.forum_bloc1 {
  position: absolute;
  top: 0px;
  left: 0px;
}





Ok, je comprends un peu... Mais regarde ceci! À part le titre du forum et la description de forum, le contenu a disparu!
Outch >< Et si on regardait notre schéma pour voir s'il sait la solution?

Comme le schéma l'indique dans sa "note", si on veut que l'écriture et le contenu du forum soit "par dessus" le design du forum personnalisé... On doit lui donner un "z-index: 4;".

Bah oui, mais je ne peux pas changer ça, les variables sont directment dans le template... non?
Oui, c'est dans le template, mais on va quand même aller le changer.

Donc on se rend dans notre template, et on entoure d'un span avec la class "forum_up" toutes les variables (sauf le titre de forum et la description de forum) qui sont dans la section forum (dans le "forumrow"). Cela devrait donner ceci :
Code:
<!-- BEGIN catrow -->

  <!-- BEGIN tablehead -->
    <div class="cate_bloc">
      <div class="cate_title">
        {catrow.tablehead.L_FORUM}
      </div>
     
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
        <div class="forum_bloc">
         
          <div class="forum_principal_bloc">
           
            <div class="forum_title_bloc">
              <span class="forum_up">
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
              </span>
            </div>
         
            <div class="forum_img_bloc">
              <span class="forum_up">
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              </span>
            </div>
         
            <div class="forum_desc_bloc">
                {catrow.forumrow.FORUM_DESC}
            </div>
         
            <div class="forum_lastmess_stats_bloc">
           
              <div class="forum_stats_bloc">
                <span class="forum_up">
                  {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
                </span>
              </div>
           
              <div class="forum_lastmess_bloc">
                <span class="forum_up">
                  {catrow.forumrow.LAST_POST}
                </span>
              </div>
           
            </div>
         
            <div style="clear: both"></div>
          </div>
         
          <div class="forum_sousforums_bloc">
            <span class="forum_up">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
          </div>
         
      </div>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
  </div>
  <!-- END tablefoot -->

<!-- END catrow -->





C'était long... Et maintenant?
Maintenant, on ajoute un "z-index" à cette nouvelle class.

On se rend donc dans notre CSS et on rajoute la class ".forum_up" avec le "z-index: 4;" et la "position: relative;" pour que le "z-index" fonctionne. Cela va donner ceci :
Code:
.forum_up {
  position: relative;
  z-index: 4;
}





Et cela nous donne cet aperçu.

Maintenant, on va enfin personnaliser les couleurs!

Pour cela, on regarde notre description et on copie toutes les class dans notre CSS, à l'exception du ".forum_bloc". Puis, devant chaque class, on ajoute ".forum_bloc1".


Pourquoi ".forum_bloc1"?

Parce qu'on veut que ce soit uniquement le design du forum qui a ".forum_bloc1" qui soit personnalisé. Au final, cela nous donne ceci :
Code:
.forum_bloc1 {
  position: absolute;
  top: 0px;
  left: 0px;
}
.forum_bloc1 .forum_principal_bloc {
}
.forum_bloc1 .forum_title_bloc {
}
.forum_bloc1 .forum_img_bloc {
}
.forum_bloc1 .forum_desc_bloc {
}
.forum_bloc1 .forum_lastmess_stats_bloc {
}
.forum_bloc1 .forum_stats_bloc {
}
.forum_bloc1 .forum_lastmess_bloc {
}
.forum_bloc1 .forum_sousforums_bloc {
}





Puis, vous changez les couleurs et tout ce que vous voulez. S'il y a des éléments que vous n'avez pas changé, vous pouvez tout simplement les enlever du CSS. Une fois les couleurs changées, cela me donne cet aperçu.

Et voilà pour les design de forum!




Là, je viens de montrer comment faire pour personnaliser 1 titre de forum et 1 fond de forum. Pour les autres, c'est plus facile. Pour chaque forum que vous voulez personnaliser, vous devez mettre le titre sous ce format, en changeant le "1" par le nombre que vous voulez :
Code:
<span class="forum1">Titre de forum</span>


Quant aux fonds de forums, vous recopiez la description de forum du forum déjà personnalisé et vous changez le 1 du "forum_bloc1" pour le chiffre que vous avez choisi.

Enfin, dans le CSS, vous recopiez le CSS propre au forum déjà personnalisé et vous changez les 1 par le chiffre que vous avez choisi. À savoir que rien ne vous empêche de changer le chiffre nul part et de reprendre le même design pour tous les forums d'une même catégorie, comme je l'ai fait sur cette image.



4. Problèmes possibles


Si vous avez fonctionné pareil comme dans le tuto et que vous avez mis une "deuxième class" au bloc de fond de forum dans la description et que les changements ne s'effectuent pas même après la personnalisation :
Cause très probable :
Il ne faut jamais oublier que le CSS se lit de "haut en bas". Le navigateur le lit dans le même ordre. Donc si vous avez mis la personnalisation de vos forums plus haut dans le CSS que le design de base... Le design de base sera considéré comme "plus important" parce qu'il est "après", donc "plus bas". Il vous suffit de couper votre CSS de vos forums personnalisé et de le mettre "après", donc "plus bas" que le CSS des forums de base.

Par exemple, ici, le texte resterait noir parce que la class personnalisée est "plus haut", donc "avant". Il faudrait l'inverser :
Code:
.nom_personnalisé {
  color: red;
}
.nom {
  color: black;
}



Les membres voient des gros décalements quand ils ont des résolutions d'écran différentes :
Cause probable :
Avec des résolutions d'écran différentes, si les tailles sont en %, la taille des éléments est différente. Pour la largeur, cela devrait majoritairment rester pareil, mais c'est 99% sûr qu'il y aura des décalements par rapport à la hauteur.
Pour régler ce souci, il suffit de travailler avec des hauteurs et des largeurs fixes. Exemple, 800px de largeur par 150px de hauteur pour un forum, etc...


Et... Bah rien, j'ai plus d'idées de problème possible à moins d'avoir mal compris le tuto en fait ><


Alors c'est tout! Si jamais vous avez des problèmes avec ce Tutoriel, n'hésitez pas à passer dans "Problème avec mon code" pour recevoir de l'aide.

À plus !

Catégories Brunes - Images derrière le titre de catégorie modifiables - Dim 1 Mar 2015 - 20:45



Catégories Brunes - Image derrière le titre de catégorie modifiable


Voici un petit LS de catégories que j'ai faites pour la demande de Filou, où on peut mettre une image de "haut de catégorie" différente pour chaque catégorie. De plus, la description des forums se révèlent au survol de l'image du forum.

Pour voir l'aperçu : cliquez ici.

Ce LS est en quatre parties.
  • Tout d'abord, nous allons installer les catégories dans le template.
  • Puis, nous allons mettre en forme les catégories à l'aide du CSS.
  • Ensuite, nous allons voir comment mettre un titre de catégories en image.
  • Enfin, nous allons mettre la description de forum.


- Pour ce qui est de l'hiérarchie et la structure des catégories, il faut choisir "Séparer les catégories sur l'index : Moyen".
- Les catégories ont une largeur de 854px.
- La version du forum est PHPBB2.
- Les images derrière les titres font 850 par 150 pixels.
- Les boutons Old/New/Lock font 80 par 85 pixels.
- L'image qui cache les catégorie fait 377 par 76 pixels.

Mettre un crédit vers Never-Utopia est obligatoire.
Un petit merci ou commentaire est toujours le bienvenu ^^





1. Les catégories (Template Index_Box)



Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BOX

Puis, on va entièrement remplacer le template "Index_Box" par ceci :
Code:
<link href='http://fonts.googleapis.com/css?family=Lobster|Shadows+Into+Light|Indie+Flower|Nunito' 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 -->
<div class="categorie">
  <div class="cate_title">
    {catrow.tablehead.L_FORUM}
  </div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
  <div class="forum_bloc">
    <div class="forum_title">
      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
        {catrow.forumrow.FORUM_NAME}
      </a>
    </div>
    <div class="forum_old_new_lock_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="forum_desc">
      {catrow.forumrow.FORUM_DESC}
    </div>
    <div class="forum_lastmess_stats">
      <div class="forum_stats">
        {catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages
      </div>
      <div class="forum_lastmess">  
        {catrow.forumrow.LAST_POST}
      </div>
    </div>
    <div style="clear: both;">
    </div>
    <div class="forum_sous_forums">
      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
    </div>
  </div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->





2. Mise en forme (CSS)



Si vous regardez vos catégories, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme nos catégories à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/**************************************************  DÉBUT DES CATÉGORIES **************************************************/


/*Bloc de catégorie*/
.categorie {
  position: relative;
  width: 850px;
  margin: auto;
  background-color: #767352;
  border-top-left-radius: 427px 112px;
  border-top-right-radius: 427px 112px;
  padding-bottom: 0px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 3px solid #3d3a24;
  font-size: 12px;
  font-family: georgia;
  color: #2b291a;
}
.categorie a {
  color: #000000;
}
.categorie a:hover {
  color: #554c32;
}


/*Bloc du titre de catégorie*/
.cate_title {
  height: 150px;
  width: 850px;
  margin-bottom: 40px;
  background-image: url('');
  border-bottom: 3px solid #3d3a24;
  border-top-left-radius: 425px 110px;
  border-top-right-radius: 425px 110px;
}
/*Titre de catégorie*/
.cate_title h2 {
  display: block;
  width: 850px;
  margin: 0px;
  padding: 0px;
  padding-top: 70px;
  text-align: center;
  text-shadow: 1px 1px 2px #554c32;
  color: #000000;
  font-family: monotype corsiva;
  font-weight: normal;
  font-size: 50px;
}
/*Met le titre de catégorie dessus son image*/
.cate_title span {
  position: relative;
  z-index: 2;
}
/*Image du titre de catégorie*/
.cate_title img {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 150px;
  width: 850px;
  z-index: 1;
  border-top-left-radius: 425px 110px;
  border-top-right-radius: 425px 110px;
}


/*Bloc de forum*/
.forum_bloc {
  margin: auto;
  width: 800px;
  height: 160px;
  box-shadow: 0 0 10px #000000;
  background-color: #a8a287;
  margin-bottom: 30px;
}


/*Bloc du titre de forum*/
.forum_title {
  height: 35px;
  line-height: 35px;
  margin-left: 170px;
  display: block;
}
/*Titre de forum*/
a.forumlink {
  font-family: 'Lobster', cursive;
  font-size: 20px;
  letter-spacing: 0px;
  font-weight: normal;
  color: #000000!important;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Titre de forums survolé*/
a.forumlink:hover {
  color: #554c32!important;
  letter-spacing: 2px;
  text-decoration: none!important
}


/*Bloc image Old New Lock*/
.forum_old_new_lock_img {
  float: left;
  height: 80px;
  width: 85px;
  margin-left: 30px;
}
.forum_old_new_lock_img img {
  height: 80px;
  width: 85px;
}


/*Bloc de la description de forum*/
.forum_desc {
  position: relative;
  float: left;
  width: 377px;
  height: 76px;
  border: 2px solid #747253;
  margin-left: 46px;
  margin-right: 46px;
  overflow: hidden;
}
/*Description de forum*/
.forum_desc_desc {
  position: absolute;
  width: 373px;
  height: 72px;
  background-color: #000000;
  color: #a3a3a3;
  opacity: 0;
  overflow: auto;
  padding: 2px;
  overflow: auto;
  text-align: justify;
  top: 0px;
  left: 0px;
  transition: 0.5s;
}
/*Apparition de la description de forum*/
.forum_desc:hover .forum_desc_desc {
  opacity: 0.8;
}
/*Image de la description de forum*/
.forum_desc_img {
  position: absolute;
  width: 377px;
  height: 76px;
  top: 0px;
  left: 0px;
}


/*Bloc du dernier message et statistiques*/
.forum_lastmess_stats {
  float: left;
  width: 180px;
  height: 78px;
  border: 1px dotted #6e6555;
  text-align: center;
}
/*Statistiques*/
.forum_stats {
  font-size: 10px;
  font-family: verdana;
  margin: auto;
  width: 160px;
  padding-top: 8px;
  padding-bottom: 2px;
  border-bottom: 1px dotted #6e6555;
}
/*Dernier message*/
.forum_lastmess {
  margin: auto;
  margin-top: 8px;
  width: 170px;
}


/*Bloc des sous-forums*/
.forum_sous_forums {
  width: 700px;
  margin: auto;
  margin-top: 8px;
  padding-top: 5px;
  height: 26px;
  text-align: center;
  border-top: 1px dotted #6e6555;
  vertical-align: bottom;
  overflow: auto;
  font-size: 12px;
  font-family: georgia;
}
/*Liens des sous-forums*/
.forum_sous_forums a {
  vertical-align: bottom;
  font-size: 12px;
  font-family: georgia;
}
.forum_sous_forums img {
  width: 26px;
  height: 20px;
}

/*Cache les images qui ne doivent pas apparaître*/
a.forumlink img, a.nav img {
  display: none;
}


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


Dans le "background-image: url('');" de la classe ".cate_title", vous pouvez mettre une image qui apparaîtra pour les catégories qui n'ont pas d'image personnalisée.





3. Titre de catégorie en image



Si certains se demandent comment on fait pour personnaliser l'image derrière la catégorie. C'est simple, on la met dans le titre de la catégorie lui-même!

Vous devez vous assurer de mettre vos titres de catégories sous ce format, en remplaçant "URL DE L'IMAGE" par l'url de l'image du titre de catégorie et "TITRE DE FORUM" par le nom de votre forum/catégorie :
Code:
<span>TITRE DU FORUM</span><img src="URL DE L'IMAGE" alt="Titre" />





4. Description de forum



C'est bien beau, mais il nous manque quand même des choses. Dans les descriptions des forums, il va y avoir l'image de la description et la description elle-même.

Pour les mettre, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > GÉNÉRAL
> > > FORUM
> > > > CATÉGORIES ET FORUMS

Puis, vous aller pouvoir mettre ce code à la place de vos descriptions de forum. L'image de chaque forum peut être modifiée et la description en elle-même va à la place du charabia en latin :
Code:
<img class="forum_desc_img" src="http://img15.hostingpics.net/pics/522515fond2.png" alt="img description" /><div class="forum_desc_desc">Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt. </div>





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec mon code" ou "Personnalisations".

À plus !

Onyx

Catégories gris/rose - Mar 17 Fév 2015 - 4:24



Catégories Gris/Rose


Voici un petit LS de catégories que j'ai faites pour la demande d'Aisling (Madii) et que j'ai un peu remaniées. D'ailleurs, il y a un LS de PA Gris/Rose et un LS de QEEL Gris/Rose faits par Henrikiyi qui l'accompagnent.

Pour voir l'aperçu : cliquez ici.

Effet spécial :
- Le bouton Old/New/Lock à gauche prend automatiquement la forme du nuage sous Opéra et Google Chrome.
- La barre de défilement est mince et rose comme sur l'aperçu (pour les descriptions de forum) sous Opéra et Google Chrome.

Ce LS est en trois parties.
  • Tout d'abord, nous allons installer les catégories dans le template.
  • Puis, nous allons mettre en forme les catégories à l'aide du CSS.
  • Finalement, nous allons voir comment mettre un titre de catégories en image si vous le souhaitez.


- Pour ce qui est de l'hiérarchie et la structure des catégories, il faut choisir "Séparer les catégories sur l'index : Moyen".
- Les catégories ont une largeur de 800px.
- La version du forum est PHPBB2.
- Les boutons Old/New/Lock font 130 par 57 pixels.

Mettre un crédit vers Never-Utopia est obligatoire.
Un petit merci ou commentaire est toujours le bienvenu ^^





1. Les catégories (Template Index_Box)



Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BOX

Puis, on va entièrement remplacer le template "Index_Box" par ceci :
Code:
<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Dancing+Script' 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 -->
<div class="cate_title">
  {catrow.tablehead.L_FORUM}
</div>
<div class="cate_bloc">
 <!-- END tablehead -->
 <!-- BEGIN cathead -->
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
  <div class="cate_forum">
    <img class="old_new_lock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    <div class="cate_forum_middle">
      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
      <div class="forum_desc">
        {catrow.forumrow.FORUM_DESC}
      </div>
    </div>
    <div class="cate_forum_last">
      <div class="forum_last_stats">
        Sujets:{catrow.forumrow.TOPICS} | Messages : {catrow.forumrow.POSTS}
      </div>
      <div class="forum_last_mess">
        {catrow.forumrow.LAST_POST}
      </div>
    </div>
  </div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->





2. Mise en forme (CSS)



Si vous regardez vos catégories, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme nos catégories à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/************************************************** DÉBUT DES CATÉGORIES **************************************************/

/*Bloc des titres des catégories*/
.cate_title {
  width: 800px;
  height: 75px;
  padding-top: 10px;
  margin: auto;
  text-align: center;
  background-image: url('http://img15.hostingpics.net/pics/520024nuage.png');
  background-repeat: no-repeat;
  background-position: top center;
  margin-bottom: -10px;
}
/*Titres des catégories*/
.cate_title h2 {
  display: block;
  padding-top: 15px;
  height: 60px;
  margin: 0px;
  font-family: "Dancing Script";
  text-shadow: 1px 1px 3px #ffb5cc;
  font-size: 55px;
  letter-spacing: 1px;
  color: #d74e77;
}
.cate_title h2 img {
  margin-top: -25px;
  margin-left: 20px;
}
.cate_title h2 span {
  display: none;
}
a.nav img {
  display: none;
}


/*Bloc des catégories*/
.cate_bloc {
  background-color: #ffffff;
  width: 800px;
  margin: auto;
  margin-bottom: 10px;
  border-radius: 10px;
  padding-top: 50px;
  padding-bottom: 1px;
  font-family: "abeatbykai", sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: gray;
}


/*Bloc des forums*/
.cate_forum {
  height: 100px;
  width: 800px;
  margin-bottom: 20px;
}


/*Image Old New Lock*/
.old_new_lock {
  float: left;
  margin-left: 15px;
  margin-top: 21px;
  width: 130px; /*Largeur des images*/
  height: 57px; /*Hauteur des images*/
}
/*Masque*/
.old_new_lock {
  -webkit-mask: url(http://www.aht.li/2552618/nuage.svg) center center / 130px 57px;
  mask: url(http://www.aht.li/2552618/nuage.svg) center center / 130px 57px;
}


/*Bloc gris du mileu*/
.cate_forum_middle {
  position: relative;
  float: left;
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
  width: 420px;
  height: 53px;
  padding: 10px;
  padding-top: 17px;
  background-color: #e4e1e2;
  border-radius: 10px;
}

/*Titres des forums*/
.forumlink {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 28px;
  font-size: 28px;
  font-family: 'Covered By Your Grace', cursive;
  color: grey!important;
  font-weight: normal;
}
/*Titres survolés des forums*/
.forumlink:hover {
  color: #d74e77!important;
  text-decoration: none!important;
}
/*Désactiver les images des titres*/
.forumlink img {
  display: none;
}

/*Description des forums*/
.forum_desc {
  height: 53px;
  overflow-y: auto;
  padding-right: 5px;
  text-align: justify;
}


/*Bloc gris des statistiques et du dernier message*/
.cate_forum_last {
  position: relative;
  float: left;
  margin-top: 10px;
  width: 160px;
  height: 70px;
  padding: 5px;
  background-color: #e4e1e2;
  border-radius: 10px;
  text-align: center;
}
/*Statistiques*/
.forum_last_stats {
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 10px;
  padding-bottom: 3px;
  font-size: 9px;
  border-bottom: 1px dashed #d74e77;
}
/*Police du dernier message*/
.forum_last_mess, .forum_last_mess a.gensmall {
  font-size: 11px;
  font-family: "abeatbykai", sans-serif;
}
/*Couleur des liens du dernier message*/
.forum_last_mess a {
  color: #d74e77;
}


/*Les barres de défilement dans les catégories*/
.forum_desc::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
.forum_desc::-webkit-scrollbar-thumb {background:rgba(242,163,189,1); height:30px; border-radius:30px;}
.forum_desc::-webkit-scrollbar-corner {background:none;}

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





3. Titre de catégorie en image



Certains aiment faire leur titre de catégorie en image pour pouvoir avoir une plus belle typographie. Ce n'est pas obligatoire, mais c'est possible \o/

Idéalement, l'image devrait faire 94px de hauteur. La largeur n'importe pas vraiment. Voici un exemple :
Spoiler:


Vous devez vous assurer de mettre vos titres de catégories sous ce format, en remplaçant "URL DE L'IMAGE" par l'url de l'image du titre de catégorie et "TITRE DE FORUM" par le nom de votre forum :
Code:
<span>TITRE DU FORUM</span><img src="URL DE L'IMAGE" alt="Titre" />


C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec mon code" ou "Personnalisations".

À plus !

Les sous forums ne sont pas présents dans ce libre service. Pour les ajouter, vous pouvez regarder par exemple ce topic

Alumine

The Lord of the Rings - Lun 16 Fév 2015 - 18:39



Catégories The Lord of the Rings


Version PHPBB2 - Aperçu - Police: Bilbo Swash caps clic pour l'installer - images de P@lcopie et Ivy Tyler



HTML


Rendez-vous dans votre template index_box (affichage>template>général>index_box) et remplacez-le entièrement par celui-ci:
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="titrecategorie" width="100%">{catrow.tablehead.L_FORUM}</div>

  <table class="forumline categorie" width="100%" border="0" cellspacing="0" cellpadding="0">
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
          <td class="forumgauche">
            <h{catrow.forumrow.LEVEL} class="hierarchy">
              <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br /></span>
            </h{catrow.forumrow.LEVEL}>
            <span class="gensmall">Sujets: {catrow.forumrow.TOPICS} </span>
            <span class="gensmall">Messages: {catrow.forumrow.POSTS}</span>
          </td>
         
          <td class="forumcentre" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
            <div class="sousforum">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </div>
          </td>
         
          <td class=" forumdroite" align="center" valign="middle">
            <img class="boutonnouveau" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            <div class="dernierpost">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
            <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
            </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>
<div class="bascategorie">
  <img src="http://image.noelshack.com/fichiers/2015/07/1423492133-f-coingauche.png" class="coingauche" />
  <img src="http://image.noelshack.com/fichiers/2015/07/1423492133-f-coindroite.png" class="coindroite" />
</div>
<!-- END tablefoot --><!-- END catrow -->

Enregistrez puis publiez votre template, sinon ça marchera pas x)


CSS


Ensuite direction le CSS (affichage>couleurs>feuille de style CSS)
Ajoutez ceci:
Code:
/*catégories seigneur des anneaux par Alu pour Never Utopia****************************************/
.forumgauche, .forumcentre, .forumdroite{
  box-sizing:border-box;
  display:inline-block;
  padding:10px;
  color:white;
  margin-bottom:25px;
  height:150px;
  z-index:1;
}
.forumgauche{
  width: 25%;
  background-color: #000000;
  background-image: url(http://image.noelshack.com/fichiers/2015/07/1423490967-f-background.png);
  background-position:bottom;
  background-size:contain;
  background-repeat:no-repeat;
  position:relative;
  border-top-left-radius: 35% 15%;
  border-bottom-left-radius: 35% 15%;
}

.forumcentre{
  background:#191919;
  width:50%;
  position:relative;
}
.forumdroite{
  background-image:url(http://image.noelshack.com/fichiers/2014/52/1419283627-anneau.jpg);
  background-size: contain;
  background-color: #000000;
  background-repeat: no-repeat;
  background-position:center;
  width:25%;
  position:relative;
  border-top-right-radius: 35% 15%;
  border-bottom-right-radius: 35% 15%;
}

.dernierpost{
  position:relative;
  top:30px;
  margin-left:auto;
  margin-right:auto;
  width:100px;
  height:50px;
  z-index:1;
}

.dernierpost .gensmall span{
  font:9px;
}
.dernierpost a{
  font:15px;
  color:grey;
}

.boutonnouveau{
  left: 23%;
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 25px auto;
  display: block;
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}

.forumdroite:hover > .boutonnouveau{
  left:75%;
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}

.sousforum{
  box-sizing:border-box;
  position:absolute;
  bottom:0px;
  left:0px;
  background:#000000;
  text-align:center;
  width:100%;
  padding:7px;
  height:40px;
  overflow:auto;
}
.sousforum a{
  font: 19px Bilbo Swash Caps;
  color:white !important;
}

.forumlink a{
  font:30px Bilbo swash caps;
  color:white !important;
}

.titrecategorie{
  box-sizing:border-box;
  padding: 30px 30px 0 30px;
  height:100px;
  margin-top:50px;
  background-image:url(http://image.noelshack.com/fichiers/2015/07/1423490971-f-titregauche.png),
    url(http://image.noelshack.com/fichiers/2015/07/1423490970-f-titredroite.png);
  background-position: 6% 100%, 94% 100%;
  background-repeat:no-repeat, no-repeat;
  background-size:auto 70px, auto 70px;
}
.titrecategorie h2{
  text-align:center;
  color:white;
  font-family:Bilbo swash caps;
  font-size:50px;
  margin:0;
  font-weight:normal;
}
.bascategorie{
  height:50px;
  margin-bottom:50px;
  position:relative;
}
.categorie{
  padding:10px 40px;
}

.coingauche{
  display:block;
  position:absolute;
  width:40%;
  bottom:20px;
  left:-20px;
  z-index:0;
}
.coindroite{
  display:block;
  position:absolute;
  width:40%;
  bottom:20px;
  right:-20px;
  z-index:0;
}


Merci de poster un crédit pour N-U sur votre forum, ça ne coûte pas grand-chose ! ^^

Un petit merci ou commentaire est toujours le bienvenu ^^
Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.

Astuce ▬ Mettre en place les logos de partenariat dans le footer. - Jeu 29 Jan 2015 - 12:10



Bonjour, bonsoir:D

Ceci est mon premier tutoriel. Après la demande de Lisou pour afficher ces partenaires dans le footer, je me suis dit que j'allais le proposer.

Dans ce tuto je vais vous montrer comment placer ces partenaires en footer de deux manières différentes. Vous avez effectivement le choix de placer vos partenaires de sorte à ce qu'ils soient visible sur toutes les pages de votre forum ou uniquement sur l'index de celui-ci.

Alors commençons:)

/!\ Je rappelle que cette section existe en cas de problème!./!\


I. Visible uniquement sur l'Index du Forum.


✘ Mise en page avec scrollbare.

Aperçus d'un potentiel rendu.

Comme vous pouvez le voir sur le screen, sur la droite de votre box il y a une scrollbare. Et aussi, la box se trouve entre votre QEEL (Qui Est En Ligne) et votre légende des nouveaux messages, pas de nouveaux messages et forum verrouillé. Ainsi votre boxe et vos partenaires ne sont visibles uniquement que su votre index.

Le HTML :
Code:
<center><div class="titre_footer">Nos Partenaires Footer.</div><div class="partenaire_footer">
  <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div></center>


Voici donc le bout de code qu'il vous faut. Il est à placer dans le template « index_body » après la « {CHATBOX_BOTTOM} »

Le CSS :
Code:

/** PARTENAIRE Footer**/
.partenaire_footer {
background-color:#fff;
width: 620px;
height: 50px;
border: 2px solid red;
overflow: auto;
}

.titre_footer {
width: 620px;
height: 25px;
background-color:#000;
border: 2px solid red;
color: #209CC9 !important;
display: block;
font-family: Times New Roman !important;
font-size: 20px;
text-align: center;}

/** FIN PARTENAIRE FOOTER **/


Et en fin le bout de CSS associé. Il est à mettre dans la feuille de style. Vous pouvez tout changer, améliorer, mettre des effets en plus, en moins.

/!\ Ce qui met en place la scrollbare est « overflow:auto; », donc n'y touchez pas ! /!\

✘ Mise en page avec défilement.


La mise en page consiste à faire défiler les logos de la droite vers la gauche. Pour cela dans votre code HTML vous devez entourer vos logos avec la balise suivante :
Code:
<nobr><marquee> ...</marquee></nobr>


Ce qui donne :


Et dans votre CSS vous n'avez qu'à régler la hauteur de votre boxe comme bon vous semble et de retirer l'overflow.

✘✘ Variante du défilement.

Comme vue précédemment le défilement se fait de la droite vers la gauche, mais que diriez-vous de varier le défilement, de faire en sorte que lorsqu'on passe sa souris sur un logo le défilement se stop – ce qui est fort appréciable pour une clikeuse de logo partenaire comme moi xD

✘✘✘ Variante simple.

Les variantes simples seront juste de changer le sens du défilement. Au lieu d'aller de droite à gauche, pourquoi ne pas aller de gauche à droite, de bas en haut et de haut en bas. Pour cela il faut mettre un attribut à votre balise. Celui-ci sera « DIRECTION », puis vous ajouterez la direction souhaité :

Vers la gauche :


Vers la droite :


Vers le haut :


Vers le bas :


Pour définir le sens de défilement vous avez le choix entre les quatre valeurs suivantes :
- left.
- right.
- up.
- down.

✘✘✘ Variante « aller-retour ».

«Ce que j’appelle un « aller-retour » c'est le fait que sa aille à gauche puis reviens à droite et ceci à l'infini. Pour définir une variante de défilement il faut ajouter un attribut à la balise marquee qui sera « behavior ». ce qui donnera
Code:
<marquee behavior="..."></marquee>
, ce qui donne :



Pour obtenir cet effet nous allons ajouter à notre balise l'attribut « alternate » :
Code:
<marquee behavior="alternate">...</marquee>
Personnellement je conseille cette variante lorsque vous avez un petit nombre de logo à faire défiler.

✘✘ Stop Souris.

Le stop souris consiste à faire stopper le défilement au passage de votre souris.

Néanmoins ! J'ai rencontré un soucis avec le Stop souris. Et en ayant discuter avec Nihil, elle m'a fait découvert que le Stop Souris ne fonctionne pas chez tout le monde et sur tous les navigateurs. Ayant fais le test moi-même, le stop souris fonctionne parfaitement bien sous le navigateur Google Chrome, mais pas sous le navigateur Mozilla Firefox. Alors que chez Samhain cela fonction très bien sous les deux navigateurs.


La aussi il faut ajouter, non pas un, mais deux attributs qui se suivent : « onmouseover="this.stop();" » « onmouseout="this.start();" », ce qui donne :
Code:
<marquee onmouseover="this.stop();" onmouseout="this.start();"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></marquee>


✘✘ Le temps de défilement.

Vous pouvez choisir de faire défiler vos partenaires lentement, ou au contraire rapidement. La aussi on ajout un attribut à notre balise de départ : « scrollamount ». Vous définissez une valeur numérique compris en 1 et 100. A 1 vos logos défilerons très lentement et plus vous vous rapprocherez de 100 vos logos défilerons vite.

Valeur numérique de 5 :


Valeur numérique de 30 :



II. Visible sur toutes les pages du Forum (phpBB2).

Comme promis, voici comment mettre en place votre footer partenaire de sorte à ce qu'il soit visible sur toutes les pages de votre forum. Vous devez aller dans le template « overall_footer_begin ».

Prenez le code qui suit et changé intégralement le template avec.
Le HTML :
Code:
<!-- BEGIN html_validation -->
<div>
   <div>
      <table>
         <tbody>
            <tr>
               <td>
<!-- END html_validation -->
               </td>
               <td valign="top" width="{C3SIZE}">
               <div id="{ID_RIGHT}">
                  <!-- BEGIN giefmod_index2 -->
                  {giefmod_index2.MODVAR}
                  <!-- BEGIN saut -->
                  <div style="height: {SPACE_ROW}px"></div>
                  <!-- END saut -->
                  <!-- END giefmod_index2 -->
               </div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>
<!-- close div id="page-body" -->
<div id="page-footer">
   <div align="center">
      <div class="gen"><div class="titre_footer2">Nos Partenaires Footer.</div><div class="partenaire_footer2">
  <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div>
<!-- BEGIN html_validation -->
      </div>
   </div>
</div>
<!-- END html_validation -->


Votre morceau de code reste inchangé à la première partie :
Code:
<div class="titre_footer2">Nos Partenaires Footer.</div><div class="partenaire_footer2">
  <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div>


Le CSS :
Code:

/** PARTENAIRE Footer**/
.partenaire_footer2 {
background-color:#fff;
width: 620px;
height: 100px;
border: 2px solid red;
overflow: auto;
}

.titre_footer2 {
width: 620px;
height: 25px;
background-color:#000;
border: 2px solid red;
color: #209CC9 !important;
display: block;
font-family: Times New Roman !important;
font-size: 20px;
text-align: center;}

/** FIN PARTENAIRE FOOTER **/


La encore vous pouvez personnaliser le footer comme bon vous semble, en utilisant toutes les variantes cité plus haut.

II. Mise en page avec une image de fond.

Vous pouvez personnaliser à volonté votre footer et donc lui donner une image de fond. J'ai fait du basique pour vous montrer : Screen ou en Live.

Pour cela rien de plus simple pour les codeurs en herbe que vous êtes Very Happy Dans votre CSS vous allez changer le :
Code:
background-color : #fff;

en
Code:
background : url('METTRE ICI L'URL DE VOTRE IMAGE');


Et voilà, vous avez une image en fond ! Ah j’allai oublier ! Si vous définissez une image de fond vous devez changer la hauteur et la largeur en fonction de la taille de votre image.

Ensuite vous allez voir que vos logos sont mal positionné. Pas de problème nous allons remédier à cela. Vous allez ajouter une div dans votre code, comme ceci :
Code:
<div class="partenaire_footer2"><div class="logo_partenaires">...</div></div>


Puis dans votre CSS, vous ajoutez :
Code:
.logo_partenaires { padding : 35px ; }


Vous réglez la valeur du padding comme bon vous semble en fonction de votre image :)

Et voilà, le tuto est terminé \o/

/!\ Je rappelle que cette section existe en cas de problème!./!\

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Alzufen

Chatbox spéciale Halloween - Sam 10 Jan 2015 - 19:45


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bonjour, bonsoir à vous.

Avant toutes choses, ce LS est réalisable sur toutes les versions, il y a seulement quelques différences notable dans le CSS d'une version à une autre. Cependant, par soucis de simplicité, le code fournis ci-dessous n'est que pour PHPBB2 tâchez donc d'avoir la bonne version. Dans le cas contraire, vous pouvez toujours tenter de modifier ce qui ne va pas vous même ou avec l'aide des gens du forum dans "Problème avec mon code" par exemple. Vous pouvez aussi poster ci-dessous pour me signaler votre désir que j'adapte le code à telle version, s'il y a un certain nombre de demande je le ferais pour la version demandée.

Cette chatbox a été créer spécialement pour s'adapter à un thème d'Halloween, cependant en le modifiant un peu vous pouvez l'adapter pour n'importe quoi, ce LS est surtout là à titre d'exemple pour montrer ce qui est réalisable avec uniquement du CSS. Si vous avez le moindre problème avec ce LS ça se passe >> ici <<

Les personnalisations peuvent être beaucoup plus poussé que ça, libre à vous de chercher sur internet ou sur le forum d'autres LS ou des tutos pouvant vous aider à, par exemple, personnaliser les messages de connexion/déconnexion.

Voici un visuel du LS actuel dans une grande fenêtre : https://i.imgur.com/QGefZsJ.png




Il vous suffit donc juste de répérer le code correspond à votre version et de le copier/collier dans votre feuille de style CSS. Les autres indications seront en commentaire dans le code CSS pour vous aidez à comprendre quoi correspond à quoi et ce que vous pouvez toucher (ou non).

Il vous suffit maintenant de vous rendre dans votre feuille de style CSS et de rentrer le code suivant puis de "valider" tout simplement.
Pour rappeler : Panneau d'administration > Affichage > Couleurs > Feuille de style CSS

Code:
/* ---------------------------------------- Chatbox Halloween PHPBB2 -------------------------------------------------- */

#chatbox_header,
#chatbox_footer {
  /* Influence sur la barre en haut et en bas de la chatbox */
  background: rgb(255, 155, 0);
}

#chatbox_header a,
#chatbox_header label,
#chatbox_header li {
  /* Influence sur les balises a, label et li de la barre en haut et en bas */
  color: #000;
}

body.chatbox {
  /* Influence sur la chatbox total */
  background: rgb(19, 0, 27);
}

#chatbox_members .member-title {
  /* Influence toute la partie gauche, titres et membres connectés */
  background: rgb(161, 0, 255);
  color: rgb(255, 255, 255);
}

#chatbox_members {
  /* Influence la partie gauche de la liste des membres connectés de la chatbox */
  border-right-color: rgb(161, 0, 255);
}

#chatbox p {
  /* Influence les balises P de la chatbox, normalement la zone où apparait les messages */
  background: none;
  color: rgb(255, 255, 255);
  line-height: 1;
}

.chatbox .fontbutton,
div#divcolor,
div#divsmilies,
#message,
input#submit_button,
div#help-button {
  /* Influence les boutons de la barre en bas */
  background: rgb(161, 0, 255) no-repeat center;
  border: 1px solid rgb(0, 0, 0);
  color: #fff;
  vertical-align: top;
}

#message {
  /* Influence sur l'input permettant d'écrire son message */
  background: rgb(161, 0, 255);
  border: 1px solid rgb(0, 0, 0);
}

input#submit_button {
  /* Influence sur le bouton d'envoi des messages */
  margin: 2px 0 0 5px;
  padding: 2px;
  cursor: pointer;
}

label[for="message"] {
  /* Fait disparaître le texte "message :" derrière la zone d'envoi du message de la Chatbox */
  display: none;
}

.chatbox .fontbutton:hover,
input#submit_button:hover,
div#divcolor:hover,
div#divsmilies:hover,
div#help-button:hover {
  /* Influence les boutons survolé et sélectionné de la barre en bas */
  background: rgb(35, 0, 55) no-repeat center;
  border: 1px solid rgb(0, 0, 0);
}

#message:focus,
input#submit_button:focus {
  /* Influence les boutons "envoyer" et le champ de texte où l'ont n'écrit notre message quand celui-ci est cliqué par la souris */
  background: rgb(35, 0, 55);
  border: 1px solid rgb(0, 0, 0);
}

#chatbox .msg span[style="color:undefined"] {
  /* Influence les /me et le message après un clear */
  color: gold;
}

#chatbox .msg span[style="color:undefined"] em {
  /* Influence les kick, ban, déban et don de droit de modo de la chatbox */
  color: chocolate;
}

.chatbox span[style^="color:green"] {
  /* Influence les messages de connexion */
  color: orange!important;
}

.chatbox span[style^="color:red"] {
  /* Influence les messages de déconnexion */
  color: orangered!important;
}

#chatbox_contextmenu {
  /* Influence sur le bloc qui apparait au clic droit sur un pseudo dans la partie gauche */
  background: rgb(24, 11, 32);
}

#chatbox_contextmenu .close {
  /* Influence sur la partie haute de ce bloc où se trouve le pseudo de l'utilisateur et la croix pour fermer */
  text-align: center;
}

#chatbox_contextmenu p {
  /* Influence les balises P de cette partie, notamment les lignes en dessous du nom */
  background: rgb(60, 35, 77);
  border-bottom-color: rgb(0, 0, 0);
}

#chatbox_contextmenu a {
  /* Influence les liens de cette même partie */
  color: rgb(255, 255, 255);
}

#chatbox_contextmenu p.hover {
  /* Influence les balises P de cette même partie au survol de celles-ci */
  background: rgb(146, 26, 228);
}

#chatbox_members li>span,
.user strong{
  /* Influence les @ de la chatbox */
  font-size: 0;
}

.user strong:after{
 /* Permet de remettre les ":" après le pseudo dans les messages */
  content: ':';
  font-size: 12px;
}

#chatbox_members li>span:before,
.user strong:before {
  /* Permet l'ajout d'un contenu précédent les @ de la chatbox */
  content: url(http://image.noelshack.com/fichiers/2014/43/1414319546-pumpkin-16.png);
  position: relative;
  top: 4px;
  right: 2px;
  font-size: 10px;
}

#chatbox_members li span span,
.user strong span {
  /* Influence les pseudo de la chatbox */
  font-size: 12px;
}

#chatbox {
  /* Influence la partie où sont affichés les messages de la chatbox */
  overflow-x: hidden;
  /* Empêche la scrollbar du bas d'apparaître */
  word-break: break-word;
  /* Force le texte à retourner à la ligne lorsqu'il dépasse la largeur allouée */
}

#chatbox .user,
#chatbox .date-and-time {
  /* Influence les pseudo et la date/heure dans les messages de la chatbox */
  white-space: nowrap;
  /* Force le texte à rester sur une seule ligne */
  color: #ffe67e;
  /* Influence la couleur de la date/heure et des pseudo sans couleur */
}

#chatbox::-webkit-scrollbar {
  /* Influence la scrollbar de la chatbox */
  width: 5px;
}

#chatbox::-webkit-scrollbar-track-piece {
  /* Influence le fond de la scrollbar de la chatbox */
  background: rgb(255, 155, 0);
}

#chatbox::-webkit-scrollbar-thumb {
  /* Influence la partie "mouvante" de la scrollbar de la chatbox */
  background-color: rgb(39, 9, 56);
}

label[title="Gras"] {
  /* Influence l'image du bouton "gras", ici nous permet l'ajout d'une image différente */
  background-image: url(http://image.noelshack.com/fichiers/2014/43/1414340785-b-gras-cb.png)!important;
  font-size: 0;
}

label[title="Ital."] {
  /* Influence l'image du bouton "italique", ici nous permet l'ajout d'une image différente */
  background-image: url(http://image.noelshack.com/fichiers/2014/43/1414340785-i-italique-cb.png)!important;
  font-size: 0;
}

label[title="Soulig."] {
  /* Influence l'image du bouton "souligné", ici nous permet l'ajout d'une image différente */
  background-image: url(http://image.noelshack.com/fichiers/2014/43/1414340785-u-souligne-cb.png)!important;
  font-size: 0;
}

label[title="Barré"] {
  /* Influence l'image du bouton "barré", ici nous permet l'ajout d'une image différente */
  background-image: url(http://image.noelshack.com/fichiers/2014/43/1414340785-s-barre-cb.png)!important;
  font-size: 0;
}

div#divcolor {
  /* Influence la première image du bouton "couleur", ici nous permet l'ajout d'une image différente */
  position: relative;
  background-image: url(http://image.noelshack.com/fichiers/2014/43/1414340785-a-couleur-cb.png);
  font-size: 0;
  height: 18px;
}

#divcolor-preview {
  /* Influence sur la prévisualisation de la couleur de votre texte sur la chatbox */
  position: absolute;
  bottom: 2px;
  width: 96%;
}

#divsmilies img:first-child {
  /* Influence la première image du bouton "smilies" , ici nous permet l'ajout d'une image différente */
  content: url(http://image.noelshack.com/fichiers/2014/43/1414339034-smiley-cb.png);
}

.chatbox-title a,
.chatbox .cattitle {
  /* Influence le nom de la chatbox, ici nous permet l'ajout d'une image à la place */
  content: url(http://image.noelshack.com/fichiers/2014/43/1414341163-manoir-cb.png);
  margin-top: -5px;
}

.chatbox:before {
  /* Influence le contenu "précédent" la chatbox, ici nous permet l'ajout d'une image qu'on placera sur la barre en haut */
  content: url(http://image.noelshack.com/fichiers/2014/43/1414342736-texte-cb.png);
  position: absolute;
  left: 50%;
  margin-left: -150px;
}

#chatbox_main_options {
  /* Influence tous les boutons de la barre en haut à droite, ici nous permet de la place au dessus de l'image affiché précédement et de lui donner une couleur de fond de manière à ce qu'ils soient toujours visible même quand l'écran est petit */
  position: absolute;
  z-index: 1;
  width: 400px;
  right: 0;
  font-size: 11px;
  margin: .7em .5em .5em;
}

#chatbox_footer:after {
  /* Influence la partie "suivante" de la barre en bas de la chatbox, ici nous permet l'ajout d'une image qu'on placera en bas à droite */
  content: url(http://image.noelshack.com/fichiers/2014/44/1414438889-trick-of-treat-cb.png);
  position: absolute;
  top: 5px;
  left: 30px;
}

#chatbox_option_co,
#chatbox_option_disco {
  /* Influence sur le bouton "connexion" et "déconnexion" */
  font-size: 0;
}

#chatbox_option_co:before {
  /* Influence le contenu "précédent" le bouton "connexion", ici nous permet l'ajout d'un texte différent */
  font-size: 11px;
  content: "Entrer dans le manoir";
}

#chatbox_option_disco:before {
  /* Influence le contenu "précédent" le bouton "déconnexion", ici nous permet l'ajout d'un texte différent */
  font-size: 11px;
  content: "Sortir du manoir";
}

.chatbox table,
.chatbox td {
  /* Permet de retirer la couleur de fond et la bordure des tableaux sous PHPBB2 */
  background: none;
  border: none;
}

.chatbox a {
  /* Retire le soulignement des liens de la chatbox, inutile si vous avez déjà sur la totalité du forum */
  text-decoration: none!important;
}

.forumline + table td[align="right"] img[style^="cursor"] {
  position: relative;
  top: -23px;
  right: 3px;
}


Il y a matière à faire autour de la Chatbox, mais après je n'ai pas cherché à pousser les choses comme personnaliser ce qui entoure le texte, ou autre, je reste dans le basique pour le premier LS. A vous de faire la suite, vous avez tout ce qu'il vous faut entre les mains pour la rendre propre à votre forum :)

Enlever / déplacer les petits liens moches du forum - Jeu 8 Jan 2015 - 20:49



Enlever / déplacer les petits liens moches
Templates - difficulté moyenne - PHPBB2


Quand on parle des petits liens moches, on parles de ces liens :
-Dernière visite le...
-La date/heure actuelle est ...
-Le nom du forum en tout petit
-Voir les nouveaux messages depuis votre dernière visite
-Voir ses messages
-Voir les messages sans réponses

Puis, juste au-dessus du QEEL:
-Sujets actifs du jour
-Top 20 des posteurs du jour
-Top 20 des posteurs du forum
-Supprimer les cookies du forum

Bref, tous ça, ainsi que ceux d'en bas :
Spoiler:


On va donc les enlever, ou les déplacer, à votre guise (=


Index_body
Donc là, on s'attaque au petit tas de liens du bas !

Rendez vous dans le template index_body ( Affichage > templates > général )

Et supprimez ceci, qui devrait se trouver des lignes 84 à 107 si vous n'avez encore rien modifié:
Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>



Index_box

Et maintenant, on s'occupe de ceux du haut Very Happy

Donc dans le template index_box, lignes 1 à 17, supprimez ceci:
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>


Et là en principe, plus de petits liens casse-pieds...

Oui, sauf qu'il y en avait quand même des utiles !

Comment les déplacer ?

C'est là que ça devient compliqué ! Donc voilà la liste des liens que vous pouvez souhaiter remettre... Personnellement j'ai viré le titre du forum, le "dernière visite le" et j'ai mis les liens restants dans un onglet de mon QEEL nommé "options"


Code:
-Dernière visite le...                          <span class="gensmall">{LAST_VISIT_DATE}<br />
-La date/heure actuelle est ...          {CURRENT_TIME}<br /> 
-Le nom du forum en tout petit        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
-Voir les nouveaux messages depuis votre dernière visite  <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
-Voir ses messages                          <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
-Voir les messages sans réponses    <a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a><br />

puis, juste au-dessus du QEEL:

-Sujets actifs du jour                    <a href="{U_TODAY_ACTIVE}" >{L_TODAY_ACTIVE}</a><br />
-Top 20 des posteurs du jour        <a href="{U_TODAY_POSTERS}" >{L_TODAY_POSTERS}</a><br />
-Top 20 des posteurs du forum    <a href="{U_OVERALL_POSTERS}" >{L_OVERALL_POSTERS}</a><br />
-Supprimer les cookies du forum  <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a><br />


Voilà, donc les petits < br / > à la fin des lignes, c'est l'équivalent d'un retour à la ligne, donc sur le dernier lien que vous mettez, vous pouvez l'enlever !

Bon ensuite, ça dépend ce que vous voulez faire de ce petit tas de liens, mais on peut déjà le mettre dans une div !
Ca donnerait ça :
Code:

<div>
<a href="{U_TODAY_ACTIVE}" >{L_TODAY_ACTIVE}</a><br />
<a href="{U_TODAY_POSTERS}" >{L_TODAY_POSTERS}</a><br />
(etc...)
<a href="{U_OVERALL_POSTERS}" >{L_OVERALL_POSTERS}</a>
</div>


A vous de l'utiliser comme vous voulez (=


Ce serait sympa de poster un petit crédit à N-U quelque part sur votre forum !
cheers

[Invision & PHPBB2] Coder un cadre autour du forum en images - Ven 2 Jan 2015 - 12:58



[Invision & PHPBB2] Coder un cadre autour du forum en images



Je comprends rien à ton titre...

Oui, le titre n'est pas le plus clair du monde, mais grâce à la gentillesse extrême de Gravity et Hismé, laissez-moi vous expliquer ce dont je veux parler! Ou plutôt même: vous montrer. En effet, voici donc ce que je vais vous apprendre à faire. Imaginez que Gravity vous fasse une superbe maquette comme pour la commande de Hismé pour Heiwa et que GASP! Mais il y a un cadre autour du forum! Voyez seulement:
Tag phpbb2 sur Never Utopia - graphisme, codage et game design - Page 2 1413738489-maquette1

Et là, vous vous demandez comment vous allez faire, parce qu'il y a un haut, un bas, et surtout, un motif de pierres qui doit se répéter... et si le motif ne se répète pas à la bonne hauteur, vous faite comment? Et là il faut toucher aux templates et tout ça, et ça va pa bien s'adapter à l'écran des gens avec une taille fixe, et ça va pas le faire et... FAUX!
En réalité, c'est très facile.

Bref, c'est peut-être un peu difficile de voir comment faire, c'est pourquoi j'écris... ce tuto! YOUPI! =D

Cependant, je vous conseille de lire le tuto sur les sélecteurs de Manumanu qui vous sera utile, vu que nous utilisons des :before et :after. Sinon, tout le reste sera expliqué.


Pour le PHPBB2


On commence tout de suite avec la plateforme la plus utilisée: le PHPBB2. Vous verrez, c'est aussi la plus "simple" des deux Wink

Le HTML


Il n'y a pas de HTML à faire. Vraiment, rien, nada. C'est pour ça que c'est si facile! Cependant, il y a quelques trucs que vous pouvez faire, simplement pour vous faciliter la vie par la suite. La plupart de ces choses n'ont même pas besoin de toucher du HTML.

La première: mettre une image transparente dans Affichage -> Images et Couleurs -> Gestion des images -> Mode Avancé -> Logo du forum. Peu importe sa taille, suffit qu'elle soit transparente, vu que la taille est modifiable dans le CSS Wink

La seconde: Centre le logo et la barre de navigation en allant dans Affichage -> Page d'accueil -> En-tête & Navigation et cocher "Centré" à Position du logo ET Position du menu.

Mettez également la bonne couleur de fond à votre forum, la même que celle qui sera autour de votre cadre, optimalement.

Maintenant, une autre chose que vous pouvez faire pour retirer des break intempestif, c'est de toucher aux templates.
Là vous allez sous Affichage -> Templates -> Général -> overall_header et vous suprimez ce petit bout de code:
Code:
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>


À la limite, vous pouvez également simplement supprimer les balises br dans ce code, mais si de toute façon vous ne voulez pas afficher la description et le nom du forum, autant les retirer complètement Wink


Le CSS


Là c'est le plus long! Évidemment, vous devez avoir les images à disposition pour le haut, le bas et le centre qui se répète.

Mais d'abord, commençons par le commencement. Première ligne du CSS:
Code:
/* Pour l'adaptivité du design par rapport à l'écran. */
.bodylinewidth {
  width: 100%;
}


Comme je l'ai écrit dans mon petit commentaire, cette ligne très simple permet de faire en sorte que l'intérieur du forum va s'adapter à la taille de l'écran, en prenant simplement toute la largeur du forum. Normalement, le bodylinewidth prend la largeur que vous lui avez indiqué dans Général -> Forum -> Configuration -> Largeur du forum (nombre ou %) :. Mais là, en gros, on lui dit de ne pas le rendre en compte.

Bon là, forcément, votre forum ressemble à plus grand chose, du coup on va redonner la largeur que l'on veut au forum en ajoutant ceci:
Code:
/* Permet que l'intérieur du corps de page soit plus petit que le cadre */
#page-body .three-col {
  margin: auto;
  width: 890px;
}

En gros, on redonne une taille "normale" à tout ce qui doit se trouver dans le cadre et on le centre.

Bon, tout ça c'est super, mais maintenant, il est temps de mettre en place la bannière et le forum. Voici donc le code très important:
Code:
/* Permettra de placer la bannière et le footer correctement. */
.bodyline {
  position: relative;
  z-index: 2;
  padding: 0px;
}

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:before {
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:after {
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
}


Expliquons donc ce code, parce que sinon, vous n'allez rien comprendre. (Enfin peut-être que si, mais avec explications c'est plus sympas x) )

Tout premièrement, on met en position: relative et un z-index plus haut ce sur quoi on applique le before et after. Cela va nous permettre après de le placer correctement (bien qu'on utilise pas d'absolute), surtout pour pouvoir faire passer le corps de page au-dessus du before et after sans trop de peine, notamment le logo.

Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire ne sorte que cela s'adapte à l'écran. Pas beaucoup de surprise non plus au niveau du height, qui est simplement la hauteur de l'image de votre haut, respectivement bas du cadre du forum. Ne prenez donc pas les valeur que j'ai mise mais mettez celle de vos images, sinon ça ne va évidemment pas marcher!

Vous vous dites probablement que le content: '' et le display block ne sont pas important. Mais c'est tout le contraire. Un :before u un :after ne s'affichera tout simplement pas s'il n'y a pas de "content: '' " et le display block nous permet de le faire agir comme un div. Sinon, encore une fois, impossible de le voir s'afficher ainsi. Ils sont donc très importants, et à garder!


Cependant, vous verrez tout de suite un problème, notamment par rapport à la partie du haut de votre cadre... eh bien le logo transparent n'est tout simplement pas dessus! Pas de panique, on va encore s'occuper de ça, mais d'abord, mettons en place le corps de page!

Code:
/* Le cadre du corps de page. */
#page-body {
  margin: auto;
  width: 100%;
  background-image: url('http://img110.xooimage.com/files/6/3/e/bg2-4875f11.jpg');
  background-repeat: repeat-y;
  background-position: center;
}


Vous voyez donc que l'on change d'élément sur lequel on applique, mais en gros, on entoure le corps, on met un width: 100%; (pour s'adapter à toute largeur d'écran), et on fait se répéter le background seulement sur l'axe des y (donc verticalement). Maintenant, votre forum ressemble déjà un peu plus à l'encadrement que vous devriez avoir! Cependant, bien sûr, la bannière est encore au-dessus du logo, et le bas de votre forum ne touche pas le milieu. Embêtant, mais facilement corrigeable à l'aide des margin!

Cependant, avant de nous amuser avec les margin, changeons la taille du logo pour qu'il ait la bonne hauteur et largeur (toute la hauteur de la bannière donc).

Chez moi, ça donne ça:
Code:
/* Taille du logo "fictif" pour rendre la bannière clickable */
#i_logo {
  height: 933px;
}


Bien sûr, chez vous la taille peut être différente.

Il faut le faire avant de jouer avec les margin, car la hauteur du logo détermine aussi la taille de la margin: plus le logo est grand, plus le margin le sera aussi.


Reprenons donc le code que nous avions avant, et ajoutons-y des margin (les miennes sont tout à la fin de chacun des deux bouts de code):
Code:

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:before {
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: -955px;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:after {
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
  margin-top: -46px;
}


Mettez toujours les margin-top, margin-bottom, margin-left ou margin-right après les margin: tout court. En effet, sinon, votre margin-top/bottom/left/right ne sera pas prit en compte!


Ert voilà, votre forum est dans un joli cadre! =D

Cependant, si vous n'avez pas retiré la couleur du cadre de bodyline, vous remarquerez que le cadre n'arrive pas vraiment jusqu'au bout de votre page de navigateur... C'est normal, parce que le body a une marge, et le bodyline a un cadre!

On peut donc retirer tout ça en mettant ceci dans le CSS:
Code:
body {
  margin: 0px;
}

.bodyline {
  border: 0px solid;
}



Le Javascript


Bon c'est bien beau tout ça, vous avez un joli cadre et tout, mais... Le centre ne se répète pas correctement!

Et si par malheur vous n'avez pas la bonne taille à l'intérieur du cadre, eh bien ça peut mal se répéter et mal "fusionner" avec le footer, et vous donner un truc comme ça:
Tag phpbb2 sur Never Utopia - graphisme, codage et game design - Page 2 1420199588-untitled
Pas génial hein?

Eh bien avec ce script, ce n'est plus un problème!

Allez sous Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript,nommez-le quelque chose comme "Multiplication en taille du page-body" cochez sur toutes les pages.

Puis vous y mettez:
Code:
$(function() {
    $div = $('#page-body');
    var remainder = $div.height() % 201;
    var newHeight = $div.height() + (201-remainder);
    $div.css('height', newHeight);
});

Ici, le 201 correspond à la hauteur de mon image qui se répète au centre. Donc, si votre image ne fait que 100px, replacez le 201 par 100!


En gros, voilà ce que ce code dit, ligne par ligne.
- Prendre la div du nom de page-body.
- Calculer ce qui reste de la division entre la hauteur de ce div et 201 (qui est la hauteur de mon image de répétition).
- Ensuite, créer une nouvelle hauteur en prenant la hauteur actuelle de page-body, et en y ajoutant la différence entre 201 et le reste que je viens de calculer.
- Appliquer cette nouvelle hauteur à page-body.

Et tadaaa! ça se répète tout bien! =D

Et voilà qui est fait et tout simple pour PHPBB2!



Pour Invision


Invision est une des plateformes que j'utilise personnellement le plus, parce qu'il n'y a pas vraiment de tableaux. Du coup c'est la deuxième version que je vais vous montrer, et je ne vais pas vous montrer pour les autres versions. Désolée!

Le HTML


Ici, c'est légèrement plus difficile que pour le PHPBB2, car il y a deux templates sur lesquels on va devoir modifier quelque chose. En réalité, on ajoute une seule et même div, cependant, vu que la div s'ouvre sur overall_header, il faut la fermer sur overall_footer_begin !

Cherchez dans votre template overall_header ceci:
Code:
</div>
<div id="submenu">


Il vous suffit alors d'ouvrir une div entre deux en lui donnant une class, comme par exemple:
Code:
</div>
<div id="contour_forum">
   <div id="submenu">


Maintenant, dans overall_footer_begin, tout à la fin du template, vous avez ceci:
Code:
</div>
<!-- END html_validation -->


Rajoutez-y simplement une div fermante, comme ceci:
Code:
</div>
</div>
<!-- END html_validation -->


Et voilà qui est terminé pour la partie compliquée!

Pour la partie simple, nous avons pareil pour que le PHPBB2, donc je vous le remets ici:

La première: mettre une image transparente dans Affichage -> Images et Couleurs -> Gestion des images -> Mode Avancé -> Logo du forum. Peu importe sa taille, suffit qu'elle soit transparente, vu que la taille est modifiable dans le CSS Wink

La seconde: Centre le logo et la barre de navigation en allant dans Affichage -> Page d'accueil -> En-tête & Navigation et cocher "Centré" à Position du logo ET Position du menu.

Mettez également la bonne couleur de fond à votre forum, la même que celle qui sera autour de votre cadre, optimalement.

Maintenant, une autre chose que vous pouvez faire pour retirer des break intempestif, c'est de toucher aux templates. Je vous laisse jouer avec Razz


Le CSS


Plus compliqué tout de même que le HTML, le code reste cependant assez simple et similaire à sa version du PHPBB2, à quelque changements près!

Commençons tout de suite par mettre les images de bannière et de footer du forum:
Code:
/* Permettra de placer la bannière et le footer correctement. */
.container_IE {
  position: relative;
  z-index: 2;
  padding: 0px;
  background-color: #A5C9E9;
}

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:before {
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:after {
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
}


Expliquons donc ce code, parce que sinon, vous n'allez rien comprendre. (Enfin peut-être que si, mais avec explications c'est plus sympas x) )

Tout premièrement, on met en position: relative et un z-index plus haut ce sur quoi on applique le before et after. Cela va nous permettre après de le placer correctement (bien qu'on utilise pas d'absolute), surtout pour pouvoir faire passer le corps de page au-dessus du before et after sans trop de peine, notamment le logo.

Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire en sorte que cela s'adapte à l'écran. Pas beaucoup de surprise non plus au niveau du height, qui est simplement la hauteur de l'image de votre haut, respectivement bas du cadre du forum. Ne prenez donc pas les valeur que j'ai mise mais mettez celle de vos images, sinon ça ne va évidemment pas marcher!

Vous vous dites probablement que le content: '' et le display block ne sont pas important. Mais c'est tout le contraire. Un :before u un :after ne s'affichera tout simplement pas s'il n'y a pas de "content: '' " et le display block nous permet de le faire agir comme un div. Sinon, encore une fois, impossible de le voir s'afficher ainsi. Ils sont donc très importants, et à garder!


Cependant, vous verrez tout de suite un problème, notamment par rapport à la partie du haut de votre cadre... eh bien le logo transparent a un fond, tout d'abord, et il ne se met pas au-dessus de l'image de bannière!

On va donc tout de suite régler notre premier problème:
Code:
/* On met la bannière é la bonne largeur et au bon endroit */
#logostrip {
  max-width: 797px;
  margin: auto;
  height: 568px;
  background: none !important;
}

#logostrip img {
  width: 797px;
  height: 600px;
}

div#logostrip #logo {
  margin: 0px;
}


Expliquons rapidement son code. Sur Invision, le logo est dans deux div: #logostrip et #logo. #logo a une marge qui est mise automatiquement, une marge que je retire dans le CSS, et #logostrip doit être mit au centre (avec margin-auto). Je mets aussi une largeur et une hauteur à notre image du logo (pour qu'elle prenne toute la hauteur de la bannière et une bonne largeur. Et enfin, je retire la couleur de fond à notre logo, avec le background:none!

Maintenant, occupons-nous du corps du forum!
Code:
/* Mettre le fond au reste */
#ipbwrapper {
  margin: auto;
  width: 100%;
  padding: 0px;
}

/* On met le centre en place */
#contour_forum {
  width: 100%;
  background-image: url('http://img110.xooimage.com/files/6/3/e/bg2-4875f11.jpg');
  background-repeat: repeat-y;
  background-position: center;
  margin-top: 100px;
}


Ici c'est simple, on met un width: 100% à ipbwrapper pour qu'il s'adapte à la taille de l'écran et on retire tout padding, ensuite, on utilise la div qu'on a créée pour mettre l'image de fond qui se répète verticalement, en mettant un width de 100% pour qu'elle s'adapte à toute taille d'écran.

Maintenant, vraiment, on n'a plus qu'un seul problème: tout ce qui est à l'intérieur prend toute la largeur... vraiment pas pratique, et pas franchement ce qu'on veut!

Du coup, une seule solution: mettre une largeur max à tout ce qu'il y a à l'intérieur et un joli margin: auto pour que ça se centre:
Code:
/* On force le reste à être plus petit et rentrer dans le cadre. */
#submenu, #userlinks, #clearfix, #gfooter, p.center, #emptyidcc {
  position: relative;
  max-width: 790px;
  margin: auto;
  left: 3px;
}


Le left: 3px est mit parce qu'en réalité, sur Invision, tout est un tout petit peu décalé. Rien de bien grave donc, qui ne peut être corrigé avec un petit position: relative!

Et à présent, vient donc le moment de retirer tout trou béant entre le header et notre corps,ou le footer et notre corps. Dans mon cas, le footer est déjà collé au corps, donc je n'y touche pas (mais vous pourriez simplement ajouter un margintop négatif à .container_IE:after ), alors il me suffit de changer le .container_IE:before.

Cela donne donc ceci :
Code:
/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:before {
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  margin-bottom: -711px;
}


Et voilà le CSS qui est terminé!


Le Javascript


Le Javascript pour Invision est le même que celui de PHPBB2 à un détail près: il s'applique sur #contour_forum ! Du coup, je copie-colle juste ce qu'il y a plus haut en changeant ce détail (parce que j'ai la flemme =P)

Bon c'est bien beau tout ça, vous avez un joli cadre et tout, mais... Le centre ne se répète pas correctement! Et si par malheur vous n'avez pas la bonne taille à l'intérieur du cadre, eh bien ça peut mal se répéter et mal "fusionner" avec le footer, et vous donner un truc comme ça:
Tag phpbb2 sur Never Utopia - graphisme, codage et game design - Page 2 1420199588-untitled
Pas génial hein?

Eh bien avec ce script, ce n'est plus un problème!

Allez sous Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript, nommez-le quelque chose comme "Multiplication en taille du contour_forum " cochez sur toutes les pages.

Puis vous y mettez:
Code:
$(function() {
    $div = $('#contour_forum');
    var remainder = $div.height() % 201;
    var newHeight = $div.height() + (201-remainder);
    $div.css('height', newHeight);
});

Ici, le 201 correspond à la hauteur de mon image qui se répète au centre. Donc, si votre image ne fait que 100px, replacez le 201 par 100!


En gros, voilà ce que ce code dit, ligne par ligne.
- Prendre la div du nom de contour_forum.
- Calculer ce qui reste de la division entre la hauteur de ce div et 201 (qui est la hauteur de mon image de répétition).
- Ensuite, créer une nouvelle hauteur en prenant la hauteur actuelle de contour_forum, et en y ajoutant la différence entre 201 et le reste que je viens de calculer.
- Appliquer cette nouvelle hauteur à contour_forum.

Et tadaaa! ça se répète tout bien! =D

Et voilà qui sonne la fin de ce tuto! ^w^

Lien "dernier sujet" pointant vers le dernier message - Mar 23 Déc 2014 - 0:14


Hello hello,

Un petit libre service très rapide pour les forums en phpbb2 permettant de remplacer le lien "dernier sujet" par le vrai lien "dernier message" dans l'affichage des catégories.

Explication


Je m'explique, si on clique ici sur le titre du dernier message, on arrive au tout début du topic :


Par contre, si je clique sur le bouton "Dernier message", j'arrive directement au bon endroit et à la bonne page, car le lien n'est pas le même :


Ce petit code permet de remplacer le lien du titre pour qu'il ne mène pas au début du sujet, mais bien directement au dernier message.

Le code


Le code javascript est à rajouter ici : PA > Modules > Gestion des codes Javascript.

  1. Vérifier que le javascript est bien activé (Activer la gestion des codes Javascript : Oui)
  2. Créer un nouveau javascript avec un nom explicite et en cochant "Sur l'index" et "Sur les sous-forums"
  3. Mettre le code et découvrir avec un réel plaisir que ça fonctionne. Votre vie est transformée. :toto:


Code:
/*
 * --------------------------------------
 * Remplacement des liens "Dernier sujet"
 * LIBRE SERVICE TROUVÉ SUR NEVER UTOPIA
 * --------------------------------------
 */
$(function(){
    $('.last-post-icon').each(function(){
        var link = $(this).attr('href');
        $(this).closest('span').find('a').eq(0).attr('href', link);
    });
});


Pensez à bien activer le titre du dernier sujet Wink
PA > Affichage > Page d'accueil > Structure et hiérarchie > "Oui" pour "Afficher le titre du sujet du dernier message d'un forum sur l'index".

En cas de problème, il y a une partie "Un problème en codage" qui est là pour ça.

Nihil Scar Winspeare

Catégories simples phpbb2 - Lun 22 Déc 2014 - 16:26



Hello hello,

Mon premier LS sur Never Utopia :toto:

Un petit libre service de catégories créé à la demande de d'elsa2607 qui a réalisé le schéma ainsi que le choix des couleurs.

Informations

Rendu visuel :

Tag phpbb2 sur Never Utopia - graphisme, codage et game design - Page 2 JvhlrDX

  • Pour avoir la bonne structure :
    PA > Affichage > Page d'accueil > Structure et hiérarchie et choisir "Séparer les catégories sur l'index" ainsi que le niveau de compression de l'index "Moyen".

  • Largeur des catégories : 900px.

  • Les images à droites sont les new / no new / lock. Les dimensions maximales sont de 90px pour la largeur et 150px pour la hauteur.
    PA > Affichage > Images > Avancé > Icônes du forum.

  • Il faut activer l'affichage des sous forums
    PA > Affichage > Page d'accueil > Structure et hiérarchie > Lien vers les niveaux inférieurs (oui ou bien "avec une image).
    (Si "avec une image", elle se change ici : PA > Affichage > Images > Avancé > Mini icones).


  • Pour régler le dernier message affiché :
    PA > Affichage > Page d'accueil > Structure et hiérarchie.
    • cocher Oui pour Afficher le titre du sujet du dernier message d'un forum sur l'index.
    • Pour la longueur, mettre environ 15 à Longueur du titre du sujet affiché.


Merci de penser à mettre quelque part un crédit et un lien vers Never Utopia.


Les codes

Les codes ne sont pas sous hide, vous pouvez les tester directement.
Mais si vous le souhaitez, vous pouvez toujours dire merci, personne ne vous mangera.
Et ça fait toujours plaisir (◕‿◕✿)

L'ensemble du template index_box à remplacer :
Compte fondateur : PA > Affichage > Templates > Général ( + vérifier que "Forcer les templates par défaut" est bien coché à "Non")

Spoiler:


Le CSS
PA > Affichage > Couleurs > Feuille de style CSS

Spoiler:


En cas de problème ou de difficulté à personnaliser, il y a une partie "Un problème en codage" qui est là pour ça.


Ajout

Petit ajout personnel, si vous souhaitez avoir le texte indiquant qu'il n'y a pas encore de message dans un forum :

Rendu visuel :
Tag phpbb2 sur Never Utopia - graphisme, codage et game design - Page 2 DJ2bnUO

Le CSS à rajouter :
CSS à rajouter:

NyoTheNeko

Forums en images de fond - Jeu 18 Déc 2014 - 10:18



Forums en images de fond



Ceci est un code de mise en forme des forums, idée survenue suite à la Demande d'Ayfoth et tiré d'un schéma qui trainait sur mon bureau x)

Pour PHPBB2 & Invision ▬ CSS3 & HTML5 ▬ Ce que ça donne en PHPBB2Ce que ça donne sous Invision


Les effets et images


L'image de fond est en 400 pixels de largeur et 250 pixels de hauteur.
Votre forum doit faire 850px de largeur.

Au passage de la souris, les "sous-titre" disparait, et la description vient en slidant depuis le côté droit. Aparaissent alors les sous-froums avec la description, ainsi que le denrier message en-dessous.
Notez qu'optimalement, vous avez un nombre paire de sous-forums. Avec un nombre impair, vous risquez d'avoir quelques soucis d'alignements ^^"

Les deux polices utilisées sont Amatic SC et Courgette. Vous retrouverez leurs link dans le template, comme ceci:
Code:
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
                  <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
. Vous pouvez les changer/retirer, mais pensez alors à retirer ou changer chacune de leurs apparitions dans le CSS (sous la forme de font-family: 'Amatic SC' et font-family: 'Courgette' )!

PHPBB2: Le code


Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\ Attention!: C'est le template en entier! /!\ :
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>
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
                  <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
                    <tr>
      {catrow.tablehead.L_FORUM} 
   </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 class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
          <div class="un_forum">
                    <div class="un_titre">
                      <h{catrow.forumrow.LEVEL} class="hierarchy">
                        <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                          {catrow.forumrow.FORUM_NAME}
                        </a>
                      </h{catrow.forumrow.LEVEL}>
    </div>
                    <div class="image_messages">
                      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </div>
                    <div class="description">
                      {catrow.forumrow.FORUM_DESC}
                      <span class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                    </div>
                    <div class="dernier_message">
                      <span class="mess_et_sujets">
                        {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                      </span>
                      <span id="last" class="liens_mess">
                        <!-- BEGIN switch_topic_title -->
                        <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
                          {catrow.forumrow.LATEST_TOPIC_NAME}
                        </a>
                        <!-- END switch_topic_title -->
                        {catrow.forumrow.USER_LAST_POST}
                      </span>
                              <script type="text/javascript">jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');</script>
                    </div>
                  </div>
      </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Le code a mettre dans les descriptions des catégories:
Code:
<img class="img_forum" src="http://i.imgur.com/3tu5jih.jpg" />
<div class="sous_titre">
  Sous-titre 
</div>
<div class="contour_desciption">
 <p>
      Description du forum   
 </p>
</div>


Le CSS:
Code:
/********** DÉBUT FORUMS **********/
        /* Retire le bord du forumline */   
        .forumline {
          border: 0px solid;
        }

        /* Retire le padding du bodyline */   
        .bodyline {
          padding: 0px;
        }

        /* Met une marge à droite pour chaque catégories impaire (1, 3, 5, ...) */
        .un_forum:nth-child(odd) {
          margin-right: 25px;
        }

        /* Met une marge en bas aux deux derniers forums por qu'ils ne soient pas collés à la catéories suivante. */
        .un_forum:last-child, .un_forum:nth-last-child(2) {
          margin-bottom: 20px;
        }

        /* Mise en place d'un forum: taille, qu'il se mette à la suite, etc */
        .un_forum {
          /* Ne pas toucher */
          position: relative;
          display: inline-block;
          vetical-align: top;
          /* Largeur puis hauteur */
          width: 400px;
          height: 250px;
          /* Marge du haut */
          margin-top: 20px;
          /* Empêche que ce qui dépasse soit vu: ne pas toucher. */
          overflow: hidden;
          /* Applique un bord, puis une ombre */
          border: 3px solid white;
          border-radius: 5px;
          box-shadow: 0 1px 4px grey;
        }

        /* Mise en forme du titre de forum */
        .un_titre {
          position: relative;
          /* Largeur: prend toute la largeur, puis hauteur */
          width: auto;
          height: 40px;
          /* Dot être de la même taille que "height": centre le texte */
          line-height: 40px;
          padding: 10px;
          /* Taille de la police */
          font-size: 30px;
          overflow: hidden;
        }

        /* Met la police au titre de forum */
        .un_titre h3, .un_titre h2 {
          font-family: 'Amatic SC';
        }

        .un_titre .hierarchy {
          font-size: 30px;
        }

        /* Couleur du titre forum et effet au passage de la souris */
        .un_titre a, .un_titre a:link, .un_titre a:active, .un_titre a:visited {
          color:black;
          text-decoration: none !important;
          text-shadow: 1px 1px 5px white;
          letter-spacing: 5px;
          transition: all ease 1s;
        }

        /* Effet du titre au passage de la souris */
        .un_titre a:hover {
          color: white;
          text-decoration: none !important;
          text-shadow: 1px 1px 5px black;
          letter-spacing: 2px;
          transition: all ease 1s;
        }

        /* On met tout le reste en position absolue */
        .image_messages, .img_forum, .sous_titre, .dernier_message {
          position: absolute;
        }

        /* On place l'image au-dessus de tout */
        .img_forum{
          top: 0;
          left: 0;
          z-index: 1;
        }

        /*On place out le reste au-dessus */
        .un_titre, .image_messages, .sous_titre, .dernier_message, .sous_forums {
          z-index: 2;
        }

        /* On place l'image de new/nonew/etc en haut à droite */
        .image_messages {
          top: 0;
          right: 0;
        }

        /* Mise en forme du sous-titre du forum qui se trouve dans la description */
        .un_forum .sous_titre {
          /* Placement */
          top: 65px;
          left: 20px;
          padding: 5px 10px;
          /* Couleur de fond puis de texte */
          background: rgba(0, 0, 0, 0.8);
          color: white;
          /* Police, taille et mise en gras */
          font-family: 'Courgette';
          font-size: 15px;
          font-weight: bold;
          /* Largeur maximale du titre = la moitié de la taille - le padding */
          max-width: 180px;
          /* Visible si la souris n'est pas dessus */
          opacity: 1;
          transition: all ease 1s;
        }

        /* Effet sur le sous-titrE: il devient invisible au passage de la souris: */
        .un_forum:hover .sous_titre {
          opacity: 0;
          transition: all ease 1s;
        }

        /* Mise en forme de la description du sous-forums */
        .un_forum .description .contour_desciption {
          overflow: visible;
          position: relative;
          /* Taille. Width: il prend toute la largeur. */
          width: auto;
          height: 100px;
          padding: 10px;
          /* Couleur de fond */
          background: rgba(0, 0, 0, 0.8);
          /* Police, puis taille de police, puis couleur du texte */
          font-family: 'Courgette';
          font-size: 13px;
          color: white;
          /* On le met au-dessus de tout le reste */
          z-index: 3;
          /* Alignement du texte */
          text-align: justify;
          /* Effet de disparition */
          -webkit-transform: translateX(400px);
          transform: translateX(400px);
          transition: all ease 0.8s;
        }

        /* Effet d'apparition de la description du forum */
        .un_forum:hover .description .contour_desciption {
          -webkit-transform: translateX(0px);
          transform: translateX(0px);
          transition: all ease 0.8s;
        }

        /* Mise en forme du texte de description */
        .description .contour_desciption p {
          /* Fait apparaitre une barre de défilement */
          overflow: auto;
          position: relative;
          /* Prend toute la largeur et donne une certaine hauteur (= 80px à cause du padding) */
          width: auto;
          height: 60px;
          padding: 10px;
          text-align: justify;
          font-family: 'Courgette';
          font-size: 13px;
          color: white;
        }

        /* Mise en forme des liens vers les sous-froums */
        .un_forum .sous_forums {
          /* Placement */
          position: relative;
          top: -42px;
          /* Prennent toute la largeur et font 40 px de haut */
          width: auto;
          height: 20px;
          padding: 10px;
          /* PAr-dessus tout le reste */
          z-index: 3;
          /* S'il y en a trop une barre de défilement apparait */
          overflow: auto;
          /* N'apparaissent pas normalement */
          opacity: 0;
          transition: all ease 0.2s;
        }

        /* Effet d'apparition des liens vers les sous-forums */
        .un_forum:hover .sous_forums {
          opacity: 1;
          transition: all 0.8s ease 0.5s;
        }

        /* Mise en forme des leins de sous-forums */
        .sous_forums a, .sous_forums a:link, .sous_forums a:active, .sous_forums a:visited  {
          /* Taille, police, puis couleur */
          font-size: 15px;
          font-family: 'Amatic SC';
          color: white;
          /* On retire le sous-lignement */
          text-decoration: none !important;
          /* Effet sur le texte. */
          letter-spacing: 3px;
          transition: all ease 1s;
        }

        /* Effet sur les liens de sous-forums au passage de la souris */
        .sous_forums a:hover  {
          text-decoration: none !important;
          letter-spacing: 1px;
          transition: all ease 1s;
        }

        /* Mise en forme du dernier message */
        .un_forum .dernier_message {
          /* Poistionnement */
          bottom: 10px;
          /* Taille */
          width: 380px;
          height: 40px;
          /* S'il est trop long une barre de défilement apparait */
          overflow: auto;
          padding: 5px 10px;
          /* Mise en forme du texte: police, taille, couleur, ombre du texte */
          font-family: 'Courgette';
          font-size: 15px;
          color: white;
          text-shadow: 1px 1px 5px black;
          /* Effet de disparition */
          opacity: 0;
          transition: all ease 1s;
        }

        /* Effet d'apparition du denrier message */
        .un_forum:hover .dernier_message {
          opacity: 1;
          transition: all ease 1s;
        }

        /* Mise en forme du texte "message et sujets" */
        .dernier_message .mess_et_sujets {
          display: block;
          margin-bottom: 5px;
        }

        /* Mise en forme de la date du dernier message: taille */
        .dernier_message .liens_mess {
          font-size: 8px;
        }

        /* Mise en forme de tout le reste pour le dernier message: taille */
        .dernier_message .liens_mess a {
          font-size: 15px;
          text-decoration: none !important;
          color: white;
        }

/********** FIN FORUMS **********/


Invision: Le code


Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\ Attention!: C'est le template en entier! /!\ :
Code:
    <div class="pun-crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <p class="crumbs"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
    </div>
    <div class="main">
    <!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
    <div class="main-head">
    <div class="page-title">{catrow.tablehead.L_FORUM}</div>
    </div>
    <div class="main-content">
                      <link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
                      <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
    <!-- END tablehead -->

    <!-- BEGIN forumrow -->
                      <div class="un_forum">
                        <div class="un_titre">
                          <h{catrow.forumrow.LEVEL} class="hierarchy">
                            <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                              {catrow.forumrow.FORUM_NAME}
                            </a>
                          </h{catrow.forumrow.LEVEL}>
        </div>
                        <div class="image_messages">
                          <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                        </div>
                        <div class="description">
                          {catrow.forumrow.FORUM_DESC}
                          <span class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                        </div>
                        <div class="dernier_message">
                          <span class="mess_et_sujets">
                            {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                          </span>
                          <span id="last" class="liens_mess">
                            <!-- BEGIN switch_topic_title -->
                            <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
                              {catrow.forumrow.LATEST_TOPIC_NAME}
                            </a>
                            <!-- END switch_topic_title -->
                            {catrow.forumrow.USER_LAST_POST}
                          </span>
                                  <script type="text/javascript">jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');</script>
                        </div>
                      </div>
   
    <!-- END forumrow -->

    <!-- BEGIN tablefoot -->
                     
    </div>
    <!-- END tablefoot -->
    <!-- END catrow -->
    </div>

    <!-- BEGIN switch_on_index -->
    <div class="main-box clearfix">
    <ul>
    <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
    <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
    <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
    </ul>
    <!-- BEGIN switch_delete_cookies -->
    <p class="right">
    <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
    </p>
    <!-- END switch_delete_cookies -->
    </div>
    <!-- END switch_on_index -->


Le code a mettre dans les descriptions des catégories:
Code:
<img class="img_forum" src="http://i.imgur.com/3tu5jih.jpg" />
<div class="sous_titre">
  Sous-titre 
</div>
<div class="contour_desciption">
 <p>
      Description du forum   
 </p>
</div>


Le CSS:
Code:
/********** DÉBUT FORUMS **********/
        /* Retire le contour et la couleur de fond des catégories */
    .pun .main-content {
      border: 0px solid;
      background: none;
    }

    /* Met une marge à droite pour chaque catégories impaire (1, 3, 5, ...) */
    .un_forum:nth-child(odd) {
      margin-right: 37px;
    }

    /* Met une marge en bas aux deux derniers forums por qu'ils ne soient pas collés à la catéories suivante. */
    .un_forum:last-child, .un_forum:nth-last-child(2) {
      margin-bottom: 20px;
    }

    /* Mise en place d'un forum: taille, qu'il se mette à la suite, etc */
    .un_forum {
      /* Ne pas toucher */
      position: relative;
      display: inline-block;
      vetical-align: top;
      /* Largeur puis hauteur */
      width: 400px;
      height: 250px;
      /* Marge du haut */
      margin-top: 20px;
      /* Empêche que ce qui dépasse soit vu: ne pas toucher. */
      overflow: hidden;
      /* Applique un bord, puis une ombre */
      border: 3px solid white;
      border-radius: 5px;
      box-shadow: 0 1px 4px grey;
    }

    /* Mise en forme du titre de forum */
    .un_titre {
      position: relative;
      /* Largeur: prend toute la largeur, puis hauteur */
      width: auto;
      height: 40px;
      /* Dot être de la même taille que "height": centre le texte */
      line-height: 40px;
      padding: 10px;
      /* Taille de la police */
      font-size: 30px;
      overflow: hidden;
    }

    /* Met la police au titre de forum */
    .un_titre h3, .un_titre h2 {
      font-family: 'Amatic SC';
    }

    /* Couleur du titre forum et effet au passage de la souris */
    .un_titre a, .un_titre a:link, .un_titre a:active, .un_titre a:visited {
      color:black;
      text-decoration: none;
      text-shadow: 1px 1px 5px white;
      letter-spacing: 5px;
      transition: all ease 1s;
    }

    /* Effet du titre au passage de la souris */
    .un_titre a:hover {
      color: white;
      text-decoration: none;
      text-shadow: 1px 1px 5px black;
      letter-spacing: 2px;
      transition: all ease 1s;
    }

    /* On met tout le reste en position absolue */
    .image_messages, .img_forum, .sous_titre, .dernier_message {
      position: absolute;
    }

    /* On place l'image au-dessus de tout */
    .img_forum{
      top: 0;
      left: 0;
      z-index: 1;
    }

    /*On place out le reste au-dessus */
    .un_titre, .image_messages, .sous_titre, .dernier_message, .sous_forums {
      z-index: 2;
    }

    /* On place l'image de new/nonew/etc en haut à droite */
    .image_messages {
      top: 0;
      right: 0;
    }

    /* Mise en forme du sous-titre du forum qui se trouve dans la description */
    .un_forum .sous_titre {
      /* Placement */
      top: 65px;
      left: 20px;
      padding: 5px 10px;
      /* Couleur de fond puis de texte */
      background: rgba(0, 0, 0, 0.8);
      color: white;
      /* Police, taille et mise en gras */
      font-family: 'Courgette';
      font-size: 15px;
      font-weight: bold;
      /* Largeur maximale du titre = la moitié de la taille - le padding */
      max-width: 180px;
      /* Visible si la souris n'est pas dessus */
      opacity: 1;
      transition: all ease 1s;
    }

    /* Effet sur le sous-titrE: il devient invisible au passage de la souris: */
    .un_forum:hover .sous_titre {
      opacity: 0;
      transition: all ease 1s;
    }

    /* Mise en forme de la description du sous-forums */
    .un_forum .description .contour_desciption {
      overflow: visible;
      position: relative;
      /* Taille. Width: il prend toute la largeur. */
      width: auto;
      height: 100px;
      padding: 10px;
      /* Couleur de fond */
      background: rgba(0, 0, 0, 0.8);
      /* Police, puis taille de police, puis couleur du texte */
      font-family: 'Courgette';
      font-size: 13px;
      color: white;
      /* On le met au-dessus de tout le reste */
      z-index: 3;
      /* Alignement du texte */
      text-align: justify;
      /* Effet de disparition */
      -webkit-transform: translateX(400px);
      transform: translateX(400px);
      transition: all ease 0.8s;
    }

    /* Effet d'apparition de la description du forum */
    .un_forum:hover .description .contour_desciption {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
      transition: all ease 0.8s;
    }

    /* Mise en forme du texte de description */
    .description .contour_desciption p {
      /* Fait apparaitre une barre de défilement */
      overflow: auto;
      position: relative;
      /* Prend toute la largeur et donne une certaine hauteur (= 80px à cause du padding) */
      width: auto;
      height: 60px;
      padding: 10px;
      text-align: justify;
    }

    /* Mise en forme des liens vers les sous-froums */
    .un_forum .sous_forums {
      /* Placement */
      position: relative;
      top: -42px;
      /* Prennent toute la largeur et font 40 px de haut */
      width: auto;
      height: 20px;
      padding: 10px;
      /* PAr-dessus tout le reste */
      z-index: 3;
      /* S'il y en a trop une barre de défilement apparait */
      overflow: auto;
      /* N'apparaissent pas normalement */
      opacity: 0;
      transition: all ease 0.2s;
    }

    /* Effet d'apparition des liens vers les sous-forums */
    .un_forum:hover .sous_forums {
      opacity: 1;
      transition: all 0.8s ease 0.5s;
    }

    /* Mise en forme des leins de sous-forums */
    .sous_forums a, .sous_forums a:link, .sous_forums a:active, .sous_forums a:visited  {
      /* Taille, police, puis couleur */
      font-size: 15px;
      font-family: 'Amatic SC';
      color: white;
      /* On retire le sous-lignement */
      text-decoration: none;
      /* Effet sur le texte. */
      letter-spacing: 3px;
      transition: all ease 1s;
    }

    /* Effet sur les liens de sous-forums au passage de la souris */
    .sous_forums a:hover  {
      text-decoration: none;
      letter-spacing: 1px;
      transition: all ease 1s;
    }

    /* Mise en forme du dernier message */
    .un_forum .dernier_message {
      /* Poistionnement */
      bottom: 10px;
      /* Taille */
      width: 380px;
      height: 40px;
      /* S'il est trop long une barre de défilement apparait */
      overflow: auto;
      padding: 5px 10px;
      /* Mise en forme du texte: police, taille, couleur, ombre du texte */
      font-family: 'Courgette';
      font-size: 15px;
      color: white;
      text-shadow: 1px 1px 5px black;
      /* Effet de disparition */
      opacity: 0;
      transition: all ease 1s;
    }

    /* Effet d'apparition du denrier message */
    .un_forum:hover .dernier_message {
      opacity: 1;
      transition: all ease 1s;
    }

    /* Mise en forme du texte "message et sujets" */
    .dernier_message .mess_et_sujets {
      display: block;
      margin-bottom: 5px;
    }

    /* Mise en forme de la date du dernier message: taille */
    .dernier_message .liens_mess {
      font-size: 8px;
    }

    /* Mise en forme de tout le reste pour le dernier message: taille */
    .dernier_message .liens_mess a {
      font-size: 15px;
      text-decoration: none;
      color: white;
    }
/********** FIN FORUMS **********/


Voilà qui est tout! ^^ En espérant que ça va vous plaire! :hug:

Un petit merci ou commentaire est toujours le bienvenu ^^
- Mettre/laisser un crédit vers Never-Utopia est obligatoire.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


Revenir en haut

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