Header

Partagez | 

[Xooit] Titre des catégories en image

Message Sujet: [Xooit] Titre des catégories en image   Mar 21 Juil - 12:03

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Tutoriel basé sur un premier jet réalisé par Louzannes pour ForumActif.


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 :
Tout en évitant d'avoir ces mêmes images dans le fil de navigation, c'est-à-dire là :

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és 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_body.tpl" (qui se trouve dans PA > Thème > Modifier les templates), 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:
<td class="catLeft" colspan="2" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
qui sert à afficher le titre de ta catégorie, et on va le remplacer par ça :
Code:
<td class="catLeft" colspan="2" height="28"><div class="titre-categorie"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></div></td>

Ici, on a donc simplement ajouté une div avec une classe autour du titre et on a supprimé le span "cattitle" Wink.

On enregistre Smile

On ajoute les images

Étape 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 > Sous-forum.

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 classe 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 texte, 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:
 

---

Il ne nous reste plus qu'à mettre cette CSS dans le template "overall_header.tpl" qui se trouve dans PA > Thème > Modifier les templates, juste avant :
Code:
</head>

Ce qui donne :
Code:
<style type="text/css">
<!--

   .titre-categorie .tcat{display: none;}
   .nav img{display: none;}

-->
</style>




Eh hop ! C'est terminé ^^

Like a Star @ heaven Pour résumer :

1) On modifie le template "index_body.tpl" pour "cibler" le titre des catégories
Code:
<td class="catLeft" colspan="2" height="28"><div class="titre-categorie"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></div></td>

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 dans le template "overall_header.tpl" 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 "[Xooit] Titre des catégories en image" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[Xooit] Titre des catégories en image
Page 1 sur 1
 Sujets similaires
-
» Titre des catégories en image :.
» Image en titre de catégorie.
» Niveau des catégories...
» Centrer le titre des catégories
» Supprimer le titre des catégories d'un forum.
Réponse rapide

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

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens