in

How to create responsive Prestashop theme with Twitter Bootstrap from scratch
joomla template, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, jQuery, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart
Share

Object 1

How to create responsive Prestashop theme with Twitter Bootstrap from scratch What is PrestaShop? PrestaShop is a free, open source e-commerce solution !t supports payment "ateways such as #oo"le $hec%out, &uthori'e net, S%rill, PayPal and Payments Pro via &P! (urther payment modules are offered commercially PrestaShop is availa)le under the *pen Software +icense and officially launched in &u"ust ,--. The software, which is )ased on the Smarty template en"ine, is currently used )y /,0,---1 shops worldwide PrestaShop is the winner of the ,-/- and ,-// Best *pensource Business &pplication awards The software ma%es e2tensive use of &3&4 in the admin panel, while module )loc%s can )e easily added to the store to provide e2tra functionality5 these are normally provided free of char"e )y independent developers

The PrestaShop "roup was founded in Paris, with a second office opened in 6iami in ,-// PrestaShop is translated into 07 lan"ua"es, with only 8n"lish and (rench havin" full support in all release versions Technical support is provided on the official forum from PrestaShop "rowin" $ommunity consistin" of more than 70-,--- active mem)ers The ma%ers of PrestaShop have an official mar%etplace for priced modules and themes entitled PrestaShop &ddons There are a num)er of volunteers who support and contri)ute their own &ddons to PrestaShop $ontri)utors often pro"ram additional features for the software, on top of the ,.0 features availa)le )y default PrestaShop operates an associated we)site called PrestaBo2, which inte"rates the software into a simple one-stop hostin" operation 9ownload and !nstallation PrestaShop: &lways (ree and easy !nstallation,please download: http:;;www prestashop com;en;download How a theme wor%s & PrestaShop theme is a set of files which you can edit in order to chan"e the loo% of your online shop Here are a few important tid)its:

&ll themes have their files located in the ;themes root folder 8ach theme has its own su)-folder, in the main themes folder 8ach theme is made of template files < tpl=, ima"e files < "if, jp", pn"=, one or more $SS files < css=, and sometimes even 3avaScript files < js= 8ach theme has a preview jp" ima"e file in its folder, ena)lin" the shop-owner to see what the theme loo%s li%e directly from the )ac%-office, and select the theme appropriately The ;css folder contains all $SS files The ;im" folder contains all ima"es The ;js folder contains all the 3avaScript files The ;lan" folder contains the theme>s translations !ts access ri"hts should )e set at $H6*9 ??? <for instance=, so that the )ac%office translation tool can read and write into it The root of the folder contains TP+ files only <Smarty files=, as well as the preview jp" file

(ile structure for a theme

File or folder preview.jpg "#".tpl address.tpl addresses.tpl authentication.tpl best-sales.tpl breadcrumb.tpl category.tpl category-tree-branch.tpl cms.tpl contact-form.tpl discount.tpl errors.tpl footer.tpl guest-trac*ing.tpl header.tpl history.tpl identity.tpl inde/.php

Description This image is used as a preview in the "Theme" selector in the "Preferences" > "Appearance" sub-tab. This image is mandatory, as without it the theme cannot be selected. t should obviously reflect the theme!s design, and not its logo or designer!s name... $sed when the re%uested page is not found &'TTP error "#"(. $sed when adding or editing a client street address. $sed when listing a client!s street addresses. $sed when identifying a user, or creating a new user account. $sed to list all best sale. $sed to find the navigation path, or breadcrumb trail. $sed to list all products in a given category. $sed only by the )ategory bloc*. $sed for informational pages &"Tools" > ")+," sub-tab(. $sed by the contact form. $sed when listing all discount tic*ets for a single client. $sed when displaying errors. Potentially called by all of the pages. Page footer. $sed when a visitor has no *now account on the site, but wants his order to be trac*ed - and therefore needs to create an account or log in. Page header $sed when lsiting the order history of a client. $sed when a client edits his.her personal information. 0lan* file, prevents visitors to view the content of the folder.

category-cms-tree-branch.tpl ...

File or folder inde/.tpl maintenance.tpl manufacturer.tpl manufacturer-list.tpl my-account.tpl new-products.tpl order-address.tpl order-carrier.tpl order-confirmation.tpl order-detail.tpl order-follow.tpl order-opc.tpl order-opc-new-account.tpl order-payment.tpl order-return.tpl order-slip.tpl order-steps.tpl pagination.tpl password.tpl prices-drop.tpl product.tpl product-list.tpl product-sort.tpl products-comparison.tpl scenes.tpl search.tpl shopping-cart.tpl sitemap.tpl store9infos.tpl stores.tpl 1elcome page.

Description

$sed when the site is in maintenance mode. $sed when listing all products from a single manufacturer. $sed when listing all manufacturers. 1elcome page for a client!s account. $sed when listing the products that were last added to the cart. $sed during the order process2 ,tep 3, choosing the addresses &delivery, billing(. $sed during the order process2 ,tep 4, choosing the carrier mode. $sed during the order process2 5ast step, confirming the order &after payment(. $sed to display the content of a client!s order. $sed when a client needs to as* for a product return. ... ... $sed during the order process2 ,tep 6, choosing the payment mode. $sed to display a client product return details. $sed to display a client!s credit slips. 7rder process progress bar. $sed by all pages that list products. 8isplays the pagination button, enable to s*ip to the ne/t.previous page of products. $sed when a client needs to change his password. $sed to list all current promotions. $sed to display details for a single product. $sed by all pages that list products. 8isplays the actual products list. $sed by all pages that list products. 8isplays a menu enabling to sort and filter products. ... $sed to display a scene!s details within a product category. $sed to list results from a search %uery. $sed to list products in a client!s cart. $sed to display the site map. ... ...

shopping-cart-product-line.tpl $sed to display from a single cart row.

File or folder supplier.tpl supplier-list.tpl thic*bo/.tpl .cache .css $sed to list all suppliers.

Description $sed to list all the products from a single supplier. $sed to :oom a product!s picture. ... )ontains all style sheet files for the theme. The global.css file deals with the layout for most of the site. $nless you *now e/actly what you are doing, you should leave these files alone. )ontains all of the theme!s images. ;ou should replace these images with your own ade%uate creations. f you do not *now what to ma*e of it, you should leave the original files. )ontains all of the theme!s <ava,cript files. $nless you *now e/actly what you are doing, you should leave these files alone. )ontains all translation files. These are generated by the bac*-office translation tool, and should not be edit directly. f a translation needs editing, go to the bac*-office, "Tools" tab, "Translation" sub-tab, "+odify translation" section, and choose "=ront office translations".

.img .js

.lang

$reat @ew Theme &fter downloaded and installed Prestashop please find folder called >themes> and innside the >themes> folder, create a new directory with the name of your theme 82ample: vinaora !f you have PS9 or any ima"e for your theme please creat for Home pa"e theme preview ima"e called preview jp" and upload to >vinaora> folder Prestashop should automatically find and add your template to the )ac%-end Then "o to the Themes option under the Preferences menu, and clic% &dd @ew at the top *nce completed, you will see your theme in the center of the pa"e 8na)le it )y simply clic%in" on it and pressin" the Save )utton Aour themeBs functionality determines which pa"es you should implement These pa"e are )ased on the files in the controllers folder, and you can override the default controllers or add your own custom controllers to fit your theme

Wor% with !nde2 php Cse your editor to creat new php file called inde2 php with code )ellow

01.<?php
02./* 03.* 2007-2013 PrestaShop 04.* 05.* NOTICE OF ICENSE 0!.* 07.* Th"s so#r$e %"&e "s s#'(e$t to the )$a*e+"$ Free "$e,se -)F 3.0. 0/.* that "s '#,*&e* 0"th th"s pa$1a2e ", the %"&e ICENSE.t3t. 04.* It "s a&so a5a"&a'&e thro#2h the 0or&*-0"*e-0e' at th"s 67 8 10.* http8//ope,so#r$e.or2/&"$e,ses/a%&-3.0.php 11.* I% 9o# *"* ,ot re$e"5e a $op9 o% the &"$e,se a,* are #,a'&e to 12.* o'ta", "t thro#2h the 0or&*-0"*e-0e': p&ease se,* a, e+a"& 13.* to &"$e,se;prestashop.$o+ so 0e $a, se,* 9o# a $op9 "++e*"ate&9. 14.* 15.* <ISC )I=E7 1!.*

17.* <o ,ot e*"t or a** to th"s %"&e "% 9o# 0"sh to #p2ra*e PrestaShop to ,e0er 1/.* 5ers"o,s ", the %#t#re. I% 9o# 0"sh to $#sto+">e PrestaShop %or 9o#r 14.* ,ee*s p&ease re%er to http8//000.prestashop.$o+ %or +ore ",%or+at"o,. 20.* 21.* ;a#thor PrestaShop S) <$o,ta$t;prestashop.$o+? 22.* ;$op9r"2ht 2007-2013 PrestaShop S) 23.* ;5ers"o, 7e&ease8 @7e5"s"o,8 1400/ @ 24.* ;&"$e,se http8//ope,so#r$e.or2/&"$e,ses/a%&-3.0.php )$a*e+"$ Free "$e,se -)F 25.* I,ter,at"o,a& 7e2"stere* Tra*e+ar1 A Propert9 o% PrestaShop S) 2!.*/ 27. 2/.hea*er-BE3p"res8 =o,: 2! C#& 1447 05800800 D=TB.E 24.hea*er-B ast-=o*"%"e*8 B.2+*ate-B<: * = F G8"8sB..B D=TB.E 30. 31.hea*er-BCa$he-Co,tro&8 ,o-store: ,o-$a$he: +#st-re5a&"*ateB.E 32.hea*er-BCa$he-Co,tro&8 post-$he$1H0: pre-$he$1H0B: %a&se.E 33.hea*er-BPra2+a8 ,o-$a$heB.E 34. 35.hea*er-B o$at"o,8 ../B.E 3!.e3"tE 37.?? Wor% with !nde2 tpl $ode

3.0.

01.I*
02.* 2007-2013 PrestaShop 03.* 04.* NOTICE OF ICENSE 05.* 0!.* Th"s so#r$e %"&e "s s#'(e$t to the )$a*e+"$ Free "$e,se -)F 3.0. 07.* that "s '#,*&e* 0"th th"s pa$1a2e ", the %"&e ICENSE.t3t. 0/.* It "s a&so a5a"&a'&e thro#2h the 0or&*-0"*e-0e' at th"s 67 8 04.* http8//ope,so#r$e.or2/&"$e,ses/a%&-3.0.php 10.* I% 9o# *"* ,ot re$e"5e a $op9 o% the &"$e,se a,* are #,a'&e to 11.* o'ta", "t thro#2h the 0or&*-0"*e-0e': p&ease se,* a, e+a"& 12.* to &"$e,se;prestashop.$o+ so 0e $a, se,* 9o# a $op9 "++e*"ate&9. 13.* 14.* <ISC )I=E7 15.* 1!.* <o ,ot e*"t or a** to th"s %"&e "% 9o# 0"sh to #p2ra*e PrestaShop to ,e0er 17.* 5ers"o,s ", the %#t#re. I% 9o# 0"sh to $#sto+">e PrestaShop %or 9o#r 1/.* ,ee*s p&ease re%er to http8//000.prestashop.$o+ %or +ore ",%or+at"o,. 14.* 20.* ;a#thor PrestaShop S) <$o,ta$t;prestashop.$o+? 21.* ;$op9r"2ht 2007-2013 PrestaShop S) 22.* ;5ers"o, 7e&ease8 @7e5"s"o,8 1400/ @ 23.* ;&"$e,se http8//ope,so#r$e.or2/&"$e,ses/a%&-3.0.php )$a*e+"$ Free "$e,se -)F 24.* I,ter,at"o,a& 7e2"stere* Tra*e+ar1 A Propert9 o% PrestaShop S) 25.*J 2!. 27.I@GOOKLGO=EJ Wor% with header tpl

3.0.

01.<M<OCTFPE ht+&?

02.<ht+& &a,2HBe,B? 03.<hea*? 04.<t"t&e?I@+etaLt"t&eNes$ape8Oht+&a&&O8O6TF-/OJ</t"t&e? 05.I"% "sset-@+etaL*es$r"pt"o,. )N< @+etaL*es$r"pt"o,J 0!.<+eta ,a+eHB*es$r"pt"o,B $o,te,tHBI@+etaL*es$r"pt"o,Nes$ape8ht+&8O6TF-/OJB /? 07.I/"%J 0/.I"% "sset-@+etaL1e90or*s. )N< @+etaL1e90or*sJ 04.<+eta ,a+eHB1e90or*sB $o,te,tHBI@+etaL1e90or*sNes$ape8ht+&8O6TF-/OJB /? 10.I/"%J 11.<+eta http-eP#"5HBCo,te,t-T9peB $o,te,tHBapp&"$at"o,/3ht+&Q3+&E $harsetH#t%-/B /? 12.<+eta ,a+eHB2e,eratorB $o,te,tHBPrestaShopB /? 13.<+eta ,a+eHBro'otsB $o,te,tHBI"% "sset-@,o'ots.J,oI/"%J",*e3:%o&&o0B /? 14.<&",1 re&HB"$o,B t9peHB"+a2e/5,*.+"$roso%t."$o,B hre%HB/I@"+2LpsL*"rJ%a5"$o,."$o?I@"+2L#p*ateLt"+eJB /? 15.<&",1 re&HBshort$#t "$o,B t9peHB"+a2e/3-"$o,B hre%HB/I@"+2LpsL*"rJ%a5"$o,."$o?I@"+2L#p*ateLt"+eJB /? 1!.<s$r"pt t9peHBte3t/(a5as$r"ptB? 17.5ar 'ase<"r H OI@$o,te,tL*"rJOE 1/.5ar stat"$Lto1e, H OI@stat"$Lto1e,JOE 14.5ar to1e, H OI@to1e,JOE 20.5ar pr"$e<"sp&a9Pre$"s"o, H I@pr"$e<"sp&a9Pre$"s"o,*@$#rre,$9-?*e$"+a&sJE 21.5ar pr"$e<"sp&a9=etho* H I@pr"$e<"sp&a9JE 22.5ar ro#,*=o*e H I@ro#,*=o*eJE 23.</s$r"pt? 24.<&",1 re&HBst9&esheet/&essB t9peHBte3t/$ssB hre%HB/the+es/'ootstrap/$ss/'ootstrap.&essB /? 25.<s$r"pt sr$HB/the+es/'ootstrap/(s/&ess-1.3.0.+",.(sB?</s$r"pt? 2!.I"% "sset-@$ssL%"&es.J 27.I%orea$h %ro+H@$ssL%"&es 1e9H$ssL#r" "te+H+e*"aJ 2/.<&",1 hre%HB/I@$ssL#r"JB re&HBst9&esheetB t9peHBte3t/$ssB +e*"aHBI@+e*"aJB /? 24.I/%orea$hJ 30.I/"%J 31.I"% "sset-@(sL%"&es.J 32.I%orea$h %ro+H@(sL%"&es "te+H(sL#r"J 33.<s$r"pt t9peHBte3t/(a5as$r"ptB sr$HB/I@(sL#r"JB?</s$r"pt? 34.I/%orea$hJ 35.I/"%J 3!.I@GOOKLGE)<E7J 37.</hea*? 3/. 34.<'o*9? 40.I"% M@$o,te,tLo,&9J 41.I"% "sset-@restr"$te*L$o#,tr9L+o*e. AA @restr"$te*L$o#,tr9L+o*eJ 42.<*"5 "*HBrestr"$te*-$o#,tr9B? 43.<p?I& sHOFo# $a,,ot p&a$e a ,e0 or*er %ro+ 9o#r $o#,tr9.OJ <spa, $&assHB'o&*B?I@2eo&o$at"o,L$o#,tr9J</spa,?</p? 44.</*"5? 45.I/"%J 4!.<*"5 $&assHB,a5'arB? 47.<*"5 $&assHB,a5'ar-",,erB? 4/.<*"5 $&assHB$o,ta",erB? 44.<a $&assHB'ra,*B hre%HB/I@&",1-?2etPa2e ",1-O",*e3.phpO.JB? 50.<"+2 $&assHB&o2oB sr$HB/I@"+2LpsL*"rJ&o2o.(p2?I@"+2L#p*ateLt"+eJB a&tHBI@shopL,a+eN es$ape8Oht+&a&&O8O6TF-/OJB I"% @&o2oL"+a2eL0"*thJ0"*thHBI@&o2oL"+a2eL0"*thJBI/"%J I"% @&o2oL"+a2eLhe"2htJhe"2htHBI@&o2oL"+a2eLhe"2htJB I/"%J /? 51.</a? 52.I@GOOKLTOPJ 53.</*"5? 54.</*"5?

55.</*"5? 5!. 57.<*"5 $&assHB$o,ta",er-%&#"*B? 5/.<*"5 $&assHBro0-%&#"*B? 54.<M-- e%t --? !0.<*"5 $&assHBspa,2B? !1.I@GOOKL EFTLCO 6=NJ !2.</*"5? !3. !4.<M-- Ce,ter --? !5.<*"5 $&assHBspa,/B? !!.I/"%J !7. !/.Ror1 0"th Footer.tp& !4. 70.I"% M@$o,te,tLo,&9J 71.</*"5? 72. 73.<M-- 7"2ht --? 74.<*"5 $&assHBspa,2B? 75.I@GOOKL7IDGTLCO 6=NJ 7!.</*"5? 77.</*"5? 7/.</*"5? 74.<M-- Footer --? /0.<%ooter?I@GOOKLFOOTE7J</%ooter? /1.I/"%J /2.</'o*9? /3.</ht+&?

$an download AouriT prestashop-)ootstrap as demo theme http:;;joomDuery com;upload;prestashop-)ootstrap-master 'ip