How to 'Copy' a theme? (default or another one)

[ella1007]

Hi,

I want to try designing/modifying the default theme myself but would like to keep the default intact just in case. So I need to make a copy from default theme (complete copy), so I can work on it. Is that possible and how to do it? And could I make a copy of another theme (lets say I buy one & again, keep that one & make copy so I can test modifications). I would feel safer in modifying a copy, just in case I mess up something..

Thanks so much

PS: I hired a freelancer to design a theme but it's not working out & he messed up the default... is there any way to get it back unaltered?

[Dave Angel]

ella,

to get a new copy of the deafult theme just unzip your download again and copy out the theme.

if you want to start a new theme simply go into the themes folder in prestashop and copy the 'default' theme. paste it using a different name like 'nov-ella1'.

to activate this new theme simply go into the Back Office (BO) and go to Preferences > Appearance and select the radio button next to your new theme 'nov-ella1'.

any modifications should be made within your new theme folder.

the best way to start modifying is to find a theme you like download it, keep the original safe, and copy it into your themes folder and then carry out some tweaks to make it yours...

starting a theme from scratch can be time consuming and unless you know what you are doing can become a nigthmare.

make sure you download firefox and its plugin firebug as this will be one of the most invaluable tools you will ever use for designing/modifying web pages.

check your new theme in as many browsers as you can before you go live. as forest gump once said 'browsers are like a box of chocolates, you never know what your going to get...'

always check the forum for help - someone will always reply - eventually.

Regards,

Rob.

[ella1007]

Thank you Rob for such informative advice & I did notice the joke :-) I already found a theme I like but would like to try modifying it. Could you explain some points a little more please. I'm not a tech person & new to presta... so learning both at the same time.

I used Softaculous to install, so it was basically one click so not sure where to 'unzip' & 'copy' the default/or another theme. Is it in File Manager/c-panel? What is the exact file's name to copy and where do I paste it in theme folder in prestashop? Is it in File Manager/c-panel again & what's the exact folder name..

I want to make copies of both default and another theme (so can practice on both).

Ella

PS: I already have Firefox, do I need to download Firebug separately? and I guess I shouldn't use internet explorer then while working on the design... (have both FF & IE)

[Dave Angel]

Ella,

FIREBUG

this is a firefox plug-in that allows you to view the css (amongst other things) that the page you are viewing is using.
you can also change the css directly in firebug to adjust things on screen in real time. this can be very handy indeed.



THEMES

if you already have your theme that you like then great, over half of the work is done.
simply place your new theme folder (lets call it 'novella' again) inside the following directory; prestashop/themes/
you should see a folder called 'default' in there. this is of course the default theme for prestashop.
Now, once you have placed your new them folder 'novella' in the prestashop/themes directory you can go to your web browser log into your Back Office (BO - a really bad acronym) and go into the Preferences tab then Appearance tab. you should be able to activate the 'novella' theme from there. Check the shop to see if it has worked. If it has then as tony the tiger would say Grrrrrreat!

the main css file is called global.css (this is in the novella folder - do not edit any css outside this folder until you know what you are doing) this is the bad boy that you need to dominate and make your bitch. it controls near enough everything. if you are not sure what you are editing simply chuck a command in like border:2px solid red; and this will place a solid red border around the item you are editing.

the only other css you may need to edit is in the modules folder inside the novella folder. each module may have its own css file.


WAMP

if you are not sure what you are doing in cPanel try working locally first. Download something like WAMP (Windows Apache Mysql Php) and this wil let you mooch around your own computer and discover the file structure of Prestashop. WAMP is a one click install so no worries there.

I will check in from time to time to see if you have any other questions.

laters.

Rob.

[ella1007]

Rob, thanks again! There is lots of info to digest... And I like your sense of humor :-)

I'm already practicing on modifying the theme & some modules. Haven't touched CSS yet, just HTML but getting there.

[Dave Angel]

Personally I would start attacking the css as early as you can as you can alter the website quite drastically with little effort.

Prestashop has all the basic functionality most sites need and css tweaks are relatively painless and will not break the actual coding. Apart fromt the fact that Html changes can break the functionality of the site it can also take a lot to produce some minor changes.

[trevorgilligan]

hi folks, if i have multistore option and i want shop2 to use the exact same theme as theme1 , say i want to call it theme2, so i have shop2 using theme2, how do i go about this? thank you @ella1007 @daveangel