[sheitaneb]

#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.4
#~ Url du site :
#~ Hébergeur / Soft : Ovh
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour
Je n'ai pas rempli le formulaire car ce nest pas utile pour ma question
En fait j'ai juste besoin de savoir quel serait la meilleur méthode
Pour que mon site qui ne possède que 5 onglets de menu est des couleurs différentes
Sur certains block div, je c'est pas si la question est claire !?
Je pensais a un script php "si je suis sur cet onglet de menu, tu utilise cette feuille de style sinon etc. "
Qu en pensez vous ?
Merci d'avance.

[bess]

question déjà posée sur le forum, je te laisserais chercher pour le détail mais en gros l'une des solutions que je préconise est d'ajouter dans les pages "mère" une information dans le champs extra1

bleu, vert, noir
#00F, #FFF, #CCC

on peut imaginer n'importe quel code du moment ou tu l'exploites correctement dans le gabarit de ton menu

comme tu l'as deviné, il te faudra jongler avec Smarty pour dire : "si ma page possède un attribut extra1 renseigné alors je l'ajoute : en tant que nom de class CSS / en tant que couleur de back-ground / ...

En fait il y a plein de possibilité qui sont plus ou moins dynamique A toi de voir

[sheitaneb]

merci de ton message bess,
j'ai lu les autres topics qui traitent le sujet, il y en n'a deux qui m'ont donner quelques indications,
mais puisque que ce n'est pas éxactement le même rendu que je souhaite, je pense que pour moi ce sera forcement un peu différents,

si j'ai bien compris, pour que dans les 5 pages de mon menu les div est une couleur différente (la différence ce trouve dans le header et dans le footer)

je peut utiliser que un seul gabarits,
je doit faire une feuille de style pour chacune des pages ou il y aura que les css des div en question

je doit appeler la feuille de style correspondante dans l'attribut supplémentaire 1 avec une variable smarty,
un truc comme ça ?: {include file='css-page-1'}

est ce que je doit aussi toucher au gabarit du menu ?
merci d'avance.

[bess]

non non, ta feuille de style unique définit X colorations :

Code :

.blue{
background-color:#....
}

.red{
background-color:#....
}

reste à claquer l'information class="red/blue" au bon endroit dans ton menu. Pour ce faire je te propose d'écrire la chaine de caractère blue/red/yellow dans le champs extra1 des pages qui sont placés au niveau 1 de ton menu et, depuis le gabarit du menu utilisé, ajouter du code ainsi :

<li class="truc{si champs extra de la page renseigné} {$page->champsExtra}{/if}" > ...

afin de récupérer sa valeur et de l'injecter en tant que classe CSS des balises <li> de ton menu


Si tu veux commencer simple tu peux déjà te pencher sur 2 pistes distinctes :

- comment récuperer la valeur du champs extra1 d'une page dans ton gabarit du menu l'équivalent de ce que j'ai marqué par {$page->champsExtra}, pour ce test c'est très simple, recherche dans le forum, des codes existent déjà

- où placer ce code pour qu'il agisse sur la bonne balise HTML du module. Pour ce test tu créé préalablement ton CSS avec un unique code, disons ".red{background-color:'#F00';}", et tu testes dans le gabarit de ton menu en tâtonnant, en copiant collant l'appel à la classe CSS à droite et à gauche dans le code (selon toute logique ça sera dans une/plusieurs balises <li />) et tu vérifies que la class se répercute bien comme tu l'avais espéré sur le menu.

Une fois que tu sais récupérer le champs extra1, une fois que tu sais où insérer cette valeur dans le gabarit il te restera à réaliser la condition très simple : {si champs extra de la page renseigné} {$page->champsExtra}{/if}

Clairement c'est pas compliqué du tout, il te faut juste prendre du temps et réfléchir posément

[sheitaneb]

merci bess, je vais faire l'étude de ton message..

je répond maintenant car j'ai une peur qui me trotte dans la tète,
mon menu possède déja des class distinctes pour appliquer des bordures de couleurs différentes sur chaque items,
cela ne va t'il pas poser problème à la méthode que tu m'a indiqué ?

[bess]

il te reste le champs extra2 au pire :p

[Jean le Chauve]

mon menu possède déja des class distinctes

Tu peux avoir plusieurs classes pour un même élément : class="ceci cela" qui seront appelées par .ceci ou .cela dans ta css.

[sheitaneb]

:|

alors là je pensais tout savoir sur les css,

tu veut dire que je peut faire

<div id="ceci cela"></div>

#ceci { color: red;}
#cela { font-size: 1.4em;}

j'ai du mal comprendre ton message non ?

[Jean le Chauve]

C'est déconseillé d'utiliser plusieurs valeurs pour un id, sensé être unique par définition.
Mais pour les class, c'est utilisé très fréquemment. Regarde le code source de ta navigation...
Doc : http://www.yoyodesign.org/doc/w3c/css2/s...class-html
Un bon lien de description des sélecteurs d'attributs : http://www.tomsyweb.com/component/conten...-connaitre

[sheitaneb]

merci pour les liens jean le chauve,

je met à suivre le css qui doit changer pour chaque page, en fait j'aimerais bien creer une feuille de style pour les cinq pages différentes pour que ce soit moins le fouilli dans ma feuille de style principale,

par contre je suis un peu perdu sur la marche à suivre niveau smarty/php
en gros je devrais appeler feulle de style correspondante à la page, donc cela ce fera dans le champs extra 1 ?

voici le css qui sera modifier pour chaque page donc ça c'est pour une seule page en fait:

Code :

[== CSS ==]
#logo {        
    width: 100%;
    height: 290px;
        margin: 0 auto;
        background: #b3d45b;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
}
#boreder-top-footer {
    width: 960px;
        height: 16px;
    background: url([[root_url]]/images/border-top-footer.jpg) repeat-x top left;
}
#footer {
    width: 960px;
    height: auto;
    background: #b6d46d;
        color: #000;
}
#footer-left ul#nav li a:hover, #footer-left ul#nav li a:active {
        background: #8fbd1f;
        border-radius: 5px;
        padding: 5px;
}
#footer-bottom {
        clear: both;
        width: 960px;
        height: 30px;
        background: #8fbd1f;
}