Manuel [Medialibs]
Comment gérer plusieurs thèmes graphiques dans e-majine ?
A l'étape de configuration de votre projet, vous choisissez le nombre de thèmes graphiques à gérer. Dans notre cas de figure, nous activerons un 2ème modele, pour se retrouver avec Modele1 & Modele2
A l'installation de votre projet, le webo-facto va créer dans l'espace FTP les répertoires Modele1 & Modele2. Sauf qu'il installera le jeux de template dans le 1er thème graphique, à savoir le Modele1 dans notre cas de figure.
Sans aucune modification de votre part, le répertoire Modele2 est donc vide... Dans cette configuration quand vous choisissez le modele2 à appliquer sur une rubrique, e-majine récupère automatiquement les templates du 1er thème graphique.
Pour personnaliser votre modele2 voici le mode opératoire à suivre :
- créer le répertoire "structure" et copier "mainpage.html" : cela vous permettra de structurer l'architecture du modele2.
- créer le répertoire "css" et copier "styles.css" : cela vous permettra de gérer la mise en forme graphique du modele2.
Mais pourquoi conserver "styles.css" ?
- Car e-majine appel nativement le fichier "styles.css" via le template mainpage.html. Les autres feuilles de styles sont ensuite appelées via les règles "@import" dans styles.css
En revenant sur notre cas de figure, il suffit d'avoir l'arborescence FTP suivante :
- Modele2 > structure > mainpage.html
.................> css > styles.css
.........................> modele2.css (à créer)
En restant sur cette configuration, styles.css est bien chargée. On rajoute une feuille de style unique pour personnaliser ce modele (modele2.css) mais la mise forme du modele2 reste déstructurée car en regardant de plus près styles.css (du modele2):
@import url(structure.css);
@import url(publicationMethods.css);
...
Les règles @import appellent des fichiers à la même racine, d'où le problème de mise en forme car ces fichiers n'existent pas. La solution :
Partager certaines feuilles de styles entre modele1 et modele2, soit :
@import url(/modeles/fr/Modele1/css/structure.css);
@import url(/modeles/fr/Modele1/css/publicationMethods.css);
...
Et la feuille css unique pour le modele2 :
@import url(modele2.css);
Sachez aussi qu'il est parfois plus simple de conserver un seul jeu de CSS et de se servir des classes CSS liées à la page pour décliner tel ou tel modele graphique.
N'hésitez pas à réagir à ce topic.
Formateur web [Medialibs]