Bonjour,
Nouveau sur Modx et j’aime bien ce cms simple a prendre en mains... Alors cette partie de prise en mais est terminer et voilà que j’ai voulu créer mon template a partir d’un modèle css standard.
Donc j’ai suivi les étapes suivante:
Procédure : Ouvrir le fichier du template dans un éditeur de texte, sélectionner intégralement le contenu, copier.
Se connecter au Manager de MODx. Menu "Ressources", item "Gestion des ressources". Dans le panneau "Gestion des ressources", cliquer sur l’onglet "Gestions modèles", puis sur "Nouveau modèle".
Dans le champ "Nom du modèle" donner un nom qui vous paraît représentatif, idem pour la description. Ensuite coller le contenu que vous aviez copié (le template) dans la fenêtre d’édition. Enregistrer la modification.
[edit]
Mise en place de la feuille de style.
Procédure : Renomer éventuellement votre feuille de style en "style.css", cela n’a rien d’obligatoire mais cela permet de ne pas avoir de doute pour plus tard.
Utiliser un client ftp pour se connecter dans le répertoire de MODx. Aller jusqu’à l’emplacement suivant : assets/templates/
Dans le dossier "templates", créer un dossier du même nom que celui que vous avez donné au template dans la précédente étape (il n’est pas obligatoire de donner le même nom, mais c’est plus pratique pour s’y retrouver le jour où vous aurez 250 templates différents sur votre site
).
Vous n’avez plus qu’à envoyer avec votre client ftp le fichier "style.css" à la racine du dossier créé. Si besoin créer un dossier "images" dans lequel vous pourrez mettre les images utilisées par votre feuille de style.
[edit]
Paramétrages.
Une fois que ces deux éléments sont en place (template et feuille de style) une petite vérification, pour être certain que votre template pointe bien vers la feuille de style.
Procédure : Se connecter au Manager de MODx. Menu "Ressources", item "Gestion des ressources". Dans le panneau "Gestion des ressources", cliquer sur l’onglet "Gestions modèles", puis sur le template que vous venez de créer.
La fenêtre d’édition s’ouvre, rechercher (dans les 10 premières lignes), la partie concernant l’emplacement de la feuille de style. Généralement sous la forme :
<link rel="stylesheet" type="text/css" href="assets/templates/03/style.css" />.
Vérifier que le chemin et les noms de répertoire sont bons, ainsi que le nom de la feuille de style (c’est là que l’on apprécie d’avoir donné au répertoire le même nom que le template, et d’avoir basiquement appelé sa feuille de style "style.css";)).
ET VOICI CE QUE CELA A DONNER DU DÉBUT A LA FIN
/* CSS Document */ * { margin:0; padding:0; } body{ background:#FFFFFF url(images/footer_bg.gif) bottom repeat-x; } a:hover{text-decoration:none;} a img { border:0;} img {vertical-align:top;} ul { list-style:none;} .left { float:left;} .right {float:right;} .clear { clear:both;} html, input, textarea { font-family:Georgia, tahoma; font-size:11px; line-height:17px; color:#868686; } input, select { vertical-align:middle; font-weight:normal;} strong {font-size:12px; color:#444444;} a {color:#3d6f92; font-size:12px;} /*main layout */ .h_logo{ height:92px; width:100%;} #header_tall {background:url(images/header_tall.gif) top repeat-x;} #main { margin:0 auto;} #header .left {padding:26px 0 0 0;} #header .right {padding:46px 11px 0 0;} #header .right a {color:#868686; font-family:arial; font-size:12px; background:url(images/RSS.gif) no-repeat top right; padding:0 29px 2px 0;} #menu {background:url(images/menu_tall.gif) top repeat-x; height:65px;} #menu .rightbg {background:url(images/menu_right.gif) top right no-repeat;} #menu .leftbg {background:url(images/menu_left.gif) top left no-repeat; width:100%; height:65px;} #menu .padding {padding:9px 0;} #menu li {float:left; width:123px; background:url(images/menu_libg.gif) top right repeat-y; font-size:12px; text-align:center; display:block;} #menu li a {color:#919191; text-decoration:none; font-weight:normal; font-size:12px; display:block; padding:8px 0 5px 0;} #menu li span{ display:block; padding:8px 0 5px 0;} #menu li a:hover {color:#000000; text-decoration:underline;} #menu li span {color:#000000; text-decoration:underline;} #menu .last {background:none;} #header .content {background:url(images/header_bg.jpg) top left no-repeat; padding:45px 60px 28px 414px; color:#ffffff;} #header .content .text {padding:2px 0 33px 2px;} #header .content a img {float:right;} #middle { width:100%;} #footer .indent {padding:23px 0 0 17px; color:#868686; font-size:12px;} #footer a {color:#444444; font-weight:bold;} .border {background:url(images/border_tall.gif) top repeat-x;} .border .btall {background:url(images/border_tall.gif) bottom repeat-x;} .border .ltall {background:url(images/border_tall.gif) left repeat-y;} .border .rtall {background:url(images/border_tall.gif) right repeat-y;} .border .tleft {background:url(images/border_tl.gif) top left no-repeat;} .border .tright {background:url(images/border_tr.gif) top right no-repeat;} .border .bleft {background:url(images/border_bl.gif) bottom left no-repeat;} .border .bright {background:url(images/border_br.gif) bottom right no-repeat; width:100%;} .border .ind {padding:4px 4px 15px 2px;} .border a img {float:right;} .h_text {padding-bottom:2px; background:url(images/h_text_bg.gif) bottom repeat-x;} .more {text-align:right;} .more a{background:url(images/more_bg.gif) top right no-repeat; padding-right:13px; color:#000000; font-weight:bold;} .date {background:url(images/date_bg.gif) no-repeat 0 0; padding:2px 0 2px 22px; color:#444444;} li { color:#3d6f92;} li a {color:#3d6f92; font-size:11px;} .bot_line {background:url(images/h_text_bg.gif) bottom repeat-x;} .b_text {color:#3d6f92;} /* index */ #index #middle .indent {padding:17px 0 19px 0;} #index #middle .columns1 .column1 .padding{padding:9px 13px 3px 15px;} #index #middle .columns1 .column2 .padding{padding:9px 13px 3px 15px;} #index #middle .columns1 .column3 .padding{padding:9px 13px 3px 15px;} #index #middle .columns1 .p1 {padding:1px 0 7px 0;} #index #middle .columns2 {padding:21px 0 0 0;} #index #middle .columns2
MERCI A L’AVANCE
