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. ♥

Rendu

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

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.

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 )

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

Exemples:

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".

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

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:

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

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

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

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!



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.



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;
}

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:
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);
});

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

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

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!



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:
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);
});

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^

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)

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!

Bonjour,

j'avais envie de faire tout un codage LS en style néon donc je commence par vous donner les catégories, dont j'ai rencontré des petites difficultés donc merci à Alzufen et NyoTheNeko pour l'aide qu'ils m'ont apportés.

Vous pouvez voir le rendu ici ou encore là.





Le Template

Code:

<link href='http://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<!-- BEGIN catrow -->
 
 

<!-- BEGIN tablehead -->
 
 <span class="categorie_titre">
    {catrow.tablehead.L_FORUM}
  </span>
   
 
  <!-- END tablehead -->
  <!-- BEGIN forumrow -->
  <div class="categorie_neon">


 
   
   

   


  <div class="cat_gauche">
    <div class="nom_forum">
    <h{catrow.forumrow.LEVEL} class="hierarchy">
      <a href="{catrow.forumrow.U_VIEWFORUM}" >{catrow.forumrow.FORUM_NAME}</a>
    </h{catrow.forumrow.LEVEL}>
  </div>
  <div class="description">
    <p >{catrow.forumrow.FORUM_DESC}</p>
  </div>
 
    <div class="icone"><span><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icon" /></span>
    </div>
  </div>
 

 
  <div class="cat_droite"><div class="dernier_sujet"> 
    <!-- BEGIN avatar -->
    <span >{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>                       
                        <!-- END avatar -->
    <span>                  
                  <!-- BEGIN switch_topic_title -->
      <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                        <!-- END switch_topic_title -->
      {catrow.forumrow.USER_LAST_POST}
    </span>
  </div>
 
  <div class="sous_liens"><span ><div id="sousForums"><span >{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div></span>
                    <script type="text/javascript">
  <!--
                      jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br />')).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>
  <div class="moderateurs">
            
                  <!-- BEGIN switch_moderators_links -->
    <div >
      {catrow.forumrow.switch_moderators_links.L_MODERATOR}
      {catrow.forumrow.switch_moderatros_links.MODERATORS}
    </div>                  
                  <!-- END switch_moderators_links -->
  </div>
</div>
                  

                     
               
   <!-- END forumrow -->
    

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

<!-- BEGIN switch_on_index -->
<div class="toplinks linklist clearfix">
   <ul>
      <!-- BEGIN switch_delete_cookies -->
      <li><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
      <!-- END switch_delete_cookies -->
      <!-- BEGIN switch_user_logged_in -->
      <li class="last"><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
      <!-- END switch_user_logged_in -->
   </ul>
</div>
<!-- END switch_on_index -->

CSS

Code:


a:link {
  text-decoration: none;
}

#submenu ul li a {
padding: 0px;
margin: 0px;
text-decoration: none;
}

/* ---------------------------------- CATEGORIE NEON ------------------------------------------------------- */

.categorie_neon{
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  background-color: #6e6b6e;
  border: 8px #41dd23 solid;
  border-radius: 60px;
  padding-top: 40px;
  padding-bottom: 40px;
  overflow: hidden;
  box-shadow: 0px 0px 8px green;
}

.categorie_titre{
  font-size: 25px;
  text-transform: uppercase;
  text-align: center; 
  color: rgba(255,255,255,0.7);
  text-shadow: 0px 0px 8px green;
  font-family: 'Orbitron', sans-serif;
  position: relative;
  top: 10px;
}

.cat_gauche{
  float: left;
  width: 500px;
  overflow: hidden;
  margin-left: 20px;
  padding-top: 10px;
}

.nom_forum{
  font-size: 20px;
  text-transform: uppercase;
  text-align: right;
  color: rgba(255,255,255,0.7);
  text-shadow: 0px 0px 8px green;
  font-family: 'Orbitron', sans-serif;
}

.description{
  background-color: rgba(255,255,255,0.1);
  height: 80px;
  overflow: auto;
  border: 2px  solid rgba(0,255,0,0.2);
  border-bottom: none;
  box-shadow: -1px -1px 8px green;
}

.icone{
  background-color: rgba(255,255,255,0.1);
  height: 40px;
  text-align: right;
  border: 2px  solid rgba(0,255,0,0.2);
  border-top: 1px  solid rgba(255,255,255,0.4);
  box-shadow: 1px 10px 8px green;
}

.cat_droite{
  width: 150px;
  overflow: hidden;
  float: right;
  margin-top: 20px;
  border: 3px  solid rgba(0,255,0,0.2);
  box-shadow: 0px 0px 8px green;
}

.dernier_sujet{
  background-color: rgba(255,255,255,0.1);
  text-align: center;
  height: 60px;
}

.sous_liens{
  background-color: rgba(255,255,255,0.1);
  text-align: center;
  height: 60px;
  overflow: auto;
}

.sous_liens a{
  font-size: 15px;
}

.sous_liens a:hover{
  font-size: 18px;
  background-color: rgba(0,255,0,0.5);
  border-radius: 30px;
}

.moderateurs{
  background-color: rgba(255,255,255,0.1);
  text-align: center;
  height: 10px;
  padding-bottom: 5px;
}


/* --------------------------------------------------------------------------------------------------------- */

Bonjour !

Selon votre forum, la barre des liens en bas de l'index est souvent sur un fond de couleur détonnant avec le fond.

Comme le fond de notre forum d'exemple est noir, nous allons donc mettre le fond de la barre en noir. Pour ce faire, cherchez le code CSS suivant :

Code:

#gfooter
    {
        background-color:#60A500;
        color:#FFFFFF;
        font-size:0.8em;
        margin:8px 0;
        padding:0.5em;
        text-align:right;
    }

Remplacez le code du background-color par le code couleur voulu, ce qui donnera (rappel : notre exemple est le noir) :

Code:

#gfooter
    {
        background-color:#000000;
        color:#FFFFFF;
        font-size:0.8em;
        margin:8px 0;
        padding:0.5em;
        text-align:right;
    }


Hello !

Dans les forums en Invision, il y a des bordures inesthétiques présentes en bas des cadres. On va voir comment les fondre dans votre forum.

Sur la page d'accueil :

Spoiler:

Si vous voulez du noir, ça donnera :

Code:

table.ipbtable tfoot td
     {
        background-color:#000000;
     }

Page des sujets :

Spoiler:

Code:

.darkrow
     {
        background-color:#000000;
        color:#000000;
     }

Page du sujet :

Spoiler:

Mettre le code couleur désiré :

Code:

.topic-footer
     {
        background-color:#000000;
     }