{"id":1380,"date":"2016-04-12T11:41:59","date_gmt":"2016-04-12T11:41:59","guid":{"rendered":"http:\/\/www.majory-cubizolles.fr\/blog\/?p=1380"},"modified":"2017-01-23T18:25:54","modified_gmt":"2017-01-23T18:25:54","slug":"ajouter-des-tabs-dans-une-page-cms-astuce-prestashop","status":"publish","type":"post","link":"https:\/\/www.majory-cubizolles.fr\/blog\/ajouter-des-tabs-dans-une-page-cms-astuce-prestashop\/","title":{"rendered":"Ajouter des tabs dans une page cms | Astuce Prestashop 1.6"},"content":{"rendered":"

Ce tutorial va vous permettre d’ins\u00e9rer des tabs dans vos pages cms<\/p>\n

Astuce Prestashop 1.6<\/p>\n

————————————–<\/p>\n

1) Ins\u00e9rer une tab horizontal sur la page cms de Prestashop\u00a0<\/strong><\/span><\/h3>\n

1.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n

\"Ajouter<\/a><\/p>\n

<\/p>\n

1.2 Ins\u00e9rez le code suivant<\/p>\n

<div class=\"tabbable\">\r\n<ul class=\"nav nav-tabs myTabs\">\r\n<li class=\"active\"><a href=\"#one\">One<\/a><\/li>\r\n<li><a href=\"#two\">Two<\/a><\/li>\r\n<li><a href=\"#three\">Three<\/a><\/li>\r\n<\/ul>\r\n<div class=\"tab-content\">\r\n<div class=\"tab-pane active\" id=\"one\">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.<\/div>\r\n<div class=\"tab-pane\" id=\"two\">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.<\/div>\r\n<div class=\"tab-pane\" id=\"three\">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
1.3 Enregistrer et visualiser<\/p>\n
\"Ins\u00e9rer<\/a><\/p>\n
1.4 Si vos tabs ne fonctionnent pas, il sera n\u00e9cessaire d’ajouter le code suivant dans ..Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<\/p>\n
<script>\r\n$('.myTabs a').click(function (e) {\r\n    e.preventDefault()\r\n    $(this).tab('show')\r\n  });\r\n<\/script><\/pre>\n
<\/h2>\n
2) Ins\u00e9rer une tab sur le c\u00f4t\u00e9 gauche sur la page cms de Prestashop\u00a0<\/span><\/strong><\/h3>\n
2.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n
\"Ajouter<\/a><\/p>\n
2.2 Ins\u00e9rez le code suivant<\/p>\n
<div class=\"tabbable tabs-left\">\r\n<ul class=\"nav nav-tabs myTabs\">\r\n<li class=\"active\"><a href=\"#a\">One<\/a><\/li>\r\n<li><a href=\"#b\">Two<\/a><\/li>\r\n<li><a href=\"#c\">Three<\/a><\/li>\r\n<\/ul>\r\n<div class=\"tab-content\">\r\n<div class=\"tab-pane active\" id=\"a\">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.<\/div>\r\n<div class=\"tab-pane\" id=\"b\">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.<\/div>\r\n<div class=\"tab-pane\" id=\"c\">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
2.3 Ajouter le code suivant dans ..\/themes\/lenomdevotretheme\/css\/cms.css<\/p>\n
.tabs-left > .nav-tabs > li {\r\n\tfloat: none;\r\n}\r\n.tabs-left > .nav-tabs > li > a {\r\n\tmin-width: 74px;\r\n\tmargin-right: 0;\r\n\tmargin-bottom: 3px;\r\n}\r\n.tabs-left > .nav-tabs {\r\n\tfloat: left;\r\n\tmargin-right: 19px;\r\n\tborder-right: 1px solid #ddd;\r\n\tborder-bottom:none\r\n}\r\n.tabs-left > .nav-tabs > li {\r\n\tdisplay: block\r\n}\r\n.tabs-left > .nav-tabs > li > a {\r\n\tmargin-right: -1px;\r\n\t-webkit-border-radius: 4px 0 0 4px;\r\n\t-moz-border-radius: 4px 0 0 4px;\r\n\tborder-radius: 4px 0 0 4px;\r\n}\r\n.tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus {\r\n\tborder-color: #eeeeee #dddddd #eeeeee #eeeeee;\r\n}\r\n.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus {\r\n\tborder-color: #ddd transparent #ddd #ddd;\r\n *border-right-color: #ffffff;\r\n}<\/pre>\n
2.4 Enregistrer et visualiser<\/p>\n
\"Ajouter<\/a><\/p>\n
2.5Si vos tabs ne fonctionnent pas, il sera n\u00e9cessaire d’ajouter le code suivant dans ..Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<\/p>\n
<script>\r\n$('.myTabs a').click(function (e) {\r\n    e.preventDefault()\r\n    $(this).tab('show')\r\n  });\r\n<\/script><\/pre>\n
<\/h2>\n
3) Ins\u00e9rer une tab sur le c\u00f4t\u00e9 droite\u00a0<\/span><\/strong>sur la page cms de Prestashop\u00a0<\/strong><\/span><\/h3>\n
3.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n
\"Ajouter<\/a><\/p>\n
3.2 Ins\u00e9rez le code suivant<\/p>\n
<div class=\"tabbable tabs-right\">\r\n<ul class=\"nav nav-tabs myTabs\">\r\n<li class=\"active\"><a href=\"#a\">One<\/a><\/li>\r\n<li><a href=\"#b\">Two<\/a><\/li>\r\n<li><a href=\"#c\">Three<\/a><\/li>\r\n<\/ul>\r\n<div class=\"tab-content\">\r\n<div class=\"tab-pane active\" id=\"a\">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.<\/div>\r\n<div class=\"tab-pane\" id=\"b\">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.<\/div>\r\n<div class=\"tab-pane\" id=\"c\">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
3.3 Ajouter le code suivant dans ..\/themes\/lenomdevotretheme\/css\/cms.css<\/p>\n
.tabs-right > .nav-tabs > li {\r\n\tfloat: none;\r\n}\r\n.tabs-right > .nav-tabs > li > a {\r\n\tmin-width: 74px;\r\n\tmargin-right: 0;\r\n\tmargin-bottom: 3px;\r\n}\r\n\r\n.tabs-right > .nav-tabs {\r\n\tfloat: right;\r\n\tmargin-left: 19px;\r\n\tborder-left: 1px solid #ddd;\r\n\tborder-bottom:none\r\n}\r\n.tabs-right > .nav-tabs > li > a {\r\n\tmargin-left: -1px;\r\n\t-webkit-border-radius: 0 4px 4px 0;\r\n\t-moz-border-radius: 0 4px 4px 0;\r\n\tborder-radius: 0 4px 4px 0;\r\n}\r\n.tabs-right > .nav-tabs > li {\r\n\tdisplay: block\r\n}\r\n.tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus {\r\n\tborder-color: #eeeeee #eeeeee #eeeeee #dddddd;\r\n}\r\n.tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus {\r\n\tborder-color: #ddd #ddd #ddd transparent;\r\n *border-left-color: #ffffff;\r\n}\r\n<\/pre>\n
3.4 Enregistrer et visualiser<\/p>\n
\"Ajouter<\/a><\/p>\n
3.5Si vos tabs ne fonctionnent pas, il sera n\u00e9cessaire d’ajouter le code suivant dans ..Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<\/p>\n
<script>\r\n$('.myTabs a').click(function (e) {\r\n    e.preventDefault()\r\n    $(this).tab('show')\r\n  });\r\n<\/script><\/pre>\n
<\/h2>\n
4) Ins\u00e9rer une tab en bas\u00a0<\/span><\/strong>sur la page cms de Prestashop\u00a0<\/strong><\/span><\/h3>\n
4.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n
\"Ajouter<\/a><\/p>\n
4.2 Ins\u00e9rez le code suivant<\/p>\n
<div class=\"tabbable tabs-below\">\r\n<div class=\"tab-content\">\r\n<div class=\"tab-pane active\" id=\"a\">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.<\/div>\r\n<div class=\"tab-pane\" id=\"b\">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.<\/div>\r\n<div class=\"tab-pane\" id=\"c\">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.<\/div>\r\n<\/div>\r\n<ul class=\"nav nav-tabs myTabs\">\r\n<li class=\"active\"><a href=\"#a\">One<\/a><\/li>\r\n<li><a href=\"#b\">Two<\/a><\/li>\r\n<li><a href=\"#c\">Three<\/a><\/li>\r\n<\/ul>\r\n<\/div><\/pre>\n
4.3 Ajouter le code suivant dans ..\/themes\/lenomdevotretheme\/css\/cms.css<\/p>\n
.tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs {\r\n\tborder-bottom: 0;\r\n}\r\n.tab-content > .tab-pane, .pill-content > .pill-pane {\r\n\tdisplay: none;\r\n}\r\n.tab-content > .active, .pill-content > .active {\r\n\tdisplay: block;\r\n}\r\n.tabs-below > .nav-tabs {\r\n\tborder-top: 1px solid #ddd;\r\n\t margin-top: 25px;\r\n}\r\n.tabs-below > .nav-tabs > li {\r\n\tmargin-top: -1px;\r\n\tmargin-bottom: 0;\r\n}\r\n.tabs-below > .nav-tabs > li > a {\r\n\t-webkit-border-radius: 0 0 4px 4px;\r\n\t-moz-border-radius: 0 0 4px 4px;\r\n\tborder-radius: 0 0 4px 4px;\r\n}\r\n.tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus {\r\n\tborder-top-color: #ddd;\r\n\tborder-bottom-color: transparent;\r\n}\r\n.tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus {\r\n\tborder-color: transparent #ddd #ddd #ddd;\r\n}\r\n<\/pre>\n
4.4 Enregistrer et visualiser<\/p>\n
\"Ajouter<\/a><\/p>\n
4.5Si vos tabs ne fonctionnent pas, il sera n\u00e9cessaire d’ajouter le code suivant dans ..Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<script><\/span><\/p>\n
$('.myTabs a').click(function (e) {\r\n    e.preventDefault()\r\n    $(this).tab('show')\r\n  });\r\n<\/script><\/pre>\n
———————————–<\/p>\n
Attention: lorsque vous touchez les fichiers .tpl .css, si vous ne voyez pas de changements, n’oubliez pas de nettoyer votre cache Prestashop !<\/strong><\/span><\/p>\n
Articles similaires<\/h2><\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Comment bien \u00e9crire un tweet | Infographie  
views 240<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie vous montre comment am\u00e9liorer vos tweets pour augmenter votre visibilit\u00e9 sur la toile.\r\n\r\n\r\n\r\n<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Mettre sa boutique en maintenance et acc\u00e9der \u00e0 sa boutique \u00a0| Prestashop 1.6 et 1.7  
views 5263<\/div><\/a>\n\t\t\t\t\t\t\t\tLorsque vous d\u00e9sirez effectuer de grands changements sur\u00a0votre boutique, je vous conseille de mettre votre boutique en maintenance c'est \u00e0 dire de signaler \u00e0 vos clients que votre site \u00a0est\u00a0temporairement inaccessible. Vous seul aurez acc\u00e8s \u00e0 votre boutique pour voir les changements.\r\n\r\nSi vous travaillez en local, le mode maintenance est inutile dans la mesure o\u00f9 les internautes n'y ont pas acc\u00e8s...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Afficher le champ adresse sur plusieurs lignes | Bloc contact infos \u2013  Astuce Presta...  
views 1139<\/div><\/a>\n\t\t\t\t\t\t\t\tCette astuce Prestashop est valable pour la version 1.6\r\n\r\nVous l'avez s\u00fbrement remarqu\u00e9, en bas de page, l'adresse de votre magasin est sur une seule ligne.\r\n\r\n\r\n\r\nCe rapide tutoriel va vous permettre d'afficher le champ adresse sur plusieurs lignes\r\n\r\n\r\n\r\nValable pour Prestashop 1.6 et 1.5\r\n\r\n-----------------------------------\r\n\r\n1) Pour ins\u00e9rer les informations de votre boutique, il faut aller...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   L\u2019histoire du web design en une infographie  
views 1955<\/div><\/a>\n\t\t\t\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\nLe webdesign a \u00e9norm\u00e9ment \u00e9volu\u00e9 depuis les premi\u00e8res pages cr\u00e9\u00e9es par Tim Berners-Lee et ses\u00a0coll\u00e8gues.\u00a0A mesure que le Web \u00e9voluait, les langages et techniques suivaient.\r\n\r\n\r\n\r\n\r\n\r\n\r\nCette infographie pr\u00e9sente sous forme de calendrier l'\u00e9volution de la cr\u00e9ation d'un\u00a0site web de 1960 \u00e0 2010 et au-del\u00e0 .\r\n\r\n\r\n\r\n<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Astuce : Centrer votre menu dans Prestashop 1.6  
views 4139<\/div><\/a>\n\t\t\t\t\t\t\t\tVoici un petit tuto qui va vous permettre de centrer votre menu dans prestashop\r\n\r\nCette astuce Prestashop est valable pour la version 1.6\r\n\r\n\r\n\r\nComment centrer le menu sur ma boutique Prestashop ?\u00a0\r\nIl y a q'un seul fichier \u00e0 modifier : superfish-modified.css\u00a0 qui appartient au module blocktopmenu\r\n\r\n\r\n\r\n1) Dans .sf-menu, ajouter text-align:center\r\n\r\n2) Dans .sf-menu > li, remplacer float:lef...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n<\/div>  ","protected":false},"excerpt":{"rendered":"
Ce tutorial va vous permettre d’ins\u00e9rer des tabs dans vos pages cms Astuce Prestashop 1.6 ————————————– 1) Ins\u00e9rer une tab horizontal sur la page cms de Prestashop\u00a0 1.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code Articles similaires Les fonctionnalit\u00e9s techniques de PrestaShop views 253 En constante […]<\/p>\n","protected":false},"author":1,"featured_media":1384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3,11],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/1380"}],"collection":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/comments?post=1380"}],"version-history":[{"count":0,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/1380\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media\/1384"}],"wp:attachment":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media?parent=1380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/categories?post=1380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/tags?post=1380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}