Book Image

PrestaShop 1.3 Theming - Beginner's Guide

By : Hayati Hashim
Book Image

PrestaShop 1.3 Theming - Beginner's Guide

By: Hayati Hashim

Overview of this book

Themes in PrestaShop are unique and powerful tools to brand your store for a particular corporate image. Using custom themes you can control the look and functionality of your web store, thereby making your site extremely flexible. Although it might sound like an easy task to build a theme, it is quite challenging to create a custom theme that fits your business needs. This book's prime focus is guiding the readers without much technical know-how, thus enabling them to create a new theme that fulfills the needs of their PrestaShop store. By understanding practical ways to develop your theme for PrestaShop speedily, you can invest more time on developing attractive and unique raw materials. It will simplify the challenging task of creating a unique, new PrestaShop theme through easy-to-follow, practical steps. This book shows how to develop professional themes for your PrestaShop store using some simple steps. The book starts by exploring the various ways of changing the looks (including modules) of your PrestaShop store. It shows you how certain back office administration adjustments can affect the appearance and theme of your store. It then takes you through understanding the code modification of a default theme that results in a new look for your existing theme. The book also covers understanding the PrestaShop architecture and essential syntaxes that control the look of a PrestaShop store. You will also learn about the files that hold the key to themes. By the end of this book, you will have grasped the knowledge to make advanced changes by tweaking the right CSS and module files in order to achieve highly specific outcomes.
Table of Contents (15 chapters)
PrestaShop 1.3 ThemingBeginner’s Guide
Credits
About the Author
About the Reviewers
Preface
4
Adjusting Style Sheets
Index

Time for action—Adding a background pattern


The default background property value for the body is white.

Let's change the background color and add a background image to the body of your site using the following steps:

  1. Add the URL you want to use for the background image.

  2. Edit the background-color property to the background and insert it in the correct section, as shown in the following code:

    body {
      background: white; 
      font-size: 11px;
      font-family: Verdana, Arial, Helvetica, Sans-Serif;
      color: #5d717e;
      text-align:center
    }

    Here we are using an 80x80 pixel square image that is used throughout as a background. The image file we used is shown in the following screenshot:

  3. It is best to download the image and save it to the image (img) folder in your theme directory.

  4. Edit the CSS file and change the following line:

    background: blue url(../img/bg00012.gif);
    
  5. This particular section will look like the following snippet of code:

    body {
      background: blue url (../img/bg00012.gif);
      font-size: 11px...