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

Ajouter son propre CSS

Ongle CSS :

Cette section s’adresse a ceux qui ont un minimum de maitrise du CSS,
elle permet d’ajouter du code CSS et de fait pousser la personnalisation à n’importe quelle partie de votre thème

30

 

Note : Nous publions sur ce site ne nombreux tips / astuces lié a cet partie du EVO6 (Voir ici )

 

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;
}

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

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 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;
}

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;
}

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;
}

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

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

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;
}

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.

 

 

 

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

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;

}

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 <<<

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;
}

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;
}

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)

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

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;
}

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;
}

 

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

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

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 ;

}

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

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 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;
}

Editer un autre template que celui fourni avec le EVO6

Initialement le EVO6 est conçu pour éditer les templates fournis avec le EVO6.

Toutefois techniquement rien n’empêche d’éditer d’autre templates.

Il suffit pour celà de rendre le template souhaité éditable en y insérant tout simplement dans le fichier [ header.tpl ]  le code :

1
{$css}

Tel qu’indiqué ici :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
&lt;link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" /&gt;
{/foreach}
{/if}

&lt;!-- DDLX Template Configuration --&gt;
{$css}
&lt;!-- End DDLX Template Configuration --&gt;

{if isset($js_files)}
{foreach from=$js_files item=js_uri}
&lt;script type="text/javascript" src="{$js_uri}"&gt;&lt;/script&gt;
{/foreach}
{/if}

Le EVO6 est-il compatible smartphones / tablettes ?

Oui, la version mobile (Pour tablettes et smartphones) du thème Prestashop est inclue dans le EVO6

Combien de thèmes je peux créer avec le EVO6 ?

Le gestionnaire de profil intégré vous permet de créer / importer / Exporter un nombre illimité de thème.

Ces thèmes peuvent être activé / désactivé a tout moment sur le site.

Ils peuvent également être importé sur n’importe quel site prestashop équipé du EVO6

Faut-il être expert pour utiliser le EVO6 ?

Pas du tout, le logiciel a justement été pensé pour qu’il soit à la porté de tous.

Est-ce que les Thèmes gratuits compatibles EVO6 sont personnalisables ?

Oui a 100%

Ce sont des thèmes conçus avec le EVO6 dédiés à être utilisé et personnalisé par les heureux possesseurs du EVO6

Le EVO6 est compatible avec quelles versions de Prestashop ?

Pour l’instant le EVO6 est compatible pour les versions    :

Prestashop 1.4.3            à       1.4.9

Prestashop 1.5.2             à        1.5.6.2

Prestashop 1.6.6             à        1.6 …x

Est-ce que je peux personnaliser à tout moment mon thème ?

Ou parfaitement,

Le EVO6 vous permet de personnaliser en temps réel votre thème Prestashop.
Vous avez également la possibilité de pré-enregistrer des profils de personnalisation et les activer quant bon vous semble.

J’ai le EVO6, est-ce que je peux ajouter d’autres modules à mon Prestashop ?

Oui tout a fait, Le EVO6 n’empêche en rien l’utilisation d’autres modules sur votre Prestashop.

Le EVO6 sera t-il compatible avec les futures versions de prestashop ?

Oui, le EVO6 sera compatible avec toute la gamme prestashop 1.5 et 1.6 depuis prestashop 1.5.2

En ce qui concerne les mises à jour :

vous avez droit à 1 ans de mise a jour gratuite après achat du EVO6

Nous vous conseillons de surveiller régulièrement les mises à jour disponibles du EVO6.

Le EVO6 permet-il de personnaliser tout ?

Grace à l’onglet CSS : Il est possible d’injecter directement du code CSS dans le EVO6 ce qui permet une personnalisation très complète et très poussée des templates que vous pourrez créer.

Et L’utilisation standard du EVO6 permet de personnaliser très simplement :

– Template colonne à droite / colonne à gauche

– Personnaliser l’en-tête (Bandeau / Logo)

– Personnaliser le menu horizontal

– Personnaliser l’arrière plan du site

– Personnaliser les blocks latéraux

– Personnaliser le blocks panier

– Personnaliser les produits phrares

– Personnaliser les Listes produits

– Personnaliser le pied de page

– News ! Personnaliser le CSS du thème

– Personnaliser le Slider / Diaporama

– Et aussi de sauvegarder / Activer / Desactiver / Importer / Exporter a volonté un nombre illimité de templates perso créés…etc. (Export d’un prestashop à un autre possible)

 

Peut-on personnaliser le thème au niveau des TPL et CSS ?

Oui, bien sûr.

AU niveau de la structure du code de base, le thème par défault du EVO6 se rapproche beaucoup du thème par défault

Si pour une raison X ou Y vous avez envie de changer le code source du thème EVO6, libre a vous de le faire, cela n’affectera pas les fonctionnalités du module.

Est ce que je peux editer tout les templates avec le EVO6 ?

Initialement le EVO6 est conçu pour éditer les templates fournis avec le EVO6.

Toutefois techniquement rien n’empêche d’éditer d’autre templates.

Il suffit pour celà de rendre le template souhaité éditable en y insérant tout simplement dans le fichier [ header.tpl ]  le code :

1
{$css}

Tel qu’indiqué ici :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
&lt;link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" /&gt;
{/foreach}
{/if}

&lt;!-- DDLX Template Configuration --&gt;
{$css}
&lt;!-- End DDLX Template Configuration --&gt;

{if isset($js_files)}
{foreach from=$js_files item=js_uri}
&lt;script type="text/javascript" src="{$js_uri}"&gt;&lt;/script&gt;
{/foreach}
{/if}

Laisser un commentaire

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