Developing the raw material

Consider how much a revamp can do in terms of small things such as buttons, icons, or tabs, as we have seen in Chapter 5, Applying Images. These are mostly the background images that you need to look up in the img folder. The references for these images are mostly within the global.css file, but as it is a large file, so you will have to go section by section.

We have gone through some of these in the previous chapters as well. We also learned how to view it using Firebug or the Web Development extension for Firefox.

On top of these, make sure you have taken sufficient pictures of your own products to be listed in the products' images. It is best if you tabulate this information and make a checklist of them.

Now, let's assume you want to create a PrestaShop store dealing with online florists.

The steps we will cover next would be:

  • Replacing the home page logo.
  • Creating the top horizontal menu bar.

Once you have identified the concept of your new PrestaShop store, for example, minimalistic, modern, funky, or artistic, you need to develop the elements to be used in it. For this task, our site will be minimalistic and will use light pastel colors.

We will start with the following:

  • The home page logo (banner), which is approximately 980x300 pixels (the original home page logo is 300 pixels in height, but you may adjust this according to your central image size).
  • Your company logo, which can be approximately the size of the original logo, that is, 224x73 pixels (you may adjust this accordingly).

You can try to generate your own banners quickly using the following links:

You may still need to take or create some images or pictures which can be added in to the banner to make it unique and relevant to your product or store theme.

You can also use common software such as GIMP, Photoshop, or Illustrator if you have a the artistic flair.

For replacing our home page logo and the main logo, the steps are covered in detail in Chapter 2, Customizing PrestaShop Theme Part I.

However, as the homepage logo that we are using in this example is wider than the default theme's logo, we will look at how to modify the layout of the main page in the next section.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.129.19.251