Jump to content

carrousel d'images (slider) presta 1.5.2

frontaldusud
 Share

Recommended Posts

frontaldusud Newbie

frontaldusud

Posted
Posted

Bonjour,

je souhaite savoir comment fait-on pour mettre le carrousel integrer a presta 1.5.2 sur toute la largeur du site ?

Dans le module (configurer) les dimensions correspondent aux images, mais pas a la boite,

dans le css (modules/homeslider/bx-style.css), j'ai modifier sa hauteur, mais il n'y a rien sur la largeur, même en mettant un width, une aide SVP.

Sur le site, j'ai supprimer les blocs dans les colonnes de droite et gauche, il se cale a gauche, mais garde sa largeur de base.

merci

(débutant)

Link to comment
Share on other sites
mcberny Newbie

mcberny

Posted
Posted

Bonjour à tous,

 

Même problème pour moi :

2 jours que je cherche une solution...

Je suis désireux de réduire mon site à 2 colonnes (une petite à gauche et une large à droite).

Je crois y être arrivé en modifiant footer.tpl, comme ceci :

{if !$content_only}

</div>

 

<div id="right_column" class="column grid_2 omega">

</div>

</div>

 

<!-- Footer -->

<div id="footer" class="grid_9 alpha omega clearfix">

{$HOOK_FOOTER}

{if $PS_ALLOW_MOBILE_DEVICE}

<p class="center clearBoth"><a href="{$link->getPageLink('index', true)}?mobile_theme_ok">{l s='Browse the mobile site'}</a></p>

{/if}

</div>

</div>

{/if}

</body>

</html>

Je crains seulement que ce ne soit pas suffisant !

 

Par la suite impossible de modifier les modules qui ce situent dans la colonne de droite :

Homeslider et les produits phares.

Désinstallé avec suppression des tables liées, pour réinstallé par la suite, en modifiant le fichier php d'installation, çà ne fonctionne toujours pas... je ne sais plus quoi faire !!!

 

Quelqu'un a t'il une solution pour moi ?

Link to comment
Share on other sites
frontaldusud Newbie

frontaldusud

Posted
  • Author
Posted

Bien, n'ayant eu aucune réponse, j'ai fini par trouver une solution

Je vous donne l'info :

 

dans le dossier de son theme,

on colle le code dans le fichier HEADER.TPL

{if $page_name != 'index'}

<!-- ICI POUR CACHER LA COLONNE DE GAUCHE SUR LA PAGE ACCUEIL UNIQUEMENT-->

<!-- Left -->

<div id="left_column" class="column grid_2 alpha">

{$HOOK_LEFT_COLUMN}

</div>

{/if}

<!-- Center -->

<div id="center_column" class="largeur-980"> <!--ici on change la class (nom au choix) par default class=" grid_5" -->

{/if}

 

 

ensuite

on fait de même pour la colonne de droite dans le fichier FOOTER.TPL

{if $page_name != 'index'}

<!-- Right -->

.....

{/if}

 

ensuite

dans le fichier GLOBAL.CSS

on cree la class

.largeur-980{ width:980px; }

 

 

et on n'oublie pas dans le module du carroussel de bien mettre la même largeur soit dans mon exemple 980 px

 

et ça fonctionne...

  • Like 1
Link to comment
Share on other sites
le_rool Newbie

le_rool

Posted
Posted (edited)

Bonsoir, si cela fonctionne c'est bien, mais c'est pas professionnelle, c'est mieux d'aller modifier cette largeur dans le fichier css(bx_styles.css) qui se trouve dans le dossier du module appelé "homeslider".

 

Votre solution n'est vraiment pas un bon exemple :mellow:

 

Raoul CHEUDJIO

Développeur-Integrateur Prestashop

[email protected]

Edited by le_rool (see edit history)
  • Like 1
Link to comment
Share on other sites
frontaldusud Newbie

frontaldusud

Posted
  • Author
Posted

Oupsss, je viens de m'aperçevoir que j'ai déjà tester cela, (voir mon premier message, Je ne suis pas bien réveiller...), le width n'est pas pris en compte dans le css (bx_styles.css)

dans le css (modules/homeslider/bx-style.css), j'ai modifier sa hauteur, mais il n'y a rien sur la largeur, même en mettant un width, une aide SVP.

 

 

Je vais quand même tester de nouveau... si vous le dites c'est que cela doit fonctionner :mellow:

Link to comment
Share on other sites
le_rool Newbie

le_rool

Posted
Posted

voici un site site sur lequel ça fonctionne, et c'est moi qui l'est mis en place, j'ai juste modifier la largeur dans la config du module en backoffice et puis j'ai modifier la hauteur dans le fichier style.css.

 

http://test.ddm-boutique.com

 

Mais tu peux egalement le faire manuellement dans le fichier style.css en forçant la largeur pris en compte dans dans les selecteur suivant de style.css

 

.bx-wrapper {

 

 

width: ta_largeur !important;

}

 

et

 

 

 

.bx-wrapper {

 

 

width: ta_largeur !important

}

 

 

Avant, rassure toi que tu travaille en mode compilation, c'est à dire tu vas dans preferences->performances de ton back-office , tu force la compilation et tu désactives aussi le cache, pour que tes modifications soient prises en compte

 

Je reste disponible

  • Like 1
Link to comment
Share on other sites
  • 1 month later...
Pogo Newbie

Pogo

Posted
Posted (edited)

Je vois que frontaldusud n'a pas donné de retour sur la solution de le_rool. Je me permet donc de dire que je viens d'essayer en ajoutant l'attribut width. Ça fonctionne à condition de ne surtout pas oublier le !important afin que la largeur ne puisse pas être écrasée par la suite et c'est qui arrive malheureusement si l'on omet cet argument.

 

De plus, il faut ajouter le width également sur .bx-window, et pas seulement .bx-wrapper, c'est sûrement un copié/collé malheureux de la part de le_rool.

 

Attention : Noob question!

Maintenant, que j'ai modifié le CSS de ce module, imaginons que je fasse le même genre de choses pour mes autres modules (en fait, je compte bien le faire!). Que se passe-t-il le jour où je veux livrer dans mon environnement de production? Je dois me souvenir de tous les modules que j'ai modifié ou bien y-t-il une méthode plus fiable?

Edited by Pogo (see edit history)
  • Like 1
Link to comment
Share on other sites
Vinton Newbie

Vinton

Posted
Posted

Bonjour et bonne année à tous !

 

J'ai moi-même modifier mon slider en modifiant les tailles sur le back office, sur bx-styles.css mais aussi en modifiant .container_9 .grid_5 dans grid_prestashop.css. Cela a bien marché mais seul bémol : lorsque l'image change automatiquement au bout du temps défini, elle ne se décale pas assez. Ayant agrandi la largeur de 200px, l'image à l'air de se décaler que de 535px ce qui empêche l'image suivante de se centrée. Bizarrement lorsque je déclenche le défilement manuel (en cliquant sur les boutons), l'image se recadre.

 

Auriez-vous une idée pour résoudre ce problème ?

 

Merci d'avance,

 

Vinton

Link to comment
Share on other sites
Pogo Newbie

Pogo

Posted
Posted (edited)

Salut Vinton,

 

J'ai reproduit le même problème chez moi. En fait, j'avais le même problème que toi, mais sans le savoir car je n'avais qu'une seule image dans mon carrousel et lorsque j'ai ajouté la seconde (suite à votre post qui m'a intrigué), la seconde image s'est positionnée par dessus la première.

 

Ma solution consiste à regarder avec un debuggeur le HTML et le CSS, là on voit que le carrousel est en fait une liste HTML : 

<ul id="homeslider"

dont les puces ont une valeur par défaut 

<li width="535px"

 

En ce qui me concerne, je souhaite ammener mon caroussel à 979px donc, je dis dans mon bx-styles.css que je veut que les puces de la liste du carrousel fassent 979px de large :

ul#homeslider li {width: 979px;}

 

Par contre, je ne comprend pas pourquoi tu as touché à d'autres classes : .container_9 et .grid_5, pourquoi les as-tu modifié? A quoi correspondent ces classes? Où se trouve grid_prestashop.css? Je n'ai pas ce fichier dans le module homeslider.

Edited by Pogo (see edit history)
Link to comment
Share on other sites
Vinton Newbie

Vinton

Posted
Posted (edited)

Salut Pogo et merci beaucoup pour ta réponse qui marche parfaitement.

 

Pour ce qui est de grid_prestashop.css, il se trouve dans themes/default/css. La classe .countainer_9 sert à délimiter la largeur maximale de ta page et la classe .grid_5 sert à délimiter la largeur de toute la colonne centrale.

Le tout m'a permis de pouvoir élargir mon carrousel d'images tout en gardant l'affichage des blocks en trois colonnes.

Edited by Vinton (see edit history)
Link to comment
Share on other sites
Vinton Newbie

Vinton

Posted
Posted

Erreur !

 

Je viens de m'apercevoir que si on dézoom sur notre navigateur, le problème d'affichage des images revient. Je m'interroge donc sur l'affichage du slider que pourrait avoir quelqu'un qui n'a pas le même écran que moi et comment y remédier...

Link to comment
Share on other sites
  • 4 weeks later...
frontaldusud Newbie

frontaldusud

Posted
  • Author
Posted

Bonjour,

je viens d'installer la dernière version 1531 et j'ai pu tester vos explications ci-dessus (pas eu le temps avant, désolé), sans changer les valeurs des grid et container

et cela fonctionne très bien même en jouant avec le zoom du navigateur (pour moi firefox).

je refait un point de l'ensemble afin de clarifier :

 

Dans le fichier bx_styles.css je modifie la largeur (ici je le transforme sur la colonne centrale + celle de droite)

 

.bx-window{margin-bottom:20px;width:756px!important;}

 

.bx-wrapper{margin-bottom:20px; height:300px;width:756px!important;}

 

ul#homeslider li {width: 756px!important;}

 

 

Dans le back office

dans le module homeslider mettre la largeur identique au css

ici 756 px

 

Importer des images au bon format si possible sinon elle seront déformer

 

Pour les blocs de droite Right column blocks

ne pas oublier dans Modules>positions>modifier

d'ajouter en

Exceptions : la page ou ne s'affichera pas les blocs positionner sur les autres pages dans la colonne de droite

par exemple index pour la page d'accueil.

 

Voila, encore merci a ceux qui ont participer a ce post et qui m'ont aider a résoudre ce soucis. :D

  • Like 1
Link to comment
Share on other sites
  • 1 month later...
dederem Newbie

dederem

Posted
Posted

Bonjour à tous ! Je découvre le monde prestashop. Jusque là, je ne faisais que de l'ajout de produit mais depuis peu j'ai décidé de mettre les mains dans le cambouis. Ce topic m'a été très utile, je remercie tous les participants.

 

Mais j'ai une petit question qui subsiste.

 

Tom56, tu as demandé ça :

 

Par contre pour c il faut le mettre dans le fichier bx_styles.css ?

 

Et moi je rajouterai à cette question, où l'ajouter exactement dans le css ? Je suis avec mon textwrangler, mes lignes de codes. J'ai modifié les largeurs sans problème. Seulement il y a ces images qui se chevauchent. En tant que déb profond en développement web, je ne sais pas où et comment ajouter cette ligne de code ul#homeslider li {width: 756px!important;}

 

Merci pour votre aide.

Link to comment
Share on other sites
dederem Newbie

dederem

Posted
Posted

J'attendais impatiemment une réponse... mais je continuais de chercher dans mon coin où placer cette fameuse ligne de code dans bx_styles.css.

 

Et j'ai finalement trouvé. Donc si quelqu'un comme moi se demande, je l'ai ajouté de la sorte :

 

.bx-window {margin-bottom:20px;width:980px!important}

.bx-wrapper {

margin-bottom:20px;

height:370px;

width: 980px!important;

}

ul#homeslider li {width: 980px!important;}

 

 

Et ça marche !!!

  • Like 1
Link to comment
Share on other sites
  • 3 weeks later...
frontaldusud Newbie

frontaldusud

Posted
  • Author
Posted

Bonjour

dans le post (19) de ce topic je donne la solution complete, a partir des infos des discussions du 1 au 18, je vous la remet ci-dessous : :blink:

 

Dans le fichier bx_styles.css je modifie la largeur (ici je le transforme sur la colonne centrale + celle de droite)

 

.bx-window{margin-bottom:20px;width:756px!important;}

.bx-wrapper{margin-bottom:20px; height:300px;width:756px!important;}

ul#homeslider li {width: 756px!important;}

 

 

Dans le back office

dans le module homeslider mettre la largeur identique au css

ici 756 px

 

Importer des images au bon format si possible sinon elle seront déformer

 

Pour les blocs de droite Right column blocks

ne pas oublier dans Modules>positions>modifier

d'ajouter en

Exceptions : la page ou ne s'affichera pas les blocs positionner sur les autres pages dans la colonne de droite

par exemple index pour la page d'accueil.

Link to comment
Share on other sites
  • 1 month later...
flade Newbie

flade

Posted
Posted

Je reviens sur ce problème de slider.... j'avoue que j'ai du mal....

Pour le fichier bx_style.css j'ai changé:

.bx-window{margin-bottom:20px;width:980px !important;}

.bx-wrapper{margin-bottom:20px;height:300px;width:980px !important;}

ul#homeslider li {width: 980px !important;}

Dans le back office j'ai modifié la largeur du slider a 980px

Le module slider est positionné avec le homepagecontent dans la backoffice

Donc le slider semble avoir la bonne taille mais reste bloqué sur la marge de la 2 eme colonne. Je souhaite garder mes 3 colonnes en dessous du slider.

Si je descends les colonnes sur le global.css :

 

#page {}

#header {z-index:10}

#columns {z-index:1}

#left_column {top:350px}

#center_column {}

#right_column {top:350px}

#footer {}

l'espace se créé mais le slider reste toujours bloqué.

Un peu d'aide svp :/

Je suis en local, site accessible sur akazuki.no-ip.org

Prestashop 1.5.4.1

Link to comment
Share on other sites
  • 4 months later...
  • 3 months later...
stefart Newbie

stefart

Posted
Posted (edited)

Bonjour,

Pour moi aussi le carrousel reste bloqué au milieu. Je n'arrive pas a lui faire prendre toute la largeur de id=columns

même avec les instruction de fontaldusud ca ne marche pas.

Le carrousel en positionné dans id=center_column et il refuse de se mettre a gauche.

Il y a une solution pour qu'il soit entièrement centré ?

 

merci de vos réponses.

Edited by stefart (see edit history)
Link to comment
Share on other sites
stefart Newbie

stefart

Posted
Posted
Dans bx_styles.css j'ai ajouté :
.bx-window{margin-bottom:20px;width:906px!important;}
.bx-wrapper{margin-bottom:20px; height:300px;width:906px!important;}
ul#homeslider li {width:906px!important;}
 

 

et dans global.css j'ai ajouté :

#columns {padding:12px 10px 10px;z-index:1}
#left_column {top:320px}
#center_column {}
#right_column {top:320px}
Link to comment
Share on other sites
  • 1 year later...
ionelgo Newbie

ionelgo

Posted
Posted (edited)

Bonjour,
Jai un problème avec mon homeslider.

Les boutons de navigation (suivant et précédent) sont décalés vers le bas au lieu d'etre sur les images, je n'arrive pas à les repositionnées alors j'ai décidé de les supprimés mais sans succès.... merci de jeté un coup d'oeil à la page d'accueil http://www.touscheznous.com/

Merci 

Edited by ionelgo (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...