Header
Partagez | 

[FA] Titre des catégories en image

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [FA] Titre des catégories en image   Mar 21 Juil - 11:54

Tutoriel basé sur un premier jet réalisé par Louzannes.


Coucou toi !

Dans ce tutoriel, nous allons voir comment mettre des images en tant que titre des catégories, c'est-à-dire, comment faire ceci :
image tuto
Tout en évitant d'avoir ces mêmes images dans le fil de navigation, c'est-à-dire là :
image tuto

Idea Pré-requis :
• Avoir accès aux templates du forum ;
• Avoir des connaissances de base en HTML & CSS ;
• Avoir préparer toutes les images des titres des catégories et les avoir uploadées (!!! Attention à la longueur des liens, nous allons être limité en nombre de caractères par la suite Smile ).

On y va !

Modification des templates

Pour commencer, on va devoir cibler nos titres de catégories. Pour cela, dans le template "index_box" (qui se trouve dans PA > Affichage > Templates > Général), on va ajouter autour des titres un élement avec une classe qu'on pourra utiliser pour notre CSS.

Idea Je pars du template par défaut, non modifié.

On va donc repérer ceci :
Code:
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
qui sert à afficher le titre de ta catégorie, et on va le remplacer par ça :
Code:
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"><div class="titre-categorie"> {catrow.tablehead.L_FORUM} </div></th>

Ici, on a donc simplement ajouté une div avec une classe autour du titre Wink.

On enregistre et on publie Smile

On ajoute les images

Etape suivante, on ajoute les images dans les titres des catégories.

Pour cela, on va aller dans l'édition des forums, c'est-à-dire dans PA > Général > Forum > Catégories et forums.

Ici, on va ajouter les images "titre" de nos catégories, mais attention : il va falloir le faire en html, c'est-à-dire utiliser un code qui ressemble à ça :
Code:
<img src="lien-de-limage" alt="" />

Du coup, par exemple, je vais avoir ceci :
Code:
<img src="http://site.school-of-progress.fr/ete2015/cate/pas.png" alt="" />

Si on s'arrête là, "chouette ! Ça fonctionne !".

> Sur l'index :
Spoiler:
 

Mais problème ! Voilà le rendu quand on regarde le fil de navigation :
Spoiler:
 

Eh oui ! Patatra ça ne va pas ! On va donc devoir corriger ça avec une petite astuce ^^ Pour cela, on va ajouter, en plus de l'image, un span avec une class et du texte. Par exemple, pour moi ça sera :
Code:
<img src="http://site.school-of-progress.fr/ete2015/cate/pas.png" alt="" /><span class="tcat">Tes premiers pas dans l'école</span>

Exclamation Attention, c'est là où tu es limité en nombre de caractères Wink.

Bon ok, c'est encore pire Embarassed Cette fois, on a l'image ET le texte qui s'affichent.

> Sur l'index :
Spoiler:
 

> Dans le fil de navigation :
Spoiler:
 

Mais pas de panique, on va corriger ça à coup de baguette CSS magique ! :=):

Un peu de CSS

Ici, on va devoir faire 2 choses :
• masquer le texte sur l'index et dans les blocs "forums" ;
• masquer l'image dans le fil de navigation.

Au travail !

Masquer le texte sur l'index et dans les blocs "forums"

Pour masquer le text, c'est simple : on va cibler le bloc qui a pour classe "titre-categorie" puis le span ayant pour class "tcat" que l'on va mettre en "display:none;" pour ne pas l'afficher. Ce qui donne :
Code:
.titre-categorie .tcat{display: none;}

Notre index est réglé :
Spoiler:
 

Masquer l'image dans le fil de navigation

Ici, on va cibler le fil de navigation (qui a pour classe "nav") et on va masquer toutes les images à l'intérieur, ce qui nous donne :
Code:
.nav img{display: none;}

Spoiler:
 




Eh hop ! C'est terminé ^^

Like a Star @ heaven Pour résumer :

1) On modifie le template "index_box" pour "cibler" le titre des catégories
Code:
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"><div class="titre-categorie"> {catrow.tablehead.L_FORUM}&nbsp;</div></th>

2) On ajoute les images des catégories en suivant ce modèle :
Code:
<img src="LIEN-IMAGE"><span class="tcat">TEXTE POUR LE FIL DE NAVIGATION</span>
En faisant attention à ce que ça ne soit pas trop long.

3) On ajoute cette CSS pour afficher uniquement l'image sur l'index et dans les forums, et pour n'afficher que le texte dans le fil de navigation :
Code:
.titre-categorie .tcat{display: none;}
.nav img{display: none;}

Simple non ? Smile




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "[FA] Titre des catégories en image" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[FA] Titre des catégories en image
Page 1 sur 1
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+