Afficher une ligne d'image avec lien en page d'accueil

[mademoisellevoeux]

Bonjour,

 

J'essaye d'afficher une ligne de 5 images qui renverraient vers d'autres pages et placée sous le slider en page d'accueil.

 

Je tente d'utiliser la module configurateur de thème (j'utilise le thème par défaut PS 1.6.0.5). J'ai agrandi le slider en 1170 px puis re-greffé le module "configurateur de thème sur le hook "displayTopColomn".

 

Le problème est que les images se disposent en colonne sous le slider et non en ligne. Peux t on faire en sorte que les 5 images de 230px s’alignent correctement, en modifiant un css  du ThemeConfigurator peut être ?

 

Quelqu'un connait il un moyen peut être plus simple d'y arriver ?

 

Merci d'avance pour vos pistes.

 

Amitiés.

[mademoisellevoeux]

Personne n'a d'idée ?

 

C'est dommage que l'on ne puisse disposer d'un module à greffer sur un hook qui insérerait un bloc d'image avec lien et/ou du texte personnalisable.

 

Amitiés

[patriciaprovence]

Bonjour,

 

C'est possible... seulement le module considère chaque image comme les éléments d'une liste, d'où les "ul" et "li" présents dans les css du fichier hooks.css du module configurateur de thème.

 

Il suffit de transformer cette liste verticale en liste horizontale, comme on le ferait pour un menu.

Si vous ne l'avez pas encore fait, je vous conseille de faire une copie des css du module themeconfigurator situé à la racine de votre site et de placer cette copie dans votre thème : css --> modules --> themeconfigurator (ce dossier doit être inexistant et doit donc être créé, sauf si vous l'avez déjà fait.)

 

Dans le fichier hooks.css, il vous faut, dans les lignes en-dessous de "/* Top hook CSS */" :

 

Dans :

#htmlcontent_top {
    float: right;
    width: 33%;
    max-width: 391px;
    padding-left: 5px;
}

- changer le taux du % à width afin de ne pas limiter la largeur disponible pour les images ;  par exemple 90 %. (à vous de voir si vous voulez utiliser tout ou partie de la largeur du container.

- supprimer la ligne max-width: 391px;

Ce qui donne, dans l'essai que j'ai fait :

  #htmlcontent_top {
    float: right;
    width: 90%;
    padding-left: 5px;
}

Puis, dans :

  #htmlcontent_top ul li {
    width: 100%;
    margin-bottom: 10px; }

qui doit se trouver vers la ligne 37 :

- supprimer la ligne "width"

- la remplacer par "float: left;", pour obliger les images à se placer les unes à côté des autres et non en-dessous.

Ce qui donne :

  #htmlcontent_top ul li {
	float: left;
	margin-bottom: 10px;
}

Bien sûr, à vous de voir pour jouer sur les css du container pour placer votre "ligne" d'images.

 

Voilà, si je ne me suis pas trompée, cela devrait fonctionner. Cela fonctionne chez moi... avec des images qui n'étaient pas destinées à cela, donc de tailles différentes.

 

 

 

 

Patricia

 

 

[mademoisellevoeux]

Bonjour Patricia,

 

Merci beaucoup pour cette réponse détaillée, je vais la mettre en oeuvre.

 

Pour l'instant j'ai bidouillé avec l'éditeur de page d'accueil des insertions d'image sur une ligne et l'ai greffé sur le DisplayTopColumn sous le slider. Ça fonctionne mais ce module semble interférer avec le slider (bloqué sur la première image) et le menu horizontal (plus d'affichage des sous catégories).

En dé-greffant et re-greffant les 2 modules ça semble refonctionner.

 

Encore merci.

 

Bien à vous.