Forum

Bonjour, je rencontre des difficultés pour customiser le thème Gaming v6.
J'utilisais celui-ci sur la dernière version en date de la v5 sans problème et en passant à la v6 plusieurs éléments sont décalés ou modifiés sans que je puisse réellement les réajuster via les fichiers .css

Voici un exemple de la page d'accueil mon site actuel :

Et voici quand je passe sur la v6 avec le thème Gaming converti :

J'ai bien entendu essayé de modifier les fichiers .css pour tenter de réadapter l'agencement à la version précédente, mais je rencontre deux problèmes :

- Le nom des fichiers .css ne correspondent pas toujours entre les deux versions du thème, ce qui complique un peu ma compréhension du fonctionnement du thème
- Les modifications que j'effectue sur les fichiers, qui je pense ont une fonction similaire entre la v5 et la v6 ne fonctionnent pas, ou mal.

Par exemple, sur la capture d'écran de la v6, j'ai tenté d'ajouter un max-heigt pour limiter la hauteur du carouselle à 180px sur desktop :


Mais ce n'est pas prise en compte, malgré le cache du site désactivé et celui de mon navigateur effacé...

EDIT : Lien vers le site en bêta : http://tmp.hubeli.org

Édité par Izutox Le 18/04/2023 à 16h26

- le système de templates a été complètement revu, je conseille de bien lire la doc avant de se lancer. Le nouveau système est certes bien différent du précédent mais, au final, permet aux thèmes d'être beaucoup plus légers

- dans la doc v6 de modification des thèmes il est conseillé de faire une copie du thème pour la modifier plutôt que de modifier le thème lui même

- utilise la fonction

inspecter

de ton navigateur pour trouver et tester ce qu'il y a à modifier

- pour ton problème, il y a 2 classes à modifier mais avant cela,
ATTENTION!!

owl.carousel.css

n'est pas directement dans le thème, le mieux est donc de surcharger les classes ciblées dans un des fichiers css du theme

pour la hauteur du carousel, il faut cibler la classe dans le conteneur spécifique pour que la modif ne s'applique pas à tous les carrousels que tu pourrais ajouter mais uniquement celui là

si besoin, il faudra ajuster la hauteur du conteneur du carousel (qui est déclaré dans shape.css)


et bien sur à ajuster en mobile

- coté header, il y a un fichier readme.txt qui explique comment positionner au mieux les éléments à la rubrique

Best practice for menus in header

Bonjour,

Merci pour ta réponse, j'ai pu modifier la taille du carrousel, mais je n'arrive pas à aligner horizontalement les éléments dans le header comme c'était le cas sur la v5 du thème :

comme dit précédemment, les menus sont à placer selon un ordre défini (voir le readme.txt dans les fichiers du thème) afin d'optimiser l'affichage.
Le bouton hamburger permet de révéler les menus cachés.



Si toute fois ce thème devait être modifié en profondeur, il faut travailler sur une copie et non sur le thème lui-même.

La structure des thèmes a radicalement changé, la doc V6 est à disposition pour bien comprendre les changements

Par rapport à la modification demandée il semble qu'il faille défaire dans le header presque tout ce qui à été fait pour ce thème.

1. on désactive le cache: administration => outils => cache/configuration
2. on utilise le clic droit => inspecter ou f12 (selon le navigateur utilisé) sur la partie que l'on veut modifier, ce qui ouvre la console (inspecteur) du navigateur avec toutes les informations nécessaires à la lecture du code html/css/js ainsi que l'emplacement des propriétés css avec le nom du fichier qui les contient et les lignes où elles se trouvent dans le fichier

---

Video 'how to' pour l'inspecteur du navigateur, par GraphikArt