osCommerce France : Accueil Forum Portail osCommerce France Réponses aux questions Foire aux contributions

Bienvenue invité ( Connexion | Inscription )

> Bases de compréhension du design de la MS2
stepibou
posté 20 Apr 2005, 22:57
Message #1


Ceinture bleue OSC
Icône de groupe

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.
excl.gif 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);
  $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>'; ?>
remplacer sur les 2 lignes, les 2 variables SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT
par vos valeurs, de largeur et hauteur max.


arrow.gif 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.


--------------------
Go to the top of the page
 
 
Start new topic
Réponse(s)
xaglo
posté 23 Apr 2009, 12:53
Message #2


5eme dan OSC
Icône de groupe

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
Go to the top of the page
 

Les messages de ce sujet


Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



RSS Version bas débit Nous sommes le : 28th March 2024 - 09:08
Ce site est déclaré auprès de la commision Nationale
de l'Informatique et des Libertés (déclaration n°: 1043896)