Vous n'êtes pas identifié(e).
13 février 2024 Sortie de Dotclear 2.29
Pages : 1
Hello,
Après avoir fait pas mal de recherches, m'être perdu dans les tpl, j'en viens à votre aide pour une petite chose.
Je voudrais que l'image de mon top (le background en fait) soit différente par catégorie. J'ai réussi à me débrouiller pour faire ceci dans des éléments, à l'intérieur du contenu et ça marche plutôt bien, mais pour le top j'ai du mal.
J'ai trouvé ceci mais j'ai du mal à voir comment ça pourrait m'aider, pour ne changer qu'une image... ou alors j'ai pas tout compris.
Bref, je suis perdu.
Merci d'avance
Blog perso : www.goudie.biz
Powered by Dotclear : Meilleurs jeux pour tablettes Android et Applications Android
Hors ligne
Bonjour Goudie,
Le recours au tuto de Pep est possible mais me semble trop ambitieux pour tes besoins. Tu n'as qu'une image à changer en fonction de la catégorie et comme cette image est un background, autrement dit des enjolivures css, tu peux le réaliser plus simplement.
1/ Installe si ce n'est déjà fait le plugin moreTpl
2/ Dans le fichier category.html, tu cherches la balise <div id="top"> et tu la modifies en <div id="top" class="top-{{tpl:EntryCategoryShortURL}}">
3/ Dans le répertoire des images de ton thème tu places toutes les images de top que tu utiliseras
Tu disposeras ainsi d'une class supplémentaire sur le top qui portera le nom top-Ma-Category (où Ma-Category est l'url de chaque catégorie)
Maintenant il ne te reste plus qu'à mettre dans ta feuille de style les images kivonbien.
#top { background: transparent url(images/top-par-defaut.jpg) center center; }
#top.top-Ma-Categorie-1 { background-image: url(images/mon-image-pour-Cat1.jpg; }
#top.top-Ma-Categorie-2 { background-image: url(images/mon-image-pour-Cat2.jpg; }
etc.
La documentation : http://doc.dotclear.net/2.0/fulltoc
Le module de recherche du forum : http://www.dotclear.net/forum/search.php ?
Hors ligne
Merci la fée de m'avoir éclairé !
Le problème c'est que dans mon fichier category.html, je n'ai pas de <div id="top"> :(
{{tpl:include src="_top.html"}}
Blog perso : www.goudie.biz
Powered by Dotclear : Meilleurs jeux pour tablettes Android et Applications Android
Hors ligne
Si je touche au _top.html, ça fonctionnera aussi bien ? Et dans les contextes "sans catégorie" ?
Blog perso : www.goudie.biz
Powered by Dotclear : Meilleurs jeux pour tablettes Android et Applications Android
Hors ligne
Voilà comme je m'y attendais, ça fonctionne dans le contexte du billet seul (normal) mais pas dans les pages de catégories (ça aurait été bien) et dans les autres contextes, pas d'image pour le header... :(
Blog perso : www.goudie.biz
Powered by Dotclear : Meilleurs jeux pour tablettes Android et Applications Android
Hors ligne
En principe ça devrait être bon (désolée j'aurais dû préciser) et si ça ne l'est pas alors il suffira de copier un contenu identique à celui de _top.html à la place du template qui l'appelle dans le fichier category.html
Aucune incidence si pas de catégorie, la règle que tu auras indiquée #top s'appliquera.
La documentation : http://doc.dotclear.net/2.0/fulltoc
Le module de recherche du forum : http://www.dotclear.net/forum/search.php ?
Hors ligne
Ah... je viens de voir ton message #6.
Je fouille, je reviens.
La documentation : http://doc.dotclear.net/2.0/fulltoc
Le module de recherche du forum : http://www.dotclear.net/forum/search.php ?
Hors ligne
Rectification. Plus besoin de moreTpl (sauf si tu veux aussi l'appliquer dans le contexte du billet seul) et tu remplaces le code de là-haut par :
<div id="top" class="top-{{tpl:CategoryShortURL}}">
La documentation : http://doc.dotclear.net/2.0/fulltoc
Le module de recherche du forum : http://www.dotclear.net/forum/search.php ?
Hors ligne
C'est ce que j'étais en train de me demander :) Si le moreTpl était indispensable pour ça, même si pour d'autres bidouillages il me sera utile :)
Mettre le contenu du _top directement dans le category.html ...bon, cette idée devait vraiment être tourner à côté de mon cerveau :)
Merci, là ça devrait pas poser de problèmes.
Blog perso : www.goudie.biz
Powered by Dotclear : Meilleurs jeux pour tablettes Android et Applications Android
Hors ligne
Bon ça fonctionne environ, mais c'est pas méga propre. En fait j'ai fait un id="top-categorie" au lieu d'un class, sinon le background était toujours celui par défaut (id top).
Donc forcément là ça marche mais forcément aussi, j'ai à chaque fois les mêmes paramètres à mettre dedans, pour que le top garde sa tronche normale.
Euh, je suis peut être pas bien clair là ?
Blog perso : www.goudie.biz
Powered by Dotclear : Meilleurs jeux pour tablettes Android et Applications Android
Hors ligne
Bon je recommence :D
J'ai le div top normal, avec son background par défaut, "sans catégorie".
Dedans j'ai la class top-categorie (oui j'ai remis en class) avec son background qui va bien.
Le background de la div top passe tout le temps devant celui de la class top-categorie qui est à l'interieur.
Mieux ?
Blog perso : www.goudie.biz
Powered by Dotclear : Meilleurs jeux pour tablettes Android et Applications Android
Hors ligne
Oui mieux. Faut que j'aille voir sur place, ça doit être une question de priorités dans les règles. Ça peut se voir où ?
La documentation : http://doc.dotclear.net/2.0/fulltoc
Le module de recherche du forum : http://www.dotclear.net/forum/search.php ?
Hors ligne
Euh justement, ça peut se voir sur mon ordi uniquement là donc ;)
Quel fichiers veux-tu voir ?
Blog perso : www.goudie.biz
Powered by Dotclear : Meilleurs jeux pour tablettes Android et Applications Android
Hors ligne
Déjà copie-moi ce que tu as mis en guise de :
#top { background: transparent url(images/top-par-defaut.jpg) center center; }
#top.top-Ma-Categorie-1 { background-image: url(images/mon-image-pour-Cat1.jpg; }
#top.top-Ma-Categorie-2 { background-image: url(images/mon-image-pour-Cat2.jpg; }
A faire aussi :
- regarder la source de la page pour t'assurer que tu as bien <div id="top" class="top-Cat1"> (enfin quand je dis Cat1 je parle de l'url de la catégorie active bien sûr.
- supprimer ce qui correspond à la première ligne ci-dessus. La bonne image s'affiche-t-elle alors ?
La documentation : http://doc.dotclear.net/2.0/fulltoc
Le module de recherche du forum : http://www.dotclear.net/forum/search.php ?
Hors ligne
#top {
position: relative;
height: 180px;
width: 800px;
padding: 0;
margin: 20px auto 0 auto;
background: transparent url(img/top-default.png) no-repeat bottom left;
}
.top-Cat1 {
background: transparent url(img/top-Cat1.png) no-repeat bottom left;
}
Tu veux en fait que je supprime la div top ?
Blog perso : www.goudie.biz
Powered by Dotclear : Meilleurs jeux pour tablettes Android et Applications Android
Hors ligne
Je sais, je peux mettre quelque chose en fond général de la page, comme ça par défaut au lieu d'un vide, j'aurai un faux top planqué derrière toujours prêt ?
Méthode à l'arrache ^^
Blog perso : www.goudie.biz
Powered by Dotclear : Meilleurs jeux pour tablettes Android et Applications Android
Hors ligne
C'est bon, je pense que j'ai trouvé un bon compromis, j'ai recopié un contenu de _top différent dans chaque fichier, ça marche bien et c'est plus pratique :)
Merci Koz'
Blog perso : www.goudie.biz
Powered by Dotclear : Meilleurs jeux pour tablettes Android et Applications Android
Hors ligne
heu, goudie, pour qu’une règle s’applique à une class prise dans une id, il faut préciser le chaînage (sinon l’id a priorité)
#top {règles}
#top.top-Cat1{règles}
;-)
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
J'étais pas trop sûr là dessus, mais je saurai merci ;) .
L'empilement des deux top (le default et le personnalisé) n'était pas... pas top (hum) donc je vais garder ma méthode qui me permet finalement d'en faire plus que prévu (pour les autres contextes).
Blog perso : www.goudie.biz
Powered by Dotclear : Meilleurs jeux pour tablettes Android et Applications Android
Hors ligne
Pages : 1
Vous n'êtes pas identifié(e).