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

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> 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
 
xaglo
posté 12 May 2005, 19:55
Message #2


5eme dan OSC
Icône de groupe

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.
excl.gif Ne pas poser de questions dans ce topic excl.gif
Les messages sans rapport seront supprimés.

Bon courage wink.gif


--------------------
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
 
stepibou
posté 12 Jun 2005, 15:03
Message #3


Ceinture bleue OSC
Icône de groupe

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):
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.


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/
CODE
<?php
/*
Ma boxe qui affiche un gif
*/

?>
<!-- maboxe //-->
        <tr>
          <td>
<?php
  $info_box_contents = array();
  $info_box_contents[] = array('text' => BOX_HEADING_MABOXE);

  new infoBoxHeading($info_box_contents, false, false);

  $info_box_contents = array();
  $info_box_contents[] = array('align' => 'center',
                               'text' => BOX_INFORMATION_MABOXE .'<br /><a href="http://www.mon_lien.com"  target="blank">' . tep_image(DIR_WS_IMAGES . 'mon_image.gif' , BOX_COMMENTAIRE_MABOXE).  '</a>');

  new infoBox($info_box_contents);
?>
          </td>
        </tr>
<!-- maboxe_eof //-->

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 :
CODE
define('BOX_HEADING_MABOXE', 'mon titre');   // mon titre de la boxe
define('BOX_INFORMATION_MABOXE', 'Mon texte.'); // mon texte
define('BOX_COMMENTAIRE_MABOXE', 'commentaire');  // mon commentaire de l'image


c)Il ne te reste plus qu'à aller dans le fichier catalog/includes/column_right.php
pour rajouter à l'endroit où tu veux :
CODE
  include(DIR_WS_BOXES . 'maboxe.php');


bon code à tous!


--------------------
Go to the top of the page
 
JeanLuc
posté 6 Oct 2005, 15:25
Message #4


2eme dan OSC
Icône de groupe

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


--------------------
JeanLuc
Pour info: FAQ et doc pour MS1 - doc pour MS2
Go to the top of the page
 
nadelo
posté 26 May 2007, 18:16
Message #5


Ceinture verte OSC
Icône de groupe

Groupe : Membres
Messages : 676
Inscrit : 20-June 02
Lieu : world citizen
Membre no 253



Un petit tutoriel du jour sur secubos.com :

http://www.secuobs.com/news/17052007-oscommerce.shtml


--------------------
Ms2fr sur mesure
Go to the top of the page
 
delete
posté 21 Apr 2009, 23:02
Message #6


2eme dan OSC
Icône de groupe

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

Ce message a été modifié par delete - 23 Apr 2009, 22:46.
Raison de l'édition : message hors propos supprimé
Go to the top of the page
 
xaglo
posté 23 Apr 2009, 12:53
Message #7


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
 
delete
posté 23 Apr 2009, 22:41
Message #8


2eme dan OSC
Icône de groupe

Groupe : Bannis
Messages : 3022
Inscrit : 12-November 07
Lieu : Massilia
Membre no 19718



Citation (xaglo @ 23 Apr 2009, 13:53) *


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

Ce message a été modifié par delete - 10 May 2009, 10:47.
Go to the top of the page
 
mosaic
posté 23 Apr 2009, 22:58
Message #9


Ceinture noire OSC
Icône de groupe

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
Go to the top of the page
 
delete
posté 23 Apr 2009, 23:08
Message #10


2eme dan OSC
Icône de groupe

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.

wink.gif

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.
Go to the top of the page
 
FoxP2
posté 7 Aug 2010, 19:29
Message #11


Ceinture marron OSC
Icône de groupe

Groupe : Membres
Messages : 1665
Inscrit : 3-June 09
Membre no 25501



Citation (stepibou @ 12 Jun 2005, 15:03) *
<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. smile.gif
Go to the top of the page
 

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:03
Ce site est déclaré auprès de la commision Nationale
de l'Informatique et des Libertés (déclaration n°: 1043896)