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. -------------------- |
|
21 Apr 2009, 23:02
Message
#2
|
|
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é
|
|
Version bas débit | Nous sommes le : 28th March 2024 - 21:35 |
Ce site est déclaré auprès de la commision Nationale de l'Informatique et des Libertés (déclaration n°: 1043896) |