PrestaShop 1.3 Theming – Beginner’s Guide


PrestaShop 1.3 Theming – Beginner’s Guide
eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats
$20.39
save 15%!
Print + free eBook + free PacktLib access to the book: $63.98    Print cover: $39.99
$39.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Reviews
Support
Sample Chapters
  • Control the look and feel of your PrestaShop store by creating customized themes
  • Learn the tips and tricks to make theming in PrestaShop easier
  • Create your own PrestaShop theme in a few simple steps
  • Learn how to use PrestaShop back office panel to make simple changes to your theme as well as tweaking the right lines of code to customize the look of your store
  • A beginner's guide packed with step-by-step exercises to simplify your task of developing a new theme for PrestaShop stores

Book Details

Language : English
Paperback : 312 pages [ 235mm x 191mm ]
Release Date : July 2010
ISBN : 1849511721
ISBN 13 : 9781849511728
Author(s) : Hayati Hashim
Topics and Technologies : All Books, CMS and eCommerce, Beginner's Guides, e-Commerce, Open Source


Table of Contents

Preface
Chapter 1: Customizing PrestaShop
Chapter 2: Customizing PrestaShop Theme Part I
Chapter 3: Customizing PrestaShop Theme Part 2
Chapter 4: Adjusting Style Sheets
Chapter 5: Applying Images
Chapter 6: Steps for Creating Themes
Chapter 7: Tips and Tricks to Make PrestaShop Theming Easier
Chapter 8: Deploying Your New Themes
Appendix: Pop Quiz–Answers
Index
  • Chapter 1: Customizing PrestaShop
    • What you need to know
    • Getting familiar with PrestaShop
      • The PrestaShop sample sites
    • Time for action—Overviewing the back office administration panel
      • Preferences
      • Catalog
      • Modules
      • Tools
    • Making the most basic change to the default theme
    • Time for action—Making simple changes to affect look of the store
    • Planning for your online store new theme design
    • Summary
  • Chapter 2: Customizing PrestaShop Theme Part I
    • The default layout
    • Modules
    • Time for action—Installing and enabling modules
    • Positioning modules
      • Hooks
      • Transplanting modules
    • Time for action—Installing the Home text editor module
    • Time for action—Installing, enabling, and configuring the Categories block
    • Time for action—Moving the modules within the column
    • Time for action—Moving the blocks
    • Summary
  • Chapter 3: Customizing PrestaShop Theme Part 2
    • Copying the default theme file
    • Logo
    • Time for action—Replacing the default logo and favicon on your site
    • The Center Editorial Block
    • Time for action—Modifying the Center Editorial Block
    • Top of pages block
    • Time for action—Modifying the Top of pages
    • The FEATURED PRODUCTS block
    • Time for action—Adding the FEATURED PRODUCTS block
    • Time for action—Adding an item as a Featured Product
    • Time for action—To edit, display, or delete a Featured Product
    • Time for action—Adding a new product to your FEATURED PRODUCTS block
    • Footer
    • Time for action—Adding new pages on the Footer Link block
    • Title
    • Time for action—Modifying your page title
    • Modules block
    • Time for action—Modifying block names
    • Summary
  • Chapter 4: Adjusting Style Sheets
    • Getting to know the basics of PrestaShop theme
    • Time for action—Getting to know the PrestaShop CSS files
    • A brief background to Cascading Style Sheets
      • CSS syntax
      • global.css
      • maintenance.css
    • Time for action—Modifying the maintenance mode
      • scenes.css
    • Modifying colors in your theme
    • Time for action—Deciding on a color scheme
    • Time for action—Changing the main page background color
    • Changing the blocks background colors
    • Time for action—Changing the default blocks' background color
    • Time for action—Changing the exclusive blocks' background color
    • Time for action—Changing the background color of the CATEGORIES block header
    • Changing the color in the FEATURED PRODUCTS block
    • Time for action—Changing the color of the background for the FEATURED PRODUCTS block
    • Time for action—Changing the color of the tab for the FEATURED PRODUCTS block
    • Time for action—Changing the background color of the footer
    • Time for action—Changing the header user block background color
    • Modifying text
      • Changing the color of the text
    • Time for action—Changing the color of the text in the block header of the default blocks
    • Time for action—Changing the color of the text of the header on the MANUFACTURERS block
    • Time for action—Changing the color of the text in the exclusive blocks (CART, SPECIALS)
    • Time for action—Changing the color of the text in the top user information block
    • Time for action—Changing the color of the text of the footer
    • Time for action—Changing the color of the text in the center column
    • Time for action— Changing the color of the text in the FEATURED PRODUCTS block
    • Time for action—Changing the color of the text in the CART block
    • Time for action—Changing the size of the text in the default block
    • Time for action—Changing the size of the text and font style on the center column blocks
    • Time for action—Changing the size of the text and font style on the footer blocks
    • Changing the color of the border
    • Time for action—Changing the color of the border for the default block
    • Time for action—Changing the color of the border in the footer
    • Modifying the paragraph
    • Time for action—Modifying lines in the center column
    • Saving your changes
    • Summary
  • Chapter 5: Applying Images
    • Editing CSS to modify background images
    • Time for action—Viewing image information
    • Time for action—Finding the appropriate images
    • Time for action—Basic CSS editing for modifying background images
    • Repeated background image
    • Time for action—Repeating images horizontally
    • Time for action—Repeating images vertically
    • Time for action—Repeating images horizontally and vertically
    • Time for action—Using image with no repetition
    • Compressing properties
    • What to replace to get a fresh theme
    • Changing the background images for your new theme
    • Time for action—Adding a background pattern
    • Time for action—Changing the block header background image
    • Adding a new logo
    • Time for action—Replacing logo using the header.tpl file
    • Positioning background image
    • Modifying the home page logo
    • Time for action—Deleting the home page logo
    • Time for action—Replacing the home page logo
    • Replacing icons
    • Time for action—Replacing selected icons
    • Time for action—Replacing the default icons with another icon set
    • Summary
  • Chapter 6: Steps for Creating Themes
    • Understanding PrestaShop architecture
    • Visualizing what you want to achieve
    • Time for action—Choosing a color scheme
    • Time for action—Creating a new theme directory
    • Developing the raw material
    • Time for action—Modifying the layout of the main pages
      • header.tpl
      • footer.tpl
    • Time for action—Changing the navigation by using third party modules
    • Time for action—Adding an item on the top menu bar
    • Time for action—Omitting some information from the Featured Products block
    • Time for action—Replacing the block header tabs and block background images
    • Time for action—Changing the block content color
    • Validating the theme
    • Packaging the new theme
    • Making a two column theme
    • Get Smarty
    • Knowing jQuery
    • Summary
  • Chapter 7: Tips and Tricks to Make PrestaShop Theming Easier
    • Adding more interactivity to your PrestaShop site
    • Time for action—Adding YouTube or other video element
    • Time for action—Installing and enabling the YouTube module
    • Time for action—Positioning the YouTube module
    • Time for action—Configuring the YouTube module
    • Time for action—Setting the player for the YouTube module
    • Adding carousels in your PrestaShop site
    • Time for action—Using the jQuery carousel
    • Time for action—Positioning the jcarousel within the home page
    • Time for action—Changing the attributes
      • Limitation
    • Gallery view
    • Time for action—Adding gallery view
    • Time for action—Replacing images in the gallery
    • Adding interactivity in the Featured Products block
    • Time for action—Adding a moving box in the Featured Products block
    • Using top navigation menu bar
    • Time for action—Adding a horizontal menu
    • Time for action—Using multiple languages on the Wiznav top navigation bar module
      • Limitations
    • Time for action—Changing the color and text of the menu bar
    • Time for action—Putting Categories in the horizontal top menu
    • Footer module
    • Time for action—Inserting an image in the footer module
    • Page peel
      • Limitations
    • Free third party module files used
    • Summary
  • Chapter 8: Deploying Your New Themes
    • Installing a theme on a production site
    • Time for action—Deploying from the same host
    • Time for action—Deploying from another computer
    • Installing a third party theme "element" to your site
    • Time for action—Modifying the global.css for the element theme
    • Checking the browser's compatibility
      • What validating means?
      • Why validate?
      • Where to validate?
        • XHTML
        • XML
      • The validating process
    • File structure of a theme
    • Summary
  • Appendix: Pop Quiz–Answers
    • Chapter 1
      • Customizing PrestaShop
    • Chapter 2
      • Customizing PrestaShop Theme Part I
    • Chapter 5
      • Applying Images
    • Chapter 7
      • Tips and Trick to Make Prestashop Theme Easier

Hayati Hashim

Hayati Hashim's undergraduate study was at Queensland University, Australia and she earned her Master's Degree in Multimedia at Multimedia University, Malaysia. She is currently the Managing Director of Pixel Bytes, a web, multimedia, and e-learning company. She has been involved in most of the company’s web development projects. Hayati has also written and presented a paper on "Using online platform in internationalising Malay language" and has done exploratory research study on mobile learning in a local tertiary institution. She has also taught students on various aspects of multimedia, web design, development, and e-commerce projects. Her latest field of interest is related to mobile application. She works mostly on open source platform and has been involved in the web development  that includes Moodle, Joomla!, Zen Cart, and PrestaShop.

Code Downloads

Download the code and support files for this book.


Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


Errata

- 3 submitted: last submission 31 Jan 2014

Errata type: Code | Page numbers: 160,161

('../img/myimage.jpg); should be ('../img/myimage.jpg');

 

Errata type: Code | Page number: 162

('../img/myimage.jpg) should be ('../img/myimage.jpg');

 

Errata type: Code | Page number: 163

('../img/mylargeimage.jpg) should be ('../img/mylargeimage.jpg');

 

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

PrestaShop 1.3 Theming – Beginner’s Guide +    PrestaShop 1.3 Beginner's Guide =
50% Off
the second eBook
Price for both: $34.95

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Explore the various ways to modify the default PrestaShop theme
  • Customize and tweak your theme's layout
  • Edit an existing PrestaShop theme to meet your business needs
  • Control the look of every part of your store by making the right modifications to the code
  • Make your store interactive by using third-party modules and JavaScript
  • Find the resources to make your task in developing the theme easier
  • Build your own PrestaShop theme in simple steps so that you can invest more time into creative aspects
  • Test the theme on various browsers and package it for easy deployment to your store

In Detail

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.

A convenient and easy-to-follow guide to customizing and developing PrestaShop themes

Approach

This book is packed with step-by-step exercises that illustrate how to explore the different ways to create your themes for PrestaShop. Each chapter begins with an explanation of the topic and provides a quick exercise that can be applied to your theme. All topics are discussed using a simple yet practical approach to ensure that concepts are grasped easily.

Who this book is for

This book is meant for beginners to PrestaShop who want a hassle-free way to come up with their own themes. If you are a designer who enjoys creative work but does not want to spend too much time exploring the code, this book is for you. This book is also useful for those "layman" online store owners, who want to do their own modifications for their PrestaShop store.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software