Mon site est presque fini...besoin d'un coup de pouce pour quelques réglages du design

[CMMC]

Bonjour,

Voilà après quelques galères, j'ai un site "à peu près" propre.
Je suis resté sur la version 1.1.0.5 car avec les diverses versions impossible de récupérer ma base de données d'origine sans bug.

Malgré tout, j'ai encore des petits réglages à faire notamment sur la page d'accueil, je n'ai toujours pas trouvé où supprimé "l'espace blanc" du haut au dessus de l'image.

J'ai aussi des décalages sur le centre de la page tout se dérègle est je ne trouve pas la solution.

En fait à l'usage, je préferais avoir seulement deux colonnes une petite à gauche et celle du milieu donc d'enlever la colonne de droite.

Si une bonne âme...

[amaury]

Je suis resté sur la version 1.1.0.5 car avec les diverses versions impossible de récupérer ma base de données d'origine sans bug.

Comme je te comprend, j'ai un client avec cette version de Prestashop et il à près de 5000 produits, devoir tout exporter même avec des scripts à l'air vraiment compliqué ^^.

Malgré tout, j'ai encore des petits réglages à faire notamment sur la page d'accueil, je n'ai toujours pas trouvé où supprimé "l'espace blanc" du haut au dessus de l'image.

Pourrais-tu mieux définir ce problème ? En envoyant une adresse ou un screenshot ?

J'ai aussi des décalages sur le centre de la page tout se dérègle est je ne trouve pas la solution.

Là aussi faut être plus précis, ça peut se situer n'importe où !

En fait à l'usage, je préferais avoir seulement deux colonnes une petite à gauche et celle du milieu donc d'enlever la colonne de droite.

Ca, ça se corrige plus ou moins facilement. Pour régler ces problèmes, il te faudra surtout des connaissances en CSS...

[jeckyl]

Bonjour,

cela n'a rien à voire mais franchement j'ai eu du mal à trouver vos produit.
Les sous catégories ne sont pas bien alignées.
Pourquoi avoir fait des photos des couvertures de livre alors qu'un scan de celle-ci aurait donné un rendu plus intéressant et plus propre.

[CMMC]

jeckil :

Je suis d'accord sur la difficulté de trouver les produits. Cela dit en 1 an d'expérience maintenant, j'ai 90% des achats qui proviennent de liens extérieurs (moteurs, comparateurs, réseaux sociaux,...). J'ai essayé diverses accroches mais je trouvais que tout alourdissait l'interface, donc j'ai préféré apuré et en regardant bien on tombe assez rapidement sur les produits (accès catalogue, rechercher, plan du site).
Pour les images produits presque d'accord mais j'ai préféré l'aspect "amateur" du fait que je vends des produits d'occas'. J'avais fait du scan sur un ancien site mais en fait les gens venait copier les images et comme je ne voulais pas fermer le référencement sur les images en interdisant les upload, j'ai choisi une soluce qui rebuterai les "fainéants".
Pour l'alignement sous catégories si tu as une soluce je prends, j'ai un peu de mal avec tout cela comme je le disais dans le post !

[CMMC]

Amaury :

Pour le blanc du haut de site en fait j'ai viré la balise h1 (logo) dans header.tpl

Pour le déréglement des affichages centrales en fait je pense qu'en enlevant la colonne de droite cela va régler mes problèmes. J'ai enlevé le hook right dans le footer.tpl mais pas de changement (je vide le compil du smarty à chaque fois).

J'ai beaucoup de pages qui ont le même comportement comme sur la page my account (comme sur l'image) ou la ligne avec les étapes est sur ceux lignes et que les block d'identification passent l'un sur l'autre.

Effectivement il faut une connaissance du css mais avec le forum prestashop j'ai pu réglé 90% des "problèmes".

[amaury]

Ton image est un poil petit, mais chez moi, les blocs sont bien mis (Je partie que tu dois avoir un navigateur pas cool comme Internet Explorer ).

Quant au fil étape par étape, le texte est simplement trop long, pourquoi ne pas mettre "Frais de port" ?

[CMMC]

Amaury : En fait j'ai mis "Choix des frais de port à cette étape" car j'ai mis Colissimo par défaut et pour un livre à 2 euros çà fait cher à première vue donc j'explique que l'on peut choisir les frais de port plus loin. C'est un peu tiré par les cheveux mais d'expérience je sais que les frais de port c'est un point sensible alors j'en fait un peu des tonnes (tu as vu le module : estimation des frais de port c'est une vraie trouvaille de l'avoir mis là) !

C'est vrai j'ai internet explorer mais comme j'ai 75% de mes visiteurs avec "çà" je préfére monter le site pour un visuel IE. Maintenant que tu me le dis c'est vrai que des mises à jour Mozilla ont parfois "bouffer" des mises en page. Cela dit ce n'est pas trop important !

Maintenant mon souci c'est la colone à droite, ce vide me désespère !

Jeckyl : Tu as vu j'ai rajouté un block Promos ! Mais il a une forme un peu bizarre.

[amaury]

Pour cette histoire de frais de port, je l'aurai plutôt mis en rouge en dessous ou dans le haut du panier ou quelque chose comme ça, mais bref...

Donc c'est le vide à droite qui t'embète ? Fallais le dire avant, j'ai un truc qui va régler au moins 50% de tes soucis de positionnement, juste après la lligne 206 de ton global.css remplace la valeur width de 556px; à 775px;.
L'autre 50% du problème vient des fond de page des titres qui ne s'étirent pas, et donc, qui ne vont pas jusqu'au bout. Ca et la fiche produit qui ne s'étire pas non plus pour y remédier, tu peux étirer la partie droite en changeant la valeur width juste après la ligne 1747 de ton global.css de 233px; à 452px;

Bonne continuation !

[CMMC]

J'ai acheté un "Template" (bookstore) dans les 60 euros mais il est trop naze je me suis fait un peu avoir. Je pensais que cela allait enjoliver l'aspect mais c'était pire ! Pourtant sur le site de vente cela avait l'air bien ! En le travaillant peut-être qu'on peut arriver au final à quelque chose mais bon je trouve le thème prestashop d'origine plutôt clair.
Bon c'est vrai qu'en réduisant l'ensemble du site et en mettant une image en background il y aurait un autre aspect...plus convivial mais comme je fait cela en dilettante je compte mes investissements.

[CMMC]

Amaury : Quand je modifie les infos comme dans ton message dans le global.css du theme tout descend, ce qui était au centre s'aligne à gauche en dessous de my site is green.

[amaury]

Désolé pour ton achat :s

Sinon, pour les titres, il y a une solution simple, si tu met ceci pour les balise h2 (Ligne 159 du global.css)

h2 {
background:url("../img/title_bg.gif") no-repeat scroll center top transparent;
color:#374853;
font-size:1.1em;
font-weight:bold;
height:21px;
line-height:1.6em;
margin:0.5em auto;
padding-left:0.5em;
text-align:center;
text-transform:uppercase;
}

Tes titres seront centrés. Bref, j'espère t'avoir aidé

[amaury]

Amaury : Quand je modifie les infos comme dans ton message dans le global.css du theme tout descend, ce qui était au centre s'aligne à gauche en dessous de my site is green.

Fichu IE et ses marges doubles sur les floats. Je te conseille de baisser un peu les attributs witdh que je t'ai donné (Essaye par palier de 5px). Ca devrait revenir à la normal au bout de quelques essais.

[CMMC]

Amaury : cela a centré les titres des catégories, c'est çà ?

[amaury]

C'est sensé, oui

[CMMC]

Jeckyl : J'ai le block Promo il crée un bug avec le panier quand il est à gauche !

[CMMC]

Amaury : Il n'est pas possible de faire des colonnes en % (c'est peut-être de l'ancien ?) genre 80 % center et 20% left, je sais qu'on faisait çà avant en html

[amaury]

Si si, exemple : width:50%;

Je te donne les lignes où tu retrouve les endroits à changer dans le global.css :

left_column en ligne 201
center_column en ligne 206

pb-right-column en ligne 1722 (Il s'agit du coté gauche de la fiche produit, me demande pas pourquoi il s'appelle right, je sais pas) : Attention, c'est par rapport a la colonne centrale le pourcentage, 100% ici ne fait pas la largeur du site mais la largeur de la colonne centrale.
pb-left-column en ligne 1747 (Là encore, une inversion de sens, va savoir pourquoi)

C'est là où il faut principalement changer les largeurs avec la propriété width

[CMMC]

Effectivement quand je suis sur FireFox tout est OK.

Par contre sous IE dès que je modifie une dimension à gauche ou au centre le bloc central descend en dessous du dernier bloc à gauche.

J'ai ce comportement par défaut quand je veux afficher les bons de réduction (le block est trop grand il fait toute la largeur de la page).

[Jacques Biais]

Bonjour,
Sous Firefox, le site est décalé à gauche et il n'y a plus d'alignement dû je pense au css qui a certainement été modifié. Le div Page n'est pas configuré, ce qui explique ce décentrage et le décalage!

[CMMC]

Jacobis : Je ne pense pas que le site soit décalé sous FF c'est juste que je n'ai pas élargi les colonnes de gauche et du centre.

Pour le CSS j'ai remis le global.css d'origine et pas de changement.

Ce qui est bizarre c'est que cela n'apparait que sous IE sur la page order et discount sinon pas de problème ailleurs donc le DIV page n'a pas l'air concerné.

J'ai essayé de trouver une piste avec le Firebug d'IE (touche F12), j'ai quand même pu améliorer deux/trois petites choses mais au bout du compte pas mon problème sur la page order.

Je mets une copie écran car c'est quand même étrange que les polices soient beaucoup plus grosses (pourtant avec le debug c'est celle du body qui est prise en compte !

[Jacques Biais]

S'il y a un décalage c'est tout simplement que le container est absent!
J'ai regardé ton site avec Firebug et le #page n'est pas en place puisqu'il s'arrête au niveau du header.
Cela signifie que le fichier footer.tpl à été modifié ou altéré!

Il doit se présenter ainsi ( footer.tpl ):
========================================
{if !$content_only}


<!-- Right -->

{$HOOK_RIGHT_COLUMN}

<!-- Footer -->

{$HOOK_FOOTER}

{/if}
</body>
</html>
========================================
Vérifie avec le tien surtout au niveau du dernier car c'est lui qui ferme le #page.
Cela devrait fonctionner, sinon je ne sais pas!!!!
Bon courage

[CMMC]

J'ai le footer.tpl d'origine. Par contre jacobis sur ta page y a une balise en trop sur la ligne right (je l'ai rajouté - on ne sait jamais - mais cela ne change rien).

Le problème de mise en page intervient quand j'ajoute le produit dans le panier (en tout cas sous IE) et impossible de trouver où çà bug.

[Jacques Biais]

Bonjour,
Le modele de footer.tpl que j'ai donné concerne la version1.3.1 et il est conforme à l'original et le site s'affiche normalement, il ne correspond peut etre pas avec ta version.

En pièce jointe une copie d'écran de Firefox qui montre qu'avec un panier vide le décalage se produit.
A l'aide de 'Firebug' j'ai affecté à #page la valeur css suivante:

border: 1px solid #ff0000;

On voit nettement de le div page (en rouge) s'arrête au niveau du header .
Pour moi je suis pratiquement persuadé que la balise de fermeture de #page est inexistante!

Encore un fois le #page est le container de tous les éléments, CAD qu'ils les maintient dans l'espace "width" qui lui a été affecté.

Cordialement

[CMMC]

Effecttivement quand je vois ta copie d'écran c'est un peu le "bordel".
Je n'ai pas du tout la même vue sous firefox.

Franchement je ne vois pas d'où cela peut venir...

[jeckyl]

Cela vient du fait que l'écran de jacobis a une résolution plus grande et donc que le contenu de la page n'est pas centré mais calé à gauche.

[CMMC]

D'après Jacobis il y aurait une balise div qui fermerait l'id page au niveau du header impossible à trouver...

Jeckyl : oui c'est vrai que si Prestashop avait travaillé dès le début avec des CSS "élastiques" il y aurait plus de facilité mais reprendre tout le code de Prestashop c'est un boulot monstre (pour un modeste - dans tous les sens du terme ! - qui ne peut pas faire appel aux services de designer).

Est-ce qu'en mofidiant les float on peut tout centrer pour éviter ce grand vide à droite pour les grandes résolutions ?

[jeckyl]

il faut juste encadrer le contenu central dans une div et la figer en largeur.

[CMMC]

J'ai trouvé une

manquante dans le header effectivement cela a remis un peu d'aplomb l'ensemble mais toujours pas la page du panier.

Jeckyl : Juste encadrer le contenu central dans une div : ce n'est pas le cas avec center_column ?

[jeckyl]

il y a une clonne a gauche une à droite et celle du milieu, il faut encadrer tout cela d'une div à largeur fixe et des marge left et right auto

[CMMC]

Voilà ce que j'ai fait

dans le global.css j'ai créée cette ligne : #global { margin-left: auto; margin-right: auto; width: 980px;
}

dans le header j'ai mis

et dans le footer

c'est correct ?

je me rappelle qu'il y avait une astuce avec une largeur minimum et maximum et une histoire de pourcentage mais je ne sais pas si elle est compatible pour IE et FF

[Enduro]

Petite contribution pour ton site.

à la ligne de ton css: body#category #subcategories li {

Ajoute: float: left; height: 150px; width: 230px

Tes sous-catégories seront positionnées

[CMMC]

Merci Enduro

Pour ceux qui ne connaissent pas, je cherchais un site pour les aperçus de site en grandes résolutions (ils font aussi les petites : iphone et wii) : http://viewlike.us

Mon site commence à être bien optimisé : j'ai amélioré la vitesse de chargement et j'ai intégré mes articles à Google shopping.

Il y a encore des petits trucs à régler dans le script général (le site est sur une vieille version) mais je trouve mon score page speed correct !

[Enduro]

Y-a-pas de quoi !

Je ne connaissais pas Google shopping, çà a eu une influence sur tes ventes ou nombres de visites ?

J'ai regardé pour la vitesse de chargement des pages, c'est vrai qu'il est plus agréable pour un client de naviguer sur un site rapide et apparemment à ce que je viens de voir Google prends en compte ce critère pour le référencement ce que je ne savais pas.

Merci à toi également.

[CMMC]

Google shopping a eu une influence sur mes visites.
Ce que je sais c'est que mes articles sont indexés le lendemain de leur mise en ligne en déclarant le flux généré pour Google Shopping dans mes sitemap Google.
Pour la rapidité, Dreamhost a intégré mod_pagespeed d'Apache sur ces serveurs et cela a nettement amélioré la vitesse de chargement des pages.

[Enduro]

Je vais être un peu critique.

Pourquoi n'as tu pas gardé le thème d'origine ?

L'optimisation d'un site (chargement de pages ... ) est bien lorsque tu atteins un nombre de visites important.

Au vue des produits (livres anciens,...) que tu vends, tu t'adresse à une clientèle spécifique et je ne crois pas que tu es un nombre de visiteurs important donc l'optimisation de la vitesse de chargement n'est pas le critère que tu dois prendre en compte pour faire fonctionner ton site mais plutôt l'aspect visuel et la navigation pour la recherche produits.

Ton site devrait avoir un visuel dans l'ambiance du livre et avoir des couleurs apaisantes , ce qui n'est pas le cas. Je sais que c'est n'est pas simple à faire quand on n'a pas les bons outils mais tu peux trouver des thèmes pas trop chères et qui mettrons en valeur tes produits.

Il manque également un logo avec un nom accrocheur, important pour que tes clients se souviennent de ta boutique.