- Open your PrestaShop directory either on your computer or the web server.
- Next, navigate to the default
themesfolder (prestashop_1.3/themes/prestashop) or you can look at your new theme folder. - Now, let's get a better look at each of the important files within it that we will work with.
- Go to your FTP or cPanel administration and look up the new theme
folder you have just created (for example,
../themes/theme1/). - Locate the CSS folder.
- The next screenshot shows where to locate the
/cssfolder:
Within this CSS folder, you will see three CSS files:
These CSS files work with the Smarty template files (.tpl), which are, by default,
located in the modules directory. We have not really got to know
"Smarty" that much yet, but we will begin to do some work here on the Smarty
template files. For now, we will show you the steps to change your CSS file and
understand the relationship with the relevant template (.tpl) files. We will
elaborate more on "Smarty" in Chapter 6, Steps for Creating
Themes.
The global.css file can be daunting for a beginner as it has
many lines. It can make it difficult for you to find the right lines to edit in
order to modify your web page's appearance.
Instead of dissecting the entire file, our tasks will be based on the required output, which will be a result of the modifications we make to the elements.
There will be times when we will refer to certain lines, and you may not see the
same thing in your CSS file, as this is depending on the web developer tools you
use. This is more likely to happen when you copy another theme file which may have
been modified. Here we have used both Web Developer tools and Firebug on Firefox
alternately or both. The key point is to look up the sections as indicated in the
CSS file through /* */.