Modifying Themese

[ivan20012]

Hi -- I have installed XAMPP and Prestashop on my computer; I wanted to work on this locally on my computer before uploading to a host.

After following tutorials on the basics of PrestaShop, I moved on to a tutorial on modifying themes.

I copied the prestashop themes folder and renamed it "prestashop--ThemeRev1." Therefore, within my "themes" folder there are now two folders "prestashop" and "prestashop--ThemeRev1." There are also two single files: index.php and debug.tpl.

I now have two themes in the admin part of my shop. However, even though I elect and save "prestashop--ThemeRev1," all my changes (for example, changing the logo or the position of modules) are also being made to the theme called prestashop. I first make the changes on "prestashop--ThemeRev1," but when I switch back to "prestashop" the changes are also on that theme.

It seemed to me that the problem may lie in the fact that when I switch back to the first theme, I press "save" and, therefore, all the changed settings get saved onto the original theme. But I could not figure out how to switch themes without pressing "save."

I know there is something simple that I am missing here, but I can't quite figure it out. Could someone explain what steps I can take to make changes to only one theme, while leaving the settings on the original theme intact?

Thanks

[razaro]

for example, changing the logo or the position of modules

Well if you do this from back office it doesn't make any effect on themes.
It is global settings.

What you need to do is change global.css in prestashop—ThemeRev1.css folder, change tpl files in prestashop—ThemeRev1 folder or overwrite default module display by adding module folder to your prestashop—ThemeRev1 folder.

For example if you want to edit homefeatured module make two new folders inside your theme so path would be
prestashop—ThemeRev1/modules/homefeatured and there you copy default homefeatured.tpl and make changes to it.

[ivan20012]

Thanks for the response but, unfortunately, I am too inexperienced to understand it. Maybe it would help if I explained my level/what I have learned to understand so far in terms of web pages and Prestashop.

First, I started this whole process by learning to use Kompozer (HTML editor) to create a website. So, at this point, I can create a simple html webpage, with columns, header, footer, etc. I also have an understanding of stylesheets -- as they apply to html files. By playing around with the program for several weeks, I learned how to understand some code, be able to look at the code sometimes see where I was making a mistake, etc.).

I then moved on to trying to understand Prestashop. I learned that Prestashop normally is downloaded to a server (which I don't have yet, since I have not uploaded a page to a host), but that one could also download Prestashop and Xampp to one's hard drive. That is what I have done. While I understand that Prestashop also uses stylesheets and html code, I really don't yet understand the mechanics/how (and I may never know/understand how).

I also understand, in theory, that there two different ways to make changes to themes: one through http://127.0.0.1/prestashop/myshopadmin and another, presumably, by marking up the codes. Because I am following a tutorial, I am learning how to move things around, etc., through the http://127.0.0.1/prestashop/myshopadmin.

While I can see in windows explorer that prestashop is downloaded within the htdocs folder of my Xampp program, I can also see and understand that prestashop has many folders and sub-folders, and I also understand that the contents of these folders control the look of the store, and the different components of the store, I do not yet understand specifically how the contents of those folders relate to the appearance of the shop. None of the basic tutorials is explaining what a .tpl file is, or what the modules folder does. The tutorials are first explaining how to move modules around, say from the left column to the right column, from the admin part of the shop.

By way of example, when working with Kompozer, it took a little time for me to understand that if I make changes to two separate html files saved with different names, but that use the same .css file, the changes made on one html file also would appear on the other, Rev1 html file.

All that I can figure out from your message is that, apparently, something similar is going on here. I must be making a change to one file that is linked to both themes, so the changes are appearing simultaneously on both themes. But that is all that I am able to understand from your message.

So my follow-up questions are

(a) specifically how does one do what you suggest?

(i) In windows explorer, do I just rename the global.css file within the prestashop--ThemeRev1/css folder, for example, changing the name to globalRev1.css? When you change the .css file in Winows Explorer and you are working with Kompozer, you have to make sure that you then link/import the newly renamed .css into the html file. Otherwise it will be as if the html webpage has no .css at all. Would I have to do that here?

(ii) what do you mean by change the tpl files? Do you mean in Windows Explorer I should go through the list of tpl files in prestashop-ThemeRev1 and rename each file, one by one?

(iiii) when you say I could "add the module folder to your prestashop-ThemeRev1 folder", do you mean in Windows Explorer to copy the modules file from the htdocs\prestashop folder into the prestashop-ThemesRev1 folder? Would I have to give the modules folder a different name, like modules-Rev1?


( As I mentioned, I was following a tutorial that says it is possible to make a second theme in a few simple steps. I'd love to know what I did wrong, or whether the instructions are faulty. I did notice that the tutorial I am following seems to assume that I am working on a server, as opposed to on my computer with Xampp. Is that where my mistake is? Those instructions are:

"Go to the PrestaShop_1.3.1/themes/PrestaShop folder. Copy this entire folder and save it on your computer. You may rename the theme accordingly, for example, theme1. Compress this into a ZIP file. Upload the renamed folder into the themes directory on your hosting through your cPanel or FTP. You will now have two themes in your /themes folder which are PrestaShop and theme1. You can now log in to your PrestaShop Back Office | Preferences | Appearance and switch to your theme1 that you just installed and click on the Save button."

The only modification I made to these instructions is that I didn't create a zip, and I just copied the folder and put it within the themes folder in Windows Explorer.

Sorry for the long post, but I wanted to be clear about how much I don't know! It is also important to figure out where I make mistakes in following instructions, so that I learn to follow instructions better in the future.

[razaro]

I also understand, in theory, that there two different ways to make changes to themes: one through http://127.0.0.1/prestashop/myshopadmin and another, presumably, by marking up the codes.

Both are part of making new theme, first - through http://127.0.0.1/prestashop/myshopadmin - will move modules around but you must do that for each theme.So if you just change theme modules position will be the same.
Some themes have hooks.jpg file which is screen-shot of Back Office >> Modules >> Positions page so you know what modules you need to position/transplant .

For tpl file explanation look here. Basically it is HTML file with variables from php file usually same name as tpl file.(ex. product.php and product.tpl ).

(i) In windows explorer, do I just rename the global.css file within the prestashop—ThemeRev1/css folder, for example, changing the name to globalRev1.css? When you change the .css file in Winows Explorer and you are working with Kompozer, you have to make sure that you then link/import the newly renamed .css into the html file. Otherwise it will be as if the html webpage has no .css at all. Would I have to do that here?

You don't need to rename it. File global.css contains all styles for your theme and it is linked in prestashop—ThemeRev1/header.tpl which is included in all pages.

(ii) what do you mean by change the tpl files? Do you mean in Windows Explorer I should go through the list of tpl files in prestashop-ThemeRev1 and rename each file, one by one?

Maybe I wasn't clear you need to change content of tpl files. I don't know if Kompozer can work with tpl files or can show them as html.You can open tpl files in text editor I use Notepad++.Ex.
Open prestashop—ThemeRev1/footer.tpl you will see

        {if !$content_only}


<!-- Right -->

                   {$HOOK_RIGHT_COLUMN}



<!-- Footer -->
{$HOOK_FOOTER}

   {/if}
   </body>
</html>

Now for test delete

<!-- Right -->

                   {$HOOK_RIGHT_COLUMN}

Then open prestashop—ThemeRev1/css/global.css and find line 213

#center_column {
margin:0 0 30px;
overflow:hidden;
width:556px;
}

And change with from 556px to 720px.Now you have layout with two columns left and center.

(iiii) when you say I could “add the module folder to your prestashop-ThemeRev1 folder”, do you mean in Windows Explorer to copy the modules file from the htdocs\prestashop folder into the prestashop-ThemesRev1 folder? Would I have to give the modules folder a different name, like modules-Rev1?

No like I said prestashop—ThemeRev1/modules/ look here for better explanation.

Not sure what is with zip file it ok what you did.

And you maybe be intereseted in two books for prestashop
http://www.prestashop.com/forums/viewthread/59350/general_discussion/book_prestashop_1_dot_3_beginners_guide

http://www.prestashop.com/forums/viewthread/68216/general_discussion/prestashop_1_dot_3_theming__beginners_guide_book

And also sorry for long post :-)

[ivan20012]

I'm still having a hard time. Yes, I can open and edit a TPL file in Kompozer (though, I am a notice at html and css code). I performed 2 tests:

As the first test, I copied the entire modules folder and placed it in Prestashop-ThemeRev1. I then went into http://127.0.0.1/prestashop/myshopadmin and enabled block advertising. I made sure this change was saved to Prestashop-ThemeRev1. I then looked at the Front office, and I could see the advertising block was enabled. I then went back into
myshopadmin, this time going to Preferences/Appearances, I changed the theme back to Prestashop, and I pressed save. However, when I looked at the store from the front office, I could see that the advertising block I had enabled for Prestashop-ThemeRev1 was also now enabled for Prestashop.

As the second test, I went to the site you referred me to. http://www.ecartservice.net/06082009/customising-prestashop-module-templates/. I opened preferences and elected Prestashop-ThemeRev1. I then opened the blockadvertising.tpl file that was within the blockadvertising folder in the modules folder that I had copied to prestashop--ThemeRev1. I deleted the image of the monitor, and attempted to insert my own image. I then went to the front office of the store. Although I was not successful in inserting my own image, I did manage to delete the image that was there. More important, when I switched back to Prestashop, the block advertising module was NOT modified -- it was as I left it, with the default picture of a monitor.

So I have learned that even if the Prestashop-ThemeRev1 has its own modules folder (i.e., themes\prestashop--ThemeRev1\modules), the changes that I made from myshopadmin changed both themes at the same time (even though I do not want this to happen). In contrast, I have learned that I can, one by one, open and modify individual tpl files contained in the modules folder, and the default theme will remain unchanged, while the new theme will be modified.

However, I think it is too difficult for me to be playing around with code. I was sure that there had to be a way to make changes to a theme from the admin part of the site, without opening individual files and editing code. Is there no way to copy certain files within Windows Explorer, and then make changes to one theme from http://127.0.0.1/prestashop/myshopadmin without those changes appearing on the original, default theme? Thanks so much for your help!!