Le succès du EVO6 imposait un site dédié : Le voici !

Tips / Astuces

Cette page de tips, propose des idées et plans de personnalisation de vos thèmes avec le EVO6.

Elle est essentiellement consacré à l’onglet de personnalisation avancé « CSS »  :

30

Header / bandeau

Personaliser le moteur de recherche

Plusieurs possibilité permette de personnaliser le moteur de recherche :

 

Voici un exemple de code qui

– Repositionne le blog moteur de recherche dans le header
– Change la couleur d’arrière plan du bloc

1
2
3
4
5
6
#search_block_top {
background: none repeat scroll 0 0 #FFFFFF;
padding: 10px;
position: absolute;
top: 35px;
}

Et ce code change entre autre la couleur du bouton rechercher :

1
2
3
4
5
6
7
#search_block_top .button {
background: none repeat scroll 0 0 #2DBCFF;
border: medium none;
border-radius: 3px 3px 3px 3px;
color: #000000;
text-transform: uppercase;
}

le résultat des 2 codes cumulés :

moteur

Faire des coins arrondi en CCS sur le header

Un petit tips pour arrondir les angles du bandeau du haut :

1
2
3
4
5
div#header {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

On peut également arrondir la page, y mettre un effet d’ombre et decaller le tout vers la bas :

1
2
3
4
5
6
7
#page {
box-shadow: 4px 4px 10px 4px  #000;
margin-top: 28px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

résultat tf058

100 Arrières plans / headers / Pied de page …etc en CSS3 pour le EVO6

Le CSS3 permet de nos jours de faire de très beau dégradés.

Ces dernier peuvent être utilisé pour le design de votre boutique en ligne prestashop.
L’un des avantages c’est que c’est plus léger a charger qu’un image.

Avec le EVO6 c’est vraiment facile, il suffit d’intégrer le CSS3 de votre dégradé dans l’onglet CSS du créator pour obtenir le résultat attendu.

Je vous fournios ici 100 exemple de code pour embélir votre boutique avec du CSS3.

 

>>> 100 CODE CSS3 ICI <<<

Obtenir un effet d’ombre sur le menu horizontal

– Testé sur la version EVO6 pour Prestashop 1.5  : OUI

– Testé sur la version EVO6 pour Prestashop 1.4 : Pas testé

 

Un petit tips pour obtenir un effet d’ombre sur le menu horizontal :

Dans l’oglet CSS voici le code CSS a saisir : (Vous pouvez le personnaliser) :

1
2
3
.sf-menu {
box-shadow: 4px 4px 10px 4px  #000;
}

Exemple de résultat : 

css ombre_menu

 

Retirer la bordure de sépartion des éléments du menu

Parfois pour un design plus affiné nous ne souhaitons pas afficher la petite bordure de séparation des éléments du menu horizontal. Voici un petit code CSS pour le EVO6 qui permet le retrait de la bordure :

1
2
3
4
.sf-menu li a {
border-right: 0px ;

}

Mettre le bandeau du haut transparent

Un astuce qui permet d’avoir un bandeau du haut totalement transparent.

Très utilise quant on veut confondre l’arrière plan du site avec le bandeau.

 

Code CSS à inssérer dans l’onglet CSS du EVO6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*  On enlève le background du corps de page  */

#page{
background:none;
}

/*  On enlève le background du bandeau du haut  */
div#header{
background:none;
}

/*  On ajoute une couleur d'arrière plan aux colonnes   */
#columns{
background-color:#fff;
}

Le resultat :

result

Mettre une image d’arrière plan dans le corps de page

– Testé sur la version EVO6 pour Prestashop 1.5  : OUI

– Testé sur la version EVO6 pour Prestashop 1.4 : Pas testé

 

Vous voulez une image d’arrière plan dans le corp de page  pour votre thème EVO6 :

1
2
3
#page {
background-image: url("http://urlde.votre/image.jpeg");
}

Changer la couleur des liens permanents du header

Code CSS à ajouter  et à personnaliser (ici exemple en blanc)

1
2
3
#header_links li a, a:active, a:visited {
color: #ffffff;
}

Menu

Changer la taille du texte du menu principal

On peut parfois vouloir diminuer (ou augmenter) la tailler des police de caractère du menu principal afin d’y insérer plus de catégorie.
Voici un code simple a insérer dans l’onglet CSS du EVO6 pour mettre le texte du menu en taille 11px

1
2
3
4
.sf-menu li a, .sf-menu li a:visited {
    font-size: 11px;

}

Une image d’arrière plan dans le menu

Un tips pour remplacer le dégradé du menu par une image personnalisé.

1) Via l’option d’upload image dans l’onglet CSS du EVO6 vous pouvez uploader votre image d’arrière plan de menu.

Puis ajouter ce code CSS dans l’onglet CSS de votre EVO6. (Pensez a personnaliser le code avec le nom de votre profil)

1
2
3
.sf-menu{
background: url("modules/ddlx_creator/img/VOTRE_PROFIL/VOTREIMAGE.png") no-repeat transparent;
}

Obtenir un effet d’ombre sur le menu horizontal

– Testé sur la version EVO6 pour Prestashop 1.5  : OUI

– Testé sur la version EVO6 pour Prestashop 1.4 : Pas testé

 

Un petit tips pour obtenir un effet d’ombre sur le menu horizontal :

Dans l’oglet CSS voici le code CSS a saisir : (Vous pouvez le personnaliser) :

1
2
3
.sf-menu {
box-shadow: 4px 4px 10px 4px  #000;
}

Exemple de résultat : 

css ombre_menu

 

Retirer la bordure de sépartion des éléments du menu

Parfois pour un design plus affiné nous ne souhaitons pas afficher la petite bordure de séparation des éléments du menu horizontal. Voici un petit code CSS pour le EVO6 qui permet le retrait de la bordure :

1
2
3
4
.sf-menu li a {
border-right: 0px ;

}

Produits phares

Ajouter un jolie effet d’ombre dans le module de produits phares

Un tips pour ajouter un jolie effet d’ombre dans le module de produits phares du EVO6.

1) Via l’option d’upload image dans l’onglet CSS du EVO6 vous pouvez uploader votre image.

En voici une qui convient bien :

ombre

(Click droit + enregistrer sous pour enregistrer l’image )

Puis ajouter ce code CSS dans l’onglet CSS de votre EVO6. (Pensez a personnaliser le code avec le nom de votre profil)

1
2
3
4
5
6
7
8
#featured-products_block_center li {
background: url("modules/ddlx_creator/img/VOTRE_PROFIL/ombre.png") no-repeat scroll center bottom transparent;
no-repeat scroll center bottom transparent;
border: medium none;
height: 220px;
margin: 0 10px 10px 0;
padding: 0 0 10px;
}

Exemple de résultats :

phares_ombre

Arrière plan

Superposer 2 fond d’écran avec le EVO6

Un petit tip très sympa qui  permet avec le EVO6 de superposer 2 image d’arrière plan pour votre thème prestashop.

Celà est très utile lorsque l’on veut par exemple positionner un « personnage » en arrière plan qui soit toujours en haut à droite alors que le resta de l’arrière plan lui est défilant.

Tout d’abord il vous faut préparer vos 2 images. Puis vous allez via l’onglet « CSS » du module EVO6 uplader chaque image dans votre profil.

upload

Ensuite voici un exemple de code a insérer dans la section CSS du evo 6

1
2
3
4
5
6
7
8
9
10
11
12
html body {

/* Affichage des images  */
background-image: url("modules/ddlx_creator/img/NOM_DE_VOTRE_PROFIL/Votre_IMAGE_1.png"),url("modules/ddlx_creator/img/NOM_DE_VOTRE_PROFIL/Votre_IMAGE_2.png");
/* Position des images  (a vous de personnaliser) */
background-position:  left top, center top;
/* répétition des images  (a vous de personnaliser) */
background-repeat: no-repeat, repeat;
/* deffillement des images  (a vous de personnaliser) */
background-attachment: scroll, fixed;

}

Faire un fond coloré sur la fiche produit

Un tips qui peut être sympas notamment lorsqu’on choisi de mettre le corps de page transparent

1
2
3
4
5
6
7
8
9
10
/*  Fiche produit ici fond blanc */
#primary_block {
background: #ffffff;
padding:10px;
}

/*  On retire la bordure sur les images */
#pb-right-column #image-block img {
border: 0 solid #CDCDCD;
}

exemple de résultat

cadre_fiche produit

100 Arrières plans / headers / Pied de page …etc en CSS3 pour le EVO6

Le CSS3 permet de nos jours de faire de très beau dégradés.

Ces dernier peuvent être utilisé pour le design de votre boutique en ligne prestashop.
L’un des avantages c’est que c’est plus léger a charger qu’un image.

Avec le EVO6 c’est vraiment facile, il suffit d’intégrer le CSS3 de votre dégradé dans l’onglet CSS du créator pour obtenir le résultat attendu.

Je vous fournios ici 100 exemple de code pour embélir votre boutique avec du CSS3.

 

>>> 100 CODE CSS3 ICI <<<

Page

Astuce : Pas de colonne en page d’accueil

Un tips intérréssant qui permet de ne pas afficher de colonne en page d’accueil du site.

  • Testé sur EVO6 prestashop 1.5
  • Non testé sur EVO6 prestashop 1.4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#index #left_column {
display:none;
}

#index #right_column {
display:none;
}

#index  .container_9 .grid_5 {
width: 980px;
}

.boxgrid {
width: 215px;
margin-left: 31px;
}

#featured-products_block_center li {
background: transparent;
}

 

résultat :

evo6dm393

Superposer 2 fond d’écran avec le EVO6

Un petit tip très sympa qui  permet avec le EVO6 de superposer 2 image d’arrière plan pour votre thème prestashop.

Celà est très utile lorsque l’on veut par exemple positionner un « personnage » en arrière plan qui soit toujours en haut à droite alors que le resta de l’arrière plan lui est défilant.

Tout d’abord il vous faut préparer vos 2 images. Puis vous allez via l’onglet « CSS » du module EVO6 uplader chaque image dans votre profil.

upload

Ensuite voici un exemple de code a insérer dans la section CSS du evo 6

1
2
3
4
5
6
7
8
9
10
11
12
html body {

/* Affichage des images  */
background-image: url("modules/ddlx_creator/img/NOM_DE_VOTRE_PROFIL/Votre_IMAGE_1.png"),url("modules/ddlx_creator/img/NOM_DE_VOTRE_PROFIL/Votre_IMAGE_2.png");
/* Position des images  (a vous de personnaliser) */
background-position:  left top, center top;
/* répétition des images  (a vous de personnaliser) */
background-repeat: no-repeat, repeat;
/* deffillement des images  (a vous de personnaliser) */
background-attachment: scroll, fixed;

}

Ajouter un effet d’ombre sur le corps de page

Un petit tip pour mettre un effet d’ombre sur le corp de page de votre boutique prestashop EVO6

– Testé sur la version EVO6 pour Prestashop 1.5  : OUI

– Testé sur la version EVO6 pour Prestashop 1.4 : Pas tésté

1
2
3
#page {
box-shadow: 4px 4px 10px   #000;
}

Résultat :

effet_ombre

Mettre une image d’arrière plan dans le corps de page

– Testé sur la version EVO6 pour Prestashop 1.5  : OUI

– Testé sur la version EVO6 pour Prestashop 1.4 : Pas testé

 

Vous voulez une image d’arrière plan dans le corp de page  pour votre thème EVO6 :

1
2
3
#page {
background-image: url("http://urlde.votre/image.jpeg");
}

Listes produits

Ajouter une bordure au liste produits

Un petit tips qui permet d’ajouter une bordure au liste produit.

Dans cet exemple on met une bordure de 1 pixel de couleur rose avec un effet coin arrondi.

1
2
3
4
#product_list li {
border: 1px solid #9B1A57;
border-radius: 3px 3px 3px 3px;
}

Changer la couleur des bouton :

changer la couleur des bouton :

Voici un code qui permet de changer la couleur et la bordure de l’ensemble des bouton du EVO6

1
2
3
4
input.button_mini, input.button_small, input.button, input.button_large, input.button_mini_disabled, input.button_small_disabled, input.button_disabled, input.button_large_disabled, input.exclusive_mini, input.exclusive_small, input.exclusive, input.exclusive_large, input.exclusive_mini_disabled, input.exclusive_small_disabled, input.exclusive_disabled, input.exclusive_large_disabled, a.button_mini, a.button_small, a.button, a.button_large, a.exclusive_mini, a.exclusive_small, a.exclusive, a.exclusive_large, span.button_mini, span.button_small, span.button, span.button_large, span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large, span.exclusive_large_disabled {
background: #5B7769;
border: 1px solid #F0F0F0;
}

Ne pas afficher les images miniatures des sous catégories :

Tip pour ne pas afficher les images miniatures des sous catégories :

 

1
2
3
4
5
6
/*  On n'affiche pas les image des sous catégorie  */
.inline_list li .img {
display: none;
float: left;
margin-right: 15px;
}

Retirer la comparaison sur les listes produit

La comparaison des produit ne vous intéresse pas, voici un tips pour supprimer l’affichage des élément de comparaisons sur les liste produit

1
2
3
4
5
6
7
8
/*  On retire la comparaison */
#product_list li p.compare input {
display:none;
}

.sortPagiBar #bt_compare {
display:none;
}

100 Arrières plans / headers / Pied de page …etc en CSS3 pour le EVO6

Le CSS3 permet de nos jours de faire de très beau dégradés.

Ces dernier peuvent être utilisé pour le design de votre boutique en ligne prestashop.
L’un des avantages c’est que c’est plus léger a charger qu’un image.

Avec le EVO6 c’est vraiment facile, il suffit d’intégrer le CSS3 de votre dégradé dans l’onglet CSS du créator pour obtenir le résultat attendu.

Je vous fournios ici 100 exemple de code pour embélir votre boutique avec du CSS3.

 

>>> 100 CODE CSS3 ICI <<<

Afficher les listes produits en grille (Plusieurs par ligne)

Ce tip CSS permet via le EVO6 d’afficher vos listes produits en grille avec 2 par ligne.

– Testé sur la version EVO6 pour Prestashop 1.5  : OUI

– Testé sur la version EVO6 pour Prestashop 1.4 : Pas tésté

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
ul#product_list li {
float: left;
height: 310px;
margin: 5px;
width: 325px;
}

#product_list li p.product_desc, #product_list li p.product_desc a {
color: #252525;
min-height: 75px;
padding-top: 10px;
width: 320px;
}

#product_list li .center_block {
float: left;
padding: 0 7px;
width: 320px;
border-right: 0px;
}

#product_list li .left_block {
padding-top:0px;
}

#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
position:absolute;
top:-15px;
right:-50px;
}

#product_list li .content_price {
margin: -10px 0 5px 5px;
text-align:left;
}

 

Le résultat :

grid

Fiche produit

Faire un fond coloré sur la fiche produit

Un tips qui peut être sympas notamment lorsqu’on choisi de mettre le corps de page transparent

1
2
3
4
5
6
7
8
9
10
/*  Fiche produit ici fond blanc */
#primary_block {
background: #ffffff;
padding:10px;
}

/*  On retire la bordure sur les images */
#pb-right-column #image-block img {
border: 0 solid #CDCDCD;
}

exemple de résultat

cadre_fiche produit

Moteur de recherche

Personaliser le moteur de recherche

Plusieurs possibilité permette de personnaliser le moteur de recherche :

 

Voici un exemple de code qui

– Repositionne le blog moteur de recherche dans le header
– Change la couleur d’arrière plan du bloc

1
2
3
4
5
6
#search_block_top {
background: none repeat scroll 0 0 #FFFFFF;
padding: 10px;
position: absolute;
top: 35px;
}

Et ce code change entre autre la couleur du bouton rechercher :

1
2
3
4
5
6
7
#search_block_top .button {
background: none repeat scroll 0 0 #2DBCFF;
border: medium none;
border-radius: 3px 3px 3px 3px;
color: #000000;
text-transform: uppercase;
}

le résultat des 2 codes cumulés :

moteur

Retirer le moteur de recherche du header

Pour retirer le moteur de recherche du bandeau du haut.

1) Se rendre dans l’onglet : Modules/position

2 ) Chercher le point de greffe :  « top of page »

3) Suprimer le module : Bloc recherche rapide  du point de greffe

Celà permet de retirer le module du header sans le désactiver (cela cause des problème d’affichage si on le désactive)

Colonnes

Une bordure sur les bloc dans les colonnes

Ce petit tip vous permet d’ajouter une bordure sur les bloc latéraux.

bordure_css

(Code a insérer dans l’onglet CSS du EVO6)

1
2
3
4
5
#right_column .block, #left_column .block {
border: 1px solid #7D0120;
border-radius: 3px 3px 3px 3px;
margin-bottom: 20px;
}

Astuce : Pas de colonne en page d’accueil

Un tips intérréssant qui permet de ne pas afficher de colonne en page d’accueil du site.

  • Testé sur EVO6 prestashop 1.5
  • Non testé sur EVO6 prestashop 1.4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#index #left_column {
display:none;
}

#index #right_column {
display:none;
}

#index  .container_9 .grid_5 {
width: 980px;
}

.boxgrid {
width: 215px;
margin-left: 31px;
}

#featured-products_block_center li {
background: transparent;
}

 

résultat :

evo6dm393

Center le titre des en-tête de bloc

Un petit code CSS pour le EVO6 qui permet de center le texte des entête des bloc latéraux

[cc lang= »css »}

.block .title_block, .block h4 {
text-align: center;
}
[/cc]

 

résultat :

texte_centre

Effet d’ombre dur la bordure des colonne

Ajouter un effet d’ombre en bordure des collones :

 

1
2
3
4
5
/*  Effet d'ombre dur la  bordure des colonne  */
#right_column .block, #left_column .block {
box-shadow: 0 0 3px #AAAAAA;
margin-bottom: 15px;
}

100 Arrières plans / headers / Pied de page …etc en CSS3 pour le EVO6

Le CSS3 permet de nos jours de faire de très beau dégradés.

Ces dernier peuvent être utilisé pour le design de votre boutique en ligne prestashop.
L’un des avantages c’est que c’est plus léger a charger qu’un image.

Avec le EVO6 c’est vraiment facile, il suffit d’intégrer le CSS3 de votre dégradé dans l’onglet CSS du créator pour obtenir le résultat attendu.

Je vous fournios ici 100 exemple de code pour embélir votre boutique avec du CSS3.

 

>>> 100 CODE CSS3 ICI <<<

Faire un cadre autour de la colonne …

– Testé sur la version EVO6 pour Prestashop 1.5  : OUI

– Testé sur la version EVO6 pour Prestashop 1.4 : Pas testé

 

Voici un petit code que j’ai utilisé pour personnaliser la boutique d’un client.

– Il me fallait créer un cadre gris autour de la colonne de gauche et autour des produit phares

– J’ai également redimensionné la colonne centrale pour optimiser l’affichage

1
2
3
4
5
6
7
8
9
10
11
12
13
#left_column {
border: 4px solid #ECECEC;
padding: 4px;
margin: 15px 0 0 0;
}

#center_column {
margin: 15px 5px 10px;
}

#featured-products_block_center {
border: 4px solid #ECECEC;
}

 

Le résultats en image :

cadre1

=============cadre2

Pied de page

Ajouter un effet d’ombre sur le footer

1
2
3
4
5
/*  effet d'ombre sur footer  */
#footer {
margin-top:25px;
box-shadow: 0 0 4px #000;
}

 

Exemple de résultat

effet_ombre_footer

100 Arrières plans / headers / Pied de page …etc en CSS3 pour le EVO6

Le CSS3 permet de nos jours de faire de très beau dégradés.

Ces dernier peuvent être utilisé pour le design de votre boutique en ligne prestashop.
L’un des avantages c’est que c’est plus léger a charger qu’un image.

Avec le EVO6 c’est vraiment facile, il suffit d’intégrer le CSS3 de votre dégradé dans l’onglet CSS du créator pour obtenir le résultat attendu.

Je vous fournios ici 100 exemple de code pour embélir votre boutique avec du CSS3.

 

>>> 100 CODE CSS3 ICI <<<

Divers

Modiffier l’arrière plan du fil arriane

Ici  transparent :

1
2
3
4
5
/*  Background du fil arriane  */

ul#order_step {
background-color: transparent;
}

 

Utiliser d’autres polices de caractères

Grace au addon google font pour evo6 on peut facillement utiliser touts la collection google web font pour personnaliser son template EVO6

Voici la démarche :

Voici tout d’abord un addon prestashop EVO6 intérréssant pour ceux qui souhaite facilement intégrer des police de caractère personnelle dans le design de leur template.

telechargement1

Téléchargez le module DDLX google font

Petite explication :

Quant on veux afficher une police de caractère spéciale dans son site prestashop il faut :

1) Déclarer la police de caractère :

Ce afin quelle soit chargé au chargement de la page.

2) L’utiliser sur les éléments qui nous intéresse.

Celà se fait avec du CSS (tips EVO6)

 

Que fait le module DDLX Google font ?

IL se charge de déclarer les police de caractère que vous souhaitez utiliser sur votre template EVO6.

Utilisation du module

1) Trouver la police de caractère :

Rendez vous sur le site : http://www.google.com/fonts et sélectionnez la police de caractère que vous souhaitez utiliser

Je veux par exemple utiliser celle ci : Tangerine

tangerine

Cliquez sur le lien « quick use » surligné sur l’image ci dessous :

google_font1

2) Copier /Coller le code fourni par Google font :

Exemple de code fourni par google font :

code_google

<link href=’http://fonts.googleapis.com/css?family=Tangerine:400,700′ rel=’stylesheet’ type=’text/css’>

 

googlefont2

Copier le code fourni par google font dans le champs du module ddlx google font réservé a cet effe, puis sauver. (Vous pouvez déclarer plusieurs font si vous le souhaitez ). Ca y est, vous venez de déclarer la / les polices de caractère, elles se chargeront au chargement de vos page web

 

3) Afficher la police de caractère sur les éléments souhaités :

Pour les novices qui ne s’y connaissent pas trop en CSS ; c’est un peu plus technique :

Tout d’abord il faut repérer dans le CSS la partie que nous souhaitons personnaliser : exemple le menu

Avec excellent outil firebug pour firefox, j’inspecte l’élément qui m’intéresse et je trouve le code CSS que je souhaite personnaliser.

firebug1

Dans le cas du menu :

‘ .sf-menu li a, .sf-menu li ‘ (Il sagit des liens du menu)

Je vais donc avec le EVO6 demander à ce que ce soit ma nouvelle police de caractère qui soit affichée,

Google nous fournis lui même le code CSS a utiliser pour évoquer la font déclaré :

css_google

On l’utilise pour afficher la font sur le menu : voici le code de base :

1
2
3
4
5
6
/* Font tangerine for menu + size 22px */

.sf-menu li a, .sf-menu li {
font-family: 'Tangerine', cursive;
font-size: 22px;
}

Note : ce code peut être personnalisé.

evo6_menu_tangerine

En d’autre terme on dit : Pour la partie menu,( .sfmenu) utilise la police de caractère TANGERINE (celle ci ayant été précédement déclaré dans le module ddlx google font)

Le résultat :

resultat_google_font

 

On peu faire appel a plusieurs fonts et les utiliser sur tout les élements du site, il faut juste injecter le bon code CSS dans le EVO6.

 

 

 

Slider

Modifier l’apparence des onglets au survol du slider :

– Testé sur la version EVO6 pour Prestashop 1.5  : OUI

– Testé sur la version EVO6 pour Prestashop 1.4 : Pas testé

 

Voici un petit tip pour modifier l’apparence des onglet au survol du slider :

Ici nous mettons un arrière plan orange et le texte en blanc :

slider

Code a insérer dans l’onglet CSS du EVO6

1
2
3
4
5
6
#featured ul.ui-tabs-nav li.ui-tabs-selected a {
background: #F48152;
color: #FFFFFF;
padding-left: 25px;
text-decoration: none;
}

23 réponses à Tips / Astuces

  • Bonjour
    Je suis en train de faire un site avec le nouveau evo6 que je trouve simple d’utilisation pour des novices comme moi.
    Voila j’ai testé des Tips qui fonctionne a merveille, à part celui de Center le titre des en – tête de bloc qui m’intéresse et qui ne fonctionne pas?
    Si vous avez d’autres solutions je suis preneur

    Merci beaucoup de votre travail qui nous simplifie la vie

    Cordialement
    Mr Perez

  • Salut et merci pour tout ces tips, j’ai essayé afficher la liste de produit en ligne mais ça marche pas mes produit reste comme a l’origine, pourtant les autre types que j’ai mis marche

    • Frédéric P

      Bonjour

      Nativement les produit sont en ligne, je pense que vous essayez de les afficher en Grille.
      Le tips que nous fournissons est fonctionnel pour le EVO prestashop 1.5 peut être utilisez vous prestashop 1.4.

      Je vous invite toutefois à nous contactez via notre support @ http://support.ddlx.org/
      Nous regarderons votre site afin de voir ça.

  • Bonjour,

    J’ai essayé le tip pas de colonne en page d’accueil. Il me mets la colonne de droite en bas a gauche

    Une erreur dedans peut etre ??

    merci

    • Frédéric P

      Le tips a été fait pour le EVO6 Left, il est néssésaire de l’adapter pour le EVO6 rigth et 2C :
      Comme ça, ca devrait le faire

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      #index #left_column {
      display:none;
      }

      #index #right_column {
      display:none;
      }

      #index  .container_9 .grid_5 {
      width: 980px;
      }

      .boxgrid {
      width: 215px;
      margin-left: 31px;
      }

      #featured-products_block_center li {
      background: transparent;
      }
  • Bonjour,
    Je voudrais rendre transparent le fond du site mais cela ne fait rien.
    j’écris:
    #page{
    background: none;
    }
    est-ce normal? 😉

    B

    • Frédéric P

      Essayez plutot ça :

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      #page{
      background:none;
      }

      /*  On enlève le background du bandeau du haut  */
      div#header{
      background:none;
      }

      /*   On enlève le background  aux colonnes   */
      #columns{
      background:none;
      }
  • Oups, j’ai trouvé… s’était une question d’ordre… je l’ai mis plus haut et ca fonctionne!

    • Frédéric P

      Oui il arrive parfois lorsqu’on inssère un grand nombre de tips, l’ordre des tips joue un rôle. Dans le cas ou un tips ne fonctionnerait pas testez de le mettre en tête de liste du CSS.

  • Bonjour,
    Je voudrais que sur la barre menu apparaisse en plus d' »acceuil » certaines catégories.
    Est-ce possible?
    Merci,

    Raymond

  • Bonjour,
    J’ai du faire une fausse manip et ma page d’acceuille est devue un cauchemard…
    Heureusement, j’ai sauver juste avant cette bombe le profil.
    cela m’a généré un fichier .gzip.
    comment fait-on pour revenir à la version précédente? 😉
    Merci,

  • Bpnjour,
    Je voudrais faire descendre la page principale (contenant les blocs) car elle vient dans le header.
    Merci pour votre aide

  • Bonjour,
    Pour un novice, comme moi, trés facile d’utilisation, changement de couleurs, de personnalisation, on fait tous soit même.
    EV06 Génial, à recommander.
    Encore merci. à bientôt.

  • Bonjour, j’ai mis une photo en fond d’écran, mais du coup je trouve le blanc de l’avant plan un peu « too much » et je voudrai pouvoir changer sa couleur. comment faire? Merci.

    • Frédéric P

      En CSS on peux changer l’arrière plan du corp de page :

      Exemple de Code que l’on peu insérer dans l’onglet CSS du module

      #page {
      background-image: url(« http://urlde.votre/image.jpeg »);
      }

  • je suis très embêtée par le fait qu’on ne peut pas cliquer sur le logo du site pour revenir à la page d’accueil. Comment changer cela?
    Merci pour la réponse

  • Bonjour,

    L’image en arrière plan dans le menu est une excellente idée pour contourner IE8 et antérieurs, sur lesquels le dégradé est invisible.
    Malheureusement le code :

    .sf-menu{
    background: url(« modules/ddlx_creator/img/VOTRE_PROFIL/VOTREIMAGE.png ») no-repeat transparent;
    }

    fonctionne sur tous les navigateurs (IE8 inclus), mais pas sur toutes les pages.
    Nickel pour accueil, catégories, sous catégories, recherche?tag, promotions, nouveaux produits, meilleures ventes, mon compte, contact, mais background invisible sur les pages produits et les pages CMS

    N’y aurait il pas une petit bout à rajouter ?

    Merci

  • bonjour je voudrais savoir comment réduire les marges de gauche a droite j ai essayer margin left right et autres mais ca ne marche pas merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *