Bases de compréhension du design de la MS2 |
Bienvenue invité ( Connexion | Inscription )
Bases de compréhension du design de la MS2 |
20 Apr 2005, 22:57
Message
#1
|
|
Ceinture bleue OSC Groupe : Membres Messages : 818 Inscrit : 11-April 05 Lieu : Lyon Membre no 5456 |
Bases de compréhension du design de la MS2
Ce tutoriel est destiné aux débutants, mais peut servir de memo à ceux qui connaissent. SOMMAIRE I) Modification rapide de l'ambiance de la boutique.(couleurs) II) Modification du texte et des images III) Autres modifications de base IV) Comment inserer une page personnel du type de la boxe des liens d'information V) Questions reponses I) Modification rapide de l'ambiance de la boutique.(couleurs) Toutes les modifications du I) se font dans catalog / stylesheet.css . Remplacer les points d'interogations par vos valeurs : a) Préambule sur les couleur hexadecimales *Les couleurs sont définie par 6 caractères hexadécimaux. c.a.d. les caractères sont des nombres en base 16 dans l'ordre croissant : 0 1 2 3 4 5 6 7 8 9 A B C D E F. (ce qui nous donne 16 exposant 6 = 16.7 Millions de couleurs.) *Les 2 premiers caracteres correspondent au rouge, les deux suivants au vert, et les deux derniers au bleu. *FFFFFF correspond au blanc, et 000000 correspond au noir, ainsi plus les valeurs sont faibles (plus proche de 0), plus la couleur sera foncée. Inversement, plus les valeurs sont elevées (vers F), plus la couleur sera claire. le 1er, 3eme, et 5eme caractère represente les "seizaines" de chaque rouge, vert, bleu : ils influent donc 16 fois plus sur la couleur que les unités. Exemple : FF0000 correspond à un rouge vif. F00000 correspond à un rouge plus foncé. C00000 correspond à un rouge beaucoup plus foncé. Prenons x et y, deux caractère entre 0 et F toute les couleurs du type xyxyxy serons des gris plus ou moins clair. Les couleurs complémentaires sont le magenta de code FF00FF, le cyan de code 00FFFF, et le jaune de code FFFF00. b) Modification de la couleur de fond d'ecran. a la ligne 12 : BODY { background: #??????; et à la ligne 31 : TR.header { background: #??????; c) Modification de la couleur des boxes *Les titres a la ligne 124: TD.infoBoxHeading { background: #??????; * les cadres a la ligne 101 : .infoBox { background: #??????; *la couleur de fond a la ligne 105 : .infoBoxContents { background: #??????; *la couleur du rollover lien a la ligne 30 : A:hover color: #??????; d) Modification de la couleur de la barre de navigation du header et footer *barre du header à la ligne 49 : TD.headerNavigation { background: #??????; *barre du footer a la ligne 95 : TD.footer { background: #??????; Vous pouvez pendant que vous y etes changer les autres parametres : font-family: font-size: color: font-weight : etc... e) Modification des couleurs de la liste des produits des sous catégories * les cadres à la ligne 144 : TABLE.productListing { border-color: #??????; *les titres a la ligne 151 : .productListing-heading background: #??????; *les couleurs de fond a la ligne 134 et 139 : TR.accountHistory-odd, ... ou TR.accountHistory-even, ... background: #??????; f) Et d'autres à découvrir dans stylesheet.css II) Modification du texte et des images a) Le texte *ce que l'on peut modifier avec catalog/includes/languages/french/index.php -Le texte de la page centrale d'accueil.( vers le debut), -Le titre de la page d'accueil (en gros sous le header), -Le titre de la boxe centrale nouveaux produits : vers ligne 20, -Les en tetes des sous categories, -Et plus generalement tous les textes qui concerne l'index. *ce que l'on peut modifier avec catalog/includes/languages/french.php -le copyright ( tout en bas du fichier : attention à bien suivre les instructions oscommerce) -le contenu de la barre de navigation. -la premiere ligne d'accueil visiteur, sous le titre d'accueil (lignes 284 a 286) -le titre des boxes. -et plus generalement, les textes communs à toutes les pages en francais. b) Les images *Le logo oscommerce en haut à gauche : dans catalog/includes/header.php vers la ligne 57. *Les trois images en haut à droite : dans catalog/includes/header.php vers la ligne 75. c) Les images des coins supérieurs des boxes *Pour arrondir les angles d'une boxe : Editez le fichier correspondant : catalog/includes/boxes/nom_de_mabox.php trouvez le code : (vers ligne 70 pour categories.php) new infoBoxHeading($info_box_contents, true, false); le premier booleen pour le coin gauche, et le deuxieme pour le coin droit. true pour avoir un arrondi, false pour avoir un angle droit. faites les modif en consequance. *pour modifier la couleur ou la forme des coins des boxes : modifiez les 3 images dans catalog/images/infoboxes/ d)fichiers autour de la page centrale(includes) la barre de reperage de class headerNavigation avec includes/header.php la colonne de gauche se modifie avec includes/column_left.php et droite avec includes/column_left.php Reste le bas : voir includes/footer.php III) Autres modifications de base a) changer la taille des cadres des boxes Dans includes/class/boxes à la ligne 79 $this->table_cellpadding = '1'; b) changer la largeur des boxes dans includes/application_top.php vers ligne 70 define('BOX_WIDTH', 125); c) Comment modifier l'affichage de la boxe categories *Comment enlever la fleche apres chaque categories : dans catalog/includes/boxes/categories.php vers la ligne 41 : if (tep_has_category_subcategories($counter)) { $categories_string .= '->'; } commentez ou supprimez ces lignes. *Comment rajouter une image avant chaque categories differentes selon si c'est une sous categorie ou pas : avant la ligne 20 : CODE $categories_string .= '<a href="'; rajouter (avant) CODE if (tep_has_category_subcategories($counter)) { $left_image_plus = 'mon_image_plus.gif'; } else { $left_image_plus = 'mon_image_moins.gif'; } $categories_string .= tep_image(DIR_WS_IMAGES . $left_image_plus); $categories_string .= ' '; apres la ligne 45 : CODE $categories_string .= '</a>'; rajouter CODE if (tep_has_category_subcategories($counter)) { $right_image_fleche = 'mon_image_fleche.gif'; $categories_string .= ' '; $categories_string .= tep_image(DIR_WS_IMAGES . $right_image_fleche); } IV) Comment inserer une page personnel du type de la boxe des liens d'information a)ouvrez shipping.php, et enregistrez le sous mes_infos.php (par exemple) ligne 15 remplacez : CODE require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_SHIPPING); remplacer sur les 2 lignes, les 2 variables SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT $breadcrumb->add(NAvb script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>'); //--> </script> <noscript> <?php // 3 lignes au dessus taille d'image qui est d origine : $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?> par vos valeurs, de largeur et hauteur max. question Comment ajuster la taille des images des fabriquants dans la boxe information fabricant? si vous voulez par exemple formater la taille de vos images comme les categories : reponse dans catalog/includes/boxes/manufacturers_info.php vers la ligne 28, remplacez : CODE if (tep_not_null($manufacturer['manufacturers_image'])) $manufacturer_info_string .= '<tr><td align="center" class="infoBoxContents" colspan="2">' . tep_image(DIR_WS_IMAGES . $manufacturer['manufacturers_image'], $manufacturer['manufacturers_name']) . '</td></tr>'; par : CODE if (tep_not_null($manufacturer['manufacturers_image'])) $manufacturer_info_string .= '<tr><td align="center" class="infoBoxContents" colspan="2">' . tep_image(DIR_WS_IMAGES . $manufacturer['manufacturers_image'], $manufacturer['manufacturers_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '</td></tr>'; vous pouvez aussi utiliser HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT ou SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, ou les ecrire en dure, par exemple 200, 300. a+ Ce message a été modifié par Gnidhal - 19 Jul 2007, 22:21. -------------------- |
|
12 May 2005, 19:55
Message
#2
|
|
5eme dan OSC Groupe : Administrateur Messages : 14914 Inscrit : 22-November 02 Membre no 610 |
Voilà donc le futur tuto de compréhension des bases du design pour la MS2. N'hésitez pas à aider stepibou en répondant à ce message pour ajouter vos propositions.
Ne pas poser de questions dans ce topic Les messages sans rapport seront supprimés. Bon courage -------------------- Ni Hot-line ni Service Après Vente, ces forums sont un lieu d'échanges.
Une Question? Rechercher / FAQ / docV1.pdf / docV2.pdf / contributions |
|
12 Jun 2005, 15:03
Message
#3
|
|||||||||||||||||
Ceinture bleue OSC Groupe : Membres Messages : 818 Inscrit : 11-April 05 Lieu : Lyon Membre no 5456 |
EN SAVOIR PLUS I) Comment changer la couleur de fond d'une box en particulier : (par fissiaux) : a) Dans catalog/includes/classes/boxes.php avant le code (vers ligne 100):
ajouter le code :
vous remarquerez les ajouts des 2, pour modifier les nom des classes et des fonctions (indispensable). et la modif de $this->table_parameters pour les 2 fcts. b)puis aller dans includes/boxes/la boxe que tu veux modifier.php : trouver le code :
remplacer par :
c)et finallement, aller dans stylesheet.css : et ajouter à la fin :
remplacez les '?' par vos valeurs hexadecimales... et voila c'est fait. II) Inserer une boxe avec une image et/ou du texte : (par fissiaux) a)Création d'un fichier nommé : maboxe.php dans catalog/includes/boxes/
Tu mets ton image dans le répertoire image et tu remplaces le nom que j'ai mis (monimage.gif) par le nom de ton image. b)Dans le fichier catalog/includes/languages/french.php, tu rajoutes :
c)Il ne te reste plus qu'à aller dans le fichier catalog/includes/column_right.php pour rajouter à l'endroit où tu veux :
bon code à tous! -------------------- |
||||||||||||||||
|
6 Oct 2005, 15:25
Message
#4
|
|
2eme dan OSC Groupe : Membres VIP Messages : 3526 Inscrit : 12-June 03 Lieu : Montpellier Membre no 1239 |
Si cela peut aider, cela m'a rappelé un ancien post que j'avais fait concernant la structure HTML de toutes les pages appelées sur OsC:
CITATION Toutes les pages appelées dans le site doivent avoir une structure du type: CITATION <html> <head></head> <BODY> <!-- header: ci-dessous require du header soit une ou plusieurs table(s) largeur 100%: //--> <table width="100%"><tr><td> ...... </td></tr></table> <!-- header_eof //--> <!-- body avec les 2 colonnes et le corps central soit 1 table largeur 100% avec 3 cellules (colonne gauche, corps central, colonne droite)://--> <table width="100%"> <tr> <td width="<?php echo BOX_WIDTH; ?>"> <!-- BOX_WIDTH est la largeur de la colonne //--> <table> <!-- left_navigation: ci-dessous require de la colonne gauche soit appels successifs aux boxes structurées comme suit : //--> <tr> <td> ...... </td> </tr> <!-- left_navigation_eof //--> </table> </td> <!-- body_text: corps central de la page //--> <td width="100%"> <table width="100%"> <tr> <td> .... </td> </tr> </table> </td> <!-- body_text_eof : fin corps central de la page //--> <td width="<?php echo BOX_WIDTH; ?>"> <!-- BOX_WIDTH est la largeur de la colonne //--> <table width="<?php echo BOX_WIDTH; ?>"> <!-- right_navigation:colonne droite, idem colonne gauche //--> <tr> <td> ...... </td> </tr> <!-- right_navigation_eof //--> </table> </td> </tr> </table> <!-- body_eof fin des 2 colonnes et du corps central//--> <!-- footer: ci-dessous require du footer soit une ou plusieurs table(s) largeur 100%: //--> <table width="100%"><tr><td> ...... </td></tr></table> <!-- footer_eof //--> </BODY> </html> On s'aperçoit que le header et le footer sont indépendants en terme de largeur avec le corps de la page (body composé des 2 colonnes et du corps central). Cela permet je pense au débutant de comprendre les imbrications HTML... Bon code... -------------------- |
|
26 May 2007, 18:16
Message
#5
|
|
Ceinture verte OSC Groupe : Membres Messages : 676 Inscrit : 20-June 02 Lieu : world citizen Membre no 253 |
-------------------- Ms2fr sur mesure
|
|
21 Apr 2009, 23:02
Message
#6
|
|
2eme dan OSC Groupe : Bannis Messages : 3022 Inscrit : 12-November 07 Lieu : Massilia Membre no 19718 |
Sujet récurent : comment faire avec osC pour être "tableless" donc xHTML et sans tables pour la structure du site et pour la 40aine de fichiers le composant (à la racine du site > /catalog)
Ensuite les données tabulaires (ce qui est normal) sont à récupérer dans le code d'origine et à intégrer dans ce code. Voici un prototype de code fonctionnant sur bon nombre de navigateurs (je ne les ait pas tous testés) Le xHTML de la structure d'osC : Code Edit : Code obsolète effacé et affiché plus loin... Sorry de poster sur de l'épinglé, si vous voulez splitter, no problemo ... Edit : Merci pour l'annotation de la modération Ce message a été modifié par delete - 23 Apr 2009, 22:46.
Raison de l'édition : message hors propos supprimé
|
|
23 Apr 2009, 12:53
Message
#7
|
|
5eme dan OSC Groupe : Administrateur Messages : 14914 Inscrit : 22-November 02 Membre no 610 |
merci delete, ajouté à la FAQ
http://www.oscommerce-fr.info/faq/qa_info.php?qID=215 -------------------- Ni Hot-line ni Service Après Vente, ces forums sont un lieu d'échanges.
Une Question? Rechercher / FAQ / docV1.pdf / docV2.pdf / contributions |
|
23 Apr 2009, 22:41
Message
#8
|
|
2eme dan OSC Groupe : Bannis Messages : 3022 Inscrit : 12-November 07 Lieu : Massilia Membre no 19718 |
merci delete, ajouté à la FAQ http://www.oscommerce-fr.info/faq/qa_info.php?qID=215 Pour être plus précis : Code d'une page osC en xHTML 1.1 : Code <?php /* $Id: oscommerce_xhtml_template.php,v 1.0 2009/04/21 delete -> oscommerce-fr.info $ osCommerce, Open Source E-Commerce Solutions http://www.oscommerce.com Copyright (c) 2003-2009 osCommerce Released under the GNU General Public License */ require('includes/application_top.php'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html <?php echo HTML_PARAMS; ?>> <head> <meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>"> <title><?php echo TITLE; ?></title> <base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>"> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <!-- body/page_contents : contenu de la page : positionnement, centrage, largeur //--> <div id="page_contents"> <!-- header: ci-dessous require du header soit une ou plusieurs table(s) largeur 100%: //--> <div id="header"> <?php require(DIR_WS_INCLUDES . 'header.php'); ?> </div> <!-- header_eof //--> <!-- body //--> <!-- left_navigation - colonne de gauche et sa largeur //--> <div id="left" style="width: <?php echo BOX_WIDTH; ?>px;"> <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?> </div> <!-- left_navigation_eof //--> <!-- right_navigation - colonne de droite et sa largeur (identique ici à celle de gauche) //--> <div id="right" style="width: <?php echo BOX_WIDTH ?>px;"> <?php require(DIR_WS_INCLUDES . 'column_right.php'); ?> </div> <!-- right_navigation_eof //--> <!-- page_contents : contenu central de la page : on y insère les "modules" //--> <div class="container"> <?php // Exemple d'intégration d'un module central // require(DIR_WS_MODULES . 'oscx.php'); // // Fin du module ?> <!-- page_contents_eof //--> <!-- cleaner: on repasse sur 1 colonne //--> <div class="cleaner"> </div> <!-- body_eof //--> <!-- page eof //--> </div> </div> <!-- footer //--> <div id="footer"> <?php require(DIR_WS_INCLUDES . 'footer.php'); ?> </div> <!-- footer_eof //--> </body> </html> <?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?> Un exemple de module : Code <!-- middle_content_header : div contenant l'image du haut du module //--> <div class="middle_top"></div> <!-- middle_content_header_eof //--> <!-- middle_content : div contenant l'image répétée verticalement //--> <div class="middle"> <h1>Titre du module</h1> <?php echo "<p>Lorem ipsum dolor sit amet consectetuer elit Lorem tincidunt justo Aenean. Aliquam dis ut accumsan justo sollicitudin mattis aliquam libero nec vitae. Malesuada nibh sed augue Sed nunc nec Phasellus consectetuer tincidunt laoreet. Tincidunt orci pellentesque ipsum mauris Aliquam tellus iaculis eu eget felis. Velit eget congue odio massa lorem habitasse egestas pede vel justo. </p> <p>Curabitur velit neque Vivamus risus feugiat Aenean est Nam eget libero. Eu laoreet est Ut enim condimentum et feugiat accumsan Maecenas Vivamus. Non Sed pretium convallis Proin id porttitor felis nisl sit sed. Donec wisi pede vitae turpis fringilla libero tempor sagittis nibh pretium. Condimentum et netus venenatis Phasellus felis habitant et faucibus et orci. Elit at pretium.</p> "; ?> </div> <!-- middle_content //--> <!-- middle_content_trailer : div contenant l'image située en bas du module //--> <div class="middle_bot"></div> <!-- middle_content_trailer_eof //--> Feuille de style associée (à inclure dans stylesheet.css) : Code /* *************************************************************** */ /* Style de la Page - Haut, Gauche, Droit Bas, Centre */ /* *************************************************************** */ #page_contents { margin-left: auto; margin-right: auto; width: 1000px; /* Largeur de la page centrée */ } #left { float:left; } #right { float:right; } #footer { margin-left: auto; margin-right: auto; width: 1000px; /* Largeur de la page centrée */ } .cleaner { clear:both; } #page_contents { margin-left: auto; margin-right: auto; width: 1000px; /* Largeur de la page centrée */ } /* *************************************************************** */ /* Module Central */ /* *************************************************************** */ div.container { /* Marge = largeur des boxes pour éviter un décallage droite ou gauche */ margin-left: 97px; margin-right: 97px; } div.middle_top { overflow:hidden; height: 10px; /* Hauteur en Pixels de l'image de l'image du haut du module */ font-size: 0px; background: transparent url(images/boxes/tabletop.png) no-repeat; /* image du haut du module */ } div.middle { overflow:hidden; height: 100%; padding: 10px; background: transparent url(images/boxes/tablemid.png) repeat-y; /* image centrale du module */ } div.middle_bot { overflow:hidden; height: 10px; /* Hauteur en Pixels de l'image de l'image du haut du module */ font-size: 0px; background: transparent url(images/boxes/tablebot.png) no-repeat; /* image du bas du module */ } Pour les InfoBoxes une contribution Boxes Tableless & xHTML Strict est disponible sur le site U.S. : CSS Infoboxes La mise en page en xHTML est plus aisée pour les évolutions et le développement. Pour la présentation des produits ou les formulaires client, rien ne s'oppose à l'usage de tableaux. Le référencement n'étant pas impacté par ceux ci. au contraire, nativement osCommerce est très bien référencé par les moteurs de recherche (avec l'appui de certaines contributions comme Header Tag et Ultimate SEO). Code testé sur les navigateurs : Avant 11.7 Shiretoko 3.1 Opera 8.54 MSIE 7.0 Minefield 3.2 Firefox 3.1 Flock 2.0 K-Meleon 1.5.0 SeaMonkey 2.0 Safari 3.2.1 Chrome 1.0.154.65 Firefox 2.0.0.4 Firefox 1.5 K-Meleon 1.1.4 Opera 9.27 MSIE 5.5 Opera 9.26 Firefox 3.0.1 Opera 9.64 MSIE 8.0 Navigator 9.0.0.5 Opera 9.25 Opera 10.00 MSIE 6.0 .... Attention la validation en xHTML 1.1 c'est raide, il vaut mieux rester en transitionnal au début ... Ce message a été modifié par delete - 10 May 2009, 10:47. |
|
23 Apr 2009, 22:58
Message
#9
|
|
Ceinture noire OSC Groupe : Modérateurs Messages : 2908 Inscrit : 24-October 04 Lieu : Quimper ( Finistère ) Membre no 3567 |
selon moi, il ne faut surtout pas référencé des pages comme la création du compte client
-------------------- #mosaic {
autodidacte: max; derision: min; ms3: never; occupation: 9999; latitude : 48; longitude : -4.1; competent: none !important; } documentation MS2 / F.A.Q. / Contribes FR / Contribes US |
|
23 Apr 2009, 23:08
Message
#10
|
|
2eme dan OSC Groupe : Bannis Messages : 3022 Inscrit : 12-November 07 Lieu : Massilia Membre no 19718 |
Certes, je me suis mal exprimé ;
Les données tabulaires sont omniprésentes sous osC : Catégories Fabricants Products New Specials etc... Et même intégrées dans ce code, ce n'est pas un mal pour le référencement, beaucoup pensent le contraire ... A l'inverse, à mon sens, le JS pour faire de la gestion de (N.B.: navigation sur) pagination est plus pénalisant. Edit : Ceci dit je n'ai pas de Disallow sur les pages clients dans mon robots.txt et GG le comprend... no impact... Ce message a été modifié par delete - 23 Apr 2009, 23:21. |
|
7 Aug 2010, 19:29
Message
#11
|
|
Ceinture marron OSC Groupe : Membres Messages : 1665 Inscrit : 3-June 09 Membre no 25501 |
<span style='font-size:14pt;line-height:100%'>EN SAVOIR PLUS</span> I) Comment changer la couleur de fond d'une box en particulier : (par fissiaux) : a) Dans catalog/includes/classes/boxes.php avant le code (vers ligne 100): Code class infoBoxHeading extends tableBox { ajouter le code : Code class infoBox2 extends tableBox { function infoBox2($contents) { $info_box_contents = array(); $info_box_contents[] = array('text' => $this->infoBoxContents2($contents)); $this->table_cellpadding = '1'; $this->table_parameters = 'class="infoBox2"'; $this->tableBox($info_box_contents, true); } function infoBoxContents2($contents) { $this->table_cellpadding = '3'; $this->table_parameters = 'class="infoBoxContents_particularbox"'; $info_box_contents = array(); $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1'))); for ($i=0, $n=sizeof($contents); $i<$n; $i++) { $info_box_contents[] = array(array('align' => (isset($contents[$i]['align']) ? $contents[$i]['align'] : ''), 'form' => (isset($contents[$i]['form']) ? $contents[$i]['form'] : ''), 'params' => 'class="boxText"', 'text' => (isset($contents[$i]['text']) ? $contents[$i]['text'] : ''))); } $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1'))); return $this->tableBox($info_box_contents); } } vous remarquerez les ajouts des 2, pour modifier les nom des classes et des fonctions (indispensable). et la modif de $this->table_parameters pour les 2 fcts. b)puis aller dans includes/boxes/la boxe que tu veux modifier.php : trouver le code : Code new infoBox($info_box_contents, infoBoxContents); remplacer par : Code new infoBox2($info_box_contents, infoBoxContents_particularbox); c)et finallement, aller dans stylesheet.css : et ajouter à la fin : Code .infoBox2 { background: #?????; } .infoBoxContents_particularbox { background: #??????; font-family: Verdana, Arial, sans-serif; font-size: 10px; } remplacez les '?' par vos valeurs hexadecimales... et voila c'est fait. En même temps, tout ça reste très statique ... Les function de php permettent de recevoir une liste de paramètre variable. Ce qui donne pour un changement de la $class infoBoxHeading : Code class infoBoxHeading extends tableBox { function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) { $getclass = func_get_args(); foreach($getclass as $name => $value) { if( (gettype($value) == "array") && (current(array_keys($value[0])) == "class")) $class = current(array_values($value[0])); else $class = "infoBoxHeading"; } $this->table_cellpadding = '0'; if ($left_corner == true) { $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif'); } else { $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif'); } if ($right_arrow == true) { $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>'; } else { $right_arrow = ''; } if ($right_corner == true) { $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif'); } else { $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14'); } $info_box_contents = array(); $info_box_contents[] = array(array('params' => 'height="14" class="' . $class . '"', 'text' => $left_corner), array('params' => 'width="100%" height="14" class="' . $class . '"', 'text' => $contents[0]['text']), array('params' => 'height="14" class="' . $class . '" nowrap', 'text' => $right_corner)); $this->tableBox($info_box_contents, true); } } ce qui donne par exemple pour la boxe categories : Code .../... $info_box_contents = array(); $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES); $classheading[] = array('class' => "infoBoxHeadingCategories"); new infoBoxHeading($info_box_contents, true, false, $classheading ); .../... en rajoutant la class css infoBoxHeadingCategories au fichier stylesheet. Vu que le dernier paramètre est un tableau, on peut y passer autant d'info que l'on veut. Il n'est donc plus utile ensuite de faire des copier coller des class étendues. Celles dont les méthodes ne reçoivent pas les paramètres rajoutés dynamiquement héritent naturellement des class css génériques telle que infoBoxHeading, infobox, etc ... Bon, c'est mon point de vue, chacun fait comme il veut. |
|
Version bas débit | Nous sommes le : 10th April 2024 - 21:57 |
Ce site est déclaré auprès de la commision Nationale de l'Informatique et des Libertés (déclaration n°: 1043896) |