Step One
- Take a default prestashop theme for 1.4, this is the one that going to be transformed to your upgraded theme
- Open your folder with your 1.3 theme
- Merge your 1.3 img folder with the 1.4 img folder to keep both old and new pictures to your new template
- Put your old footer.tpl to the 1.4 theme
- Put your old global.css to to new 1.4 template
- header.tpl are mostly changed in premium themes, and it can look different from theme to theme. Your 1.3 header.tpl will not work on the 1.4 version. So therefore you have to change it. Copy and past is the key. Whats between <head> and </head> must be replaced in your old 1.3 header.tpl also what is below </head> has to be changed E.g
<body {if $page_name}id=”{$page_name|escape:’htmlall’:'UTF-8′}”{/if}>
{if isset($ad) && isset($live_edit)}
{include file=”$tpl_dir./live_edit.tpl”}
{/if}
{if !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}
<div id=”restricted-country”>
<p>{l s=’You cannot place a new order from your country.’} <span>{$geolocation_country}</span></p>
</div>
{/if}
{if isset($ad) && isset($live_edit)}
{include file=”$tpl_dir./live_edit.tpl”}
{/if}
{if !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}
<div id=”restricted-country”>
<p>{l s=’You cannot place a new order from your country.’} <span>{$geolocation_country}</span></p>
</div>
{/if}
Also the new header_logo code is different from 1.3 to 1.4. The new code is:
<a id=”header_logo” href=”{$base_dir}” title=”{$shop_name|escape:’htmlall’:'UTF-8′}”>
<img src=”{$img_ps_dir}logo.jpg?{$time}” alt=”{$shop_name|escape:’htmlall’:'UTF-8′}” {if $logo_image_width}width=”{$logo_image_width}”{/if} {if $logo_image_height}height=”{$logo_image_height}” {/if} />
</a>
<img src=”{$img_ps_dir}logo.jpg?{$time}” alt=”{$shop_name|escape:’htmlall’:'UTF-8′}” {if $logo_image_width}width=”{$logo_image_width}”{/if} {if $logo_image_height}height=”{$logo_image_height}” {/if} />
</a>
- Save the new 1.4 theme-folder, name it whatever you want. I suggest now to put the new theme to a 1.4 testsite as it is far from ready.
CSS WORK
First we have to see the structure for the CSS-files, and see the differences between 1.3 and 1.4
In 1.3 all style is managed by global.css. It means that all that you see on your shop included modules are managed by the gloabal.css.
In the new Prestashop 1.4 is the css-files divided. We have global.css who manage most of the general stuff on your site, but we also have css-files that manage your modules and other css-files that manage parts of your shop (see picture of structure)
In 1.3 all style is managed by global.css. It means that all that you see on your shop included modules are managed by the gloabal.css.
In the new Prestashop 1.4 is the css-files divided. We have global.css who manage most of the general stuff on your site, but we also have css-files that manage your modules and other css-files that manage parts of your shop (see picture of structure)
So what we got here is a lot css files, what use to be in global.css should now be divided in many parts.
I suggest you to install the modules that you need for your shop and then start to editing css code to make it looks nice.
Lets say i install the “New Product Block Module” and when i look in my shop after installed it, it looks like hell. It looks like this cause it not got it style directive from the global.css but insted it got it from blocknewproducts.css in themes/your_new_theme/css/modules/blocknewproducts.css
I suggest you to install the modules that you need for your shop and then start to editing css code to make it looks nice.
Lets say i install the “New Product Block Module” and when i look in my shop after installed it, it looks like hell. It looks like this cause it not got it style directive from the global.css but insted it got it from blocknewproducts.css in themes/your_new_theme/css/modules/blocknewproducts.css
So basicly what you need to do is to find the css-code for example “blocknewproducts” you have in global.css, cut it from there and paste it to the new directory: i this case: blocknewproducts.css
Like above you have to do with every module that you need in your shop. This is the correct way to do it. Nice and clean
Like above you have to do with every module that you need in your shop. This is the correct way to do it. Nice and clean
The Easier Way
But if you dont have time/or dont want to edit css code(cut and copy from global.css to new directories) you can do it in an easier way.
You can change the path for what css-file your module is using.
For example the “New Product Block Module” – If we look in the file modules/blocknewproducts/blocknewproducts.php in the third last row we can see:
You can change the path for what css-file your module is using.
For example the “New Product Block Module” – If we look in the file modules/blocknewproducts/blocknewproducts.php in the third last row we can see:
Tools::addCSS(($this->_path).’blocknewproducts.css’, ‘all’);
You can delete that code and put this code instead:
Tools::addCSS(($this->_path).’global.css’);
global.css
You have to take a look at the global.css for both prestashop 1.3 and 1.4 and compare them. Code can be missing in your old global.css
Example of missing code in your prestashop 1.3 global.css can be this, their might be more missing code i guess, as this is only an example.
In this case it is css code for “one page checkout” Se code below:
Example of missing code in your prestashop 1.3 global.css can be this, their might be more missing code i guess, as this is only an example.
In this case it is css code for “one page checkout” Se code below:
#order-opc tfoot p {
margin: 0;
float: left;
width: 85%
}
#order-opc tfoot span {
float: right;
width: 15%;
display: block
}
#order-opc #voucher fieldset {
border: 1px solid #bdc2c9;
padding: 0.7em
}
#order-opc form#voucher fieldset #display_cart_vouchers {
margin-top:5px;
clear:both;
float:left;
}
#order-opc form#voucher fieldset #display_cart_vouchers .voucher_name {
color:#DD2A81;
font-weight:bold;
cursor:pointer;
}
#order-opc form#voucher h4,
#order-opc form#voucher p,
#order-opc form#voucher .button { display: inline }
#order-opc form#voucher h4 {
float: left;
line-height: 1.5em;
margin-right: 6em
}
#order-opc #order_carrier {
clear: both;
margin-top: 1em;
border: 1px solid #bdc2c9;
padding: 0.5em
}
#order-opc #order_carrier h4 {
width: 50%;
display: inline
}
#order-opc #order_carrier img { vertical-align: middle }
#order-opc #order_carrier span { margin: 0 0.2em }
margin: 0;
float: left;
width: 85%
}
#order-opc tfoot span {
float: right;
width: 15%;
display: block
}
#order-opc #voucher fieldset {
border: 1px solid #bdc2c9;
padding: 0.7em
}
#order-opc form#voucher fieldset #display_cart_vouchers {
margin-top:5px;
clear:both;
float:left;
}
#order-opc form#voucher fieldset #display_cart_vouchers .voucher_name {
color:#DD2A81;
font-weight:bold;
cursor:pointer;
}
#order-opc form#voucher h4,
#order-opc form#voucher p,
#order-opc form#voucher .button { display: inline }
#order-opc form#voucher h4 {
float: left;
line-height: 1.5em;
margin-right: 6em
}
#order-opc #order_carrier {
clear: both;
margin-top: 1em;
border: 1px solid #bdc2c9;
padding: 0.5em
}
#order-opc #order_carrier h4 {
width: 50%;
display: inline
}
#order-opc #order_carrier img { vertical-align: middle }
#order-opc #order_carrier span { margin: 0 0.2em }
#order-opc #gift_div label, #order #gift_div textarea {
display: block;
width: 100%;
margin: 1em 0
}
display: block;
width: 100%;
margin: 1em 0
}
Tpl.files
Finally we have the tpl files, your custom theme, all theme by the way have a lots of them.
Hopefully your template provider has not changed code in it, then you don’t need to worry abut this at all.
Hopefully your template provider has not changed code in it, then you don’t need to worry abut this at all.
But if your theme has been changed in the code in some tpl file you have to change it to make it work properly, this guide dont include this issue.
wow ! wonderful share here
ReplyDeletePrestashop Theme Developer