Version imprimable du sujet

Cliquez ici pour voir ce sujet dans son format original

Forum osCommerce-fr _ Installation - fonctionnement _ Augmenter la largeur des box

Écrit par : gaya_102 30 Dec 2010, 21:45

Bonjour

voila je suis en train de lire la FAQ
Je voudrais augmenter la largeur des box
Il en parle la
http://www.oscommerce-fr.info/faq/qa_info.php?qID=56

Le problème c'est que je ne trouve pas du tout la ligne ou faire la modification. J'ai vu que la page date de 2004. Ca a peut etre changé. ESt ce que quelqu'un sais ou c'est maintenant

Merci de votre aide

Écrit par : chti_poupon 31 Dec 2010, 09:52

Bonjour !
into my version it's in english:

Code
// customization for the design layout
  define('BOX_WIDTH', 125); // how wide the boxes should be in pixels (default: 125)

but into the same place !
Enjoy !
Chti poupon
PS : version OsC ???

Écrit par : gaya_102 31 Dec 2010, 12:28

Merci pour ta réponse. Par contre c'est dans quel fichier que je dois faire la modification.

J'ai la version 2.3

Merci de ton aide

Écrit par : chti_poupon 31 Dec 2010, 18:06

Merci de transférer/reposer la question dans la partie MS2.3
Ma réponse est pour MS 2.2.
Chti poupon

Écrit par : gaya_102 1 Jan 2011, 09:14

ok merci quand même smile.gif

Écrit par : FoxP2 2 Jan 2011, 17:50

hyper simple à effectuer.
lors de la première mouture, harald avait rigidifié un peu trop le template à mon goût. donc la http://forums.oscommerce.com/tracker/issue-104-suggestion-for-template/ que je lui ai remonté dans le bug report a été mise en place dans la version release.

c'est donc la classe catalog/includes/classes/osc_template.php qui gère les dimensions de ta boutique, et en particulier ces 3 paramètres :

Code
    var $_grid_container_width = 24;
    var $_grid_content_width = 16;
    var $_grid_column_width = 4;

le premier définie le nombre de colonne (*30px + 5px de margin à gauche et à droite) pour la grille.(960px en tout)
le deuxième définie le nombre de colonne pour le contenu entre la colonne de gauche et de droite (630px)
le troisième définie le nombre de colonne pour la colonne de gauche et de droite. (chacune ayant une largeur de 150px)

en élargissant $_grid_column_width à 5, tes colonnes passent à 190px, mais il te faudra d'autant diminuer la taille du conteneur central, donc $_grid_content_width à 14 afin que 5*2+14=24 (le conteneur '$_grid_container_width)

maintenant, si tu te trouves un peu trop à l'étroit dans ta boutique, tu peux changer le code avec celui-ci (1200px de large sans margin) :
Code
.container_24{margin-left:auto;margin-right:auto;width:1200px}.alpha{margin-left:0!important}.omega{margin-right:0!important}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.g
rid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16,.grid_17,.gr
id_18,.grid_19,.grid_20,.grid_21,.grid_22,.grid_23,.grid_24{display:inline;float:left;position:relative;margin-left:.0px;margin-right:.0px}.container_24 .grid_1{width:50px}.container_24 .grid_2{width:100px}.container_24 .grid_3{width:150px}.container_24 .grid_4{width:200px}.container_24 .grid_5{width:250px}.container_24 .grid_6{width:300px}.container_24 .grid_7{width:350px}.container_24 .grid_8{width:400px}.container_24 .grid_9{width:450px}.container_24 .grid_10{width:500px}.container_24 .grid_11{width:550px}.container_24 .grid_12{width:600px}.container_24 .grid_13{width:650px}.container_24 .grid_14{width:700px}.container_24 .grid_15{width:750px}.container_24 .grid_16{width:800px}.container_24 .grid_17{width:850px}.container_24 .grid_18{width:900px}.container_24 .grid_19{width:950px}.container_24 .grid_20{width:1000px}.container_24 .grid_21{width:1050px}.container_24 .grid_22{width:1100px}.container_24 .grid_23{width:1150px}.container_24 .grid_24{width:1200px}.container_24 .prefix_1{padding-left:50px}.container_24 .prefix_2{padding-left:100px}.container_24 .prefix_3{padding-left:150px}.container_24 .prefix_4{padding-left:200px}.container_24 .prefix_5{padding-left:250px}.container_24 .prefix_6{padding-left:300px}.container_24 .prefix_7{padding-left:350px}.container_24 .prefix_8{padding-left:400px}.container_24 .prefix_9{padding-left:450px}.container_24 .prefix_10{padding-left:500px}.container_24 .prefix_11{padding-left:550px}.container_24 .prefix_12{padding-left:600px}.container_24 .prefix_13{padding-left:650px}.container_24 .prefix_14{padding-left:700px}.container_24 .prefix_15{padding-left:750px}.container_24 .prefix_16{padding-left:800px}.container_24 .prefix_17{padding-left:850px}.container_24 .prefix_18{padding-left:900px}.container_24 .prefix_19{padding-left:950px}.container_24 .prefix_20{padding-left:1000px}.container_24 .prefix_21{padding-left:1050px}.container_24 .prefix_22{padding-left:1100px}.container_24 .prefix_23{padding-left:1150px}.container_24 .suffix_1{padding-right:50px}.container_24 .suffix_2{padding-right:100px}.container_24 .suffix_3{padding-right:150px}.container_24 .suffix_4{padding-right:200px}.container_24 .suffix_5{padding-right:250px}.container_24 .suffix_6{padding-right:300px}.container_24 .suffix_7{padding-right:350px}.container_24 .suffix_8{padding-right:400px}.container_24 .suffix_9{padding-right:450px}.container_24 .suffix_10{padding-right:500px}.container_24 .suffix_11{padding-right:550px}.container_24 .suffix_12{padding-right:600px}.container_24 .suffix_13{padding-right:650px}.container_24 .suffix_14{padding-right:700px}.container_24 .suffix_15{padding-right:750px}.container_24 .suffix_16{padding-right:800px}.container_24 .suffix_17{padding-right:850px}.container_24 .suffix_18{padding-right:900px}.container_24 .suffix_19{padding-right:950px}.container_24 .suffix_20{padding-right:1000px}.container_24 .suffix_21{padding-right:1050px}.container_24 .suffix_22{padding-right:1100px}.container_24 .suffix_23{padding-right:1150px}.container_24 .push_1{left:50px}.container_24 .push_2{left:100px}.container_24 .push_3{left:150px}.container_24 .push_4{left:200px}.container_24 .push_5{left:250px}.container_24 .push_6{left:300px}.container_24 .push_7{left:350px}.container_24 .push_8{left:400px}.container_24 .push_9{left:450px}.container_24 .push_10{left:500px}.container_24 .push_11{left:550px}.container_24 .push_12{left:600px}.container_24 .push_13{left:650px}.container_24 .push_14{left:700px}.container_24 .push_15{left:750px}.container_24 .push_16{left:800px}.container_24 .push_17{left:850px}.container_24 .push_18{left:900px}.container_24 .push_19{left:950px}.container_24 .push_20{left:1000px}.container_24 .push_21{left:1050px}.container_24 .push_22{left:1100px}.container_24 .push_23{left:1150px}.container_24 .pull_1{right:50px}.container_24 .pull_2{right:100px}.container_24 .pull_3{right:150px}.container_24 .pull_4{right:200px}.container_24 .pull_5{right:250px}.container_24 .pull_6{right:300px}.container_24 .pull_7{right:350px}.container_24 .pull_8{right:400px}.container_24 .pull_9{right:450px}.container_24 .pull_10{right:500px}.container_24 .pull_11{right:550px}.container_24 .pull_12{right:600px}.container_24 .pull_13{right:650px}.container_24 .pull_14{right:700px}.container_24 .pull_15{right:750px}.container_24 .pull_16{right:800px}.container_24 .pull_17{right:850px}.container_24 .pull_18{right:900px}.container_24 .pull_19{right:950px}.container_24 .pull_20{right:1000px}.container_24 .pull_21{right:1050px}.container_24 .pull_22{right:1100px}.container_24 .pull_23{right:1150px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}


ça remplace le fichier catalog/ext/960gs/960_24_col.css

Écrit par : gaya_102 2 Jan 2011, 21:15

Merci de ton aide. Demain j'essayerai.<BR><BR>ESt ce qu'en 1200 ca n'entrainerai pas un scrolling?<BR><BR>

Écrit par : tati75 4 Jan 2011, 10:27

bonjour à tous,

j'ai fais les modifications de FoxP2 mais comment garder les marges ?
c'est compliqué tout ça car tout est collé ensemble, je voulais aussi mettre une largeur générale de 1000px
mais du coup tout est décallé....
merci pour votre aide

tati75

Écrit par : FoxP2 4 Jan 2011, 19:19

passez par le layout generator: arrow.gif http://960ls.atomidata.com/
vous entrez vos valeurs
WIDTH (PX / FLUID) : largeur de la boutique.
COLUMNS (#) : nombre de colonne : par défaut, la boutique en a 24 (ça permet plus de précision dans le placement des éléments)
GUTTERS (PX / %) : espace entre chaque colonne (par défaut la boutique est à 5px)
clic sur <>code
votre gabarit est généré automatiquement.
y'a plus qu'a copié coller le code dans le fichier approprié.


dernier point : afin d'avoir des boutiques rapides, il est indispensable de faire maigrir certains fichiers (style .css et javascript)
il existe (entre autre) un programme développé par un mec de chez Yahoo qui s'en charge.
c'est gratos, c'est léger et c'est hyper simple pour s'en servir :
téléchargement : http://www.phpied.com/files/yuicd/ : y'a 3 versions dispo : Linux/Mac/Windows . pas d'installation requise, c'est du green software. dézippage, clic sur l'icone yuicd.exe, on drag and drop les fichiers à compresser. mine de rien, ça peut faire gagner pas mal de ko assez rapidement (et faire la différence avec une boutique similaire qui n'aurait pas mis au régime certaines données transitant sur le net avant d'être mise en cache dans le navigateur de client). Google prend en compte également la vitesse d'un site dans sa façon de classer les résultats.


Écrit par : med 6 Jan 2011, 15:43

Citation
passez par le layout generator: arrow.gif http://960ls.atomidata.com/
vous entrez vos valeurs
WIDTH (PX / FLUID) : largeur de la boutique.
COLUMNS (#) : nombre de colonne : par défaut, la boutique en a 24 (ça permet plus de précision dans le placement des éléments)
GUTTERS (PX / %) : espace entre chaque colonne (par défaut la boutique est à 5px)
clic sur <>code
votre gabarit est généré automatiquement.
y'a plus qu'a copié coller le code dans le fichier approprié.


dernier point : afin d'avoir des boutiques rapides, il est indispensable de faire maigrir certains fichiers (style .css et javascript)
il existe (entre autre) un programme développé par un mec de chez Yahoo qui s'en charge.
c'est gratos, c'est léger et c'est hyper simple pour s'en servir :
téléchargement : http://www.phpied.com/files/yuicd/ : y'a 3 versions dispo : Linux/Mac/Windows . pas d'installation requise, c'est du green software. dézippage, clic sur l'icone yuicd.exe, on drag and drop les fichiers à compresser. mine de rien, ça peut faire gagner pas mal de ko assez rapidement (et faire la différence avec une boutique similaire qui n'aurait pas mis au régime certaines données transitant sur le net avant d'être mise en cache dans le navigateur de client). Google prend en compte également la vitesse d'un site dans sa façon de classer les résultats.



Merci beaucoup de partager ces infos TRÈS utiles.

Écrit par : gaya_102 11 Jan 2011, 19:16

Merci pour ses informations car ca marche........... Merci beaucoup

Écrit par : BrigitteB 20 Nov 2011, 18:37

Bonjour,

Je suis allée dans atomidata.com et effectivement c'est très simple, mais dans quel fichier faut-il mettre le code stp ?
Merci ! smile.gif

Écrit par : FoxP2 22 Nov 2011, 17:52

Citation (BrigitteB @ 20 Nov 2011, 18:37) *
Bonjour,

Je suis allée dans atomidata.com et effectivement c'est très simple, mais dans quel fichier faut-il mettre le code stp ?
Merci ! smile.gif


Citation (FoxP2 @ 2 Jan 2011, 17:50) *
.../...

ça remplace le fichier catalog/ext/960gs/960_24_col.css



Écrit par : BrigitteB 23 Nov 2011, 10:09

J'avais fini par le trouver ! Mais merci quand même !!! smile.gif

Écrit par : scientoufik 19 Feb 2012, 19:52

Citation (tati75 @ 4 Jan 2011, 10:27) *
bonjour à tous,

j'ai fais les modifications de FoxP2 mais comment garder les marges ?
c'est compliqué tout ça car tout est collé ensemble, je voulais aussi mettre une largeur générale de 1000px
mais du coup tout est décallé....
merci pour votre aide

tati75


Bonjour FoxP2,

Peux tu nous en dire un peu plus sur cette astuce stp? Comment ca fonctionne exactement? J'ai essayé avec mon stylesheet.css ca m'a généré un fichier stylesheet-min.css compréssé à 30% ensuite que dois je faire? Je mets ce fichier stylesheet-min.css directement dans le repertoire catalog/ext/960gs/960_24_col.css ? Ne faut il pas le renommer en stylesheet.css avant?
Connais tu un outil pour tester le avant et apres? Merci d'avance.

Écrit par : fscalda 3 Oct 2013, 08:06

C'est pas gagné pour installer mon design ... concrètement, ça sert à quoi cette histoire de grille pour cette nouvelle version ?

Avec Firefox developpeur web, je tâtonne pour déplacer mes éléments. Si vous avez un moyen rapide d'obtenir pour un 990 px :

30px | 175px | 10px | 558px | 10px | 175px | 30px

Je suis preneur, car le déplacement des boites est super étrange.

Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)