You are previewing PrestaShop 1.3 ThemingBeginner’s Guide.
O'Reilly logo
PrestaShop 1.3 ThemingBeginner’s Guide

Book Description

Overview of PrestaShop 1.3 Theming – Beginner’s Guide

  • 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

  • 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

    Table of Contents

    1. PrestaShop 1.3 Theming Beginner’s Guide
      1. PrestaShop 1.3 Theming Beginner’s Guide
      2. Credits
      3. About the Author
      4. About the Reviewers
      5. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Errata
          2. Piracy
          3. Questions
      6. 1. Customizing PrestaShop
        1. What you need to know
        2. Getting familiar with PrestaShop
          1. The PrestaShop sample sites
        3. Time for action — Overviewing the back office administration panel
          1. Preferences
          2. Catalog
          3. Modules
          4. Tools
        4. Making the most basic change to the default theme
        5. Time for action — Making simple changes to affect look of the store
          1. What just happened?
          2. Have a go hero Changing looks through simple CSS editing
          3. Pop quiz
        6. Planning for your online store new theme design
        7. Summary
      7. 2. Customizing PrestaShop Theme Part I
        1. The default layout
        2. Modules
        3. Time for action — Installing and enabling modules
          1. Have a go hero Choosing the modules to install
        4. Positioning modules
          1. Hooks
          2. Transplanting modules
        5. Time for action — Installing the Home text editor module
          1. Have a go hero Adding more blocks
        6. Time for action — Installing, enabling, and configuring the Categories block
        7. Time for action — Moving the modules within the column
        8. Time for action — Moving the blocks
          1. What just happened?
          2. Have a go hero Configuring the module on your page
          3. Pop Quiz
        9. Summary
      8. 3. Customizing PrestaShop Theme Part 2
        1. Copying the default theme file
        2. Logo
        3. Time for action — Replacing the default logo and favicon on your site
          1. What just happened?
        4. The Center Editorial Block
        5. Time for action — Modifying the Center Editorial Block
          1. What just happened?
        6. Top of pages block
        7. Time for action — Modifying the Top of pages
          1. What just happened?
        8. The FEATURED PRODUCTS block
        9. Time for action — Adding the FEATURED PRODUCTS block
          1. What just happened?
        10. Time for action — Adding an item as a Featured Product
          1. What just happened?
        11. Time for action — To edit, display, or delete a Featured Product
        12. Time for action — Adding a new product to your FEATURED PRODUCTS block
          1. What just happened?
        13. Footer
        14. Time for action — Adding new pages on the Footer Link block
          1. What just happened?
        15. Title
        16. Time for action — Modifying your page title
          1. What just happened?
        17. Modules block
        18. Time for action — Modifying block names
          1. What just happened?
          2. Have a go hero Removing the "Powered by PrestaShop" at the footer link
        19. Summary
      9. 4. Adjusting Style Sheets
        1. Getting to know the basics of PrestaShop theme
        2. Time for action — Getting to know the PrestaShop CSS files
        3. A brief background to Cascading Style Sheets
          1. CSS syntax
            1. global.css
            2. maintenance.css
        4. Time for action — Modifying the maintenance mode
          1. What just happened?
            1. scenes.css
        5. Modifying colors in your theme
        6. Time for action — Deciding on a color scheme
          1. What just happened?
        7. Time for action — Changing the main page background color
          1. What just happened?
        8. Changing the blocks background colors
        9. Time for action — Changing the default blocks' background color
          1. What just happened?
        10. Time for action — Changing the exclusive blocks' background color
        11. Time for action — Changing the background color of the CATEGORIES block header
          1. Have a go hero Making unique color for each block header
        12. Changing the color in the FEATURED PRODUCTS block
        13. Time for action — Changing the color of the background for the FEATURED PRODUCTS block
          1. What just happened?
        14. Time for action — Changing the color of the tab for the FEATURED PRODUCTS block
          1. What just happened?
        15. Time for action — Changing the background color of the footer
          1. What just happened?
        16. Time for action — Changing the header user block background color
          1. What just happened?
          2. Have a go hero Adding code in a section to change the background color
        17. Modifying text
          1. Changing the color of the text
        18. Time for action — Changing the color of the text in the block header of the default blocks
        19. Time for action — Changing the color of the text of the header on the MANUFACTURERS block
        20. Time for action — Changing the color of the text in the exclusive blocks (CART, SPECIALS)
        21. Time for action — Changing the color of the text in the top user information block
        22. Time for action — Changing the color of the text of the footer
        23. Time for action — Changing the color of the text in the center column
        24. Time for action — Changing the color of the text in the FEATURED PRODUCTS block
          1. What just happened?
        25. Time for action — Changing the color of the text in the CART block
          1. Have a go hero Changing the color of the text in the columns in one place
        26. Time for action — Changing the size of the text in the default block
          1. What just happened?
        27. Time for action — Changing the size of the text and font style on the center column blocks
          1. What just happened?
        28. Time for action — Changing the size of the text and font style on the footer blocks
          1. What just happened?
        29. Changing the color of the border
        30. Time for action — Changing the color of the border for the default block
          1. Have a go hero Changing all the colors of the borders of the block header
          2. What just happened?
        31. Time for action — Changing the color of the border in the footer
        32. Modifying the paragraph
        33. Time for action — Modifying lines in the center column
        34. Saving your changes
        35. Summary
      10. 5. Applying Images
        1. Editing CSS to modify background images
        2. Time for action — Viewing image information
        3. Time for action — Finding the appropriate images
        4. Time for action — Basic CSS editing for modifying background images
        5. Repeated background image
        6. Time for action — Repeating images horizontally
        7. Time for action — Repeating images vertically
        8. Time for action — Repeating images horizontally and vertically
        9. Time for action — Using image with no repetition
        10. Compressing properties
        11. What to replace to get a fresh theme
        12. Changing the background images for your new theme
        13. Time for action — Adding a background pattern
          1. What just happened?
        14. Time for action — Changing the block header background image
          1. Have a go hero Replacing image in the blocks
          2. What just happened?
        15. Adding a new logo
        16. Time for action — Replacing logo using the header.tpl file
        17. Positioning background image
          1. Pop quiz
        18. Modifying the home page logo
        19. Time for action — Deleting the home page logo
        20. Time for action — Replacing the home page logo
        21. Replacing icons
        22. Time for action — Replacing selected icons
        23. Time for action — Replacing the default icons with another icon set
          1. Have a go hero Replacing all icons using your own
          2. What just happened?
        24. Summary
      11. 6. Steps for Creating Themes
        1. Understanding PrestaShop architecture
        2. Visualizing what you want to achieve
        3. Time for action — Choosing a color scheme
          1. What just happened?
          2. Have a go hero Identifying a theme to use
        4. Time for action — Creating a new theme directory
        5. Developing the raw material
        6. Time for action — Modifying the layout of the main pages
          1. header.tpl
          2. footer.tpl
          3. What just happened?
        7. Time for action — Changing the navigation by using third party modules
          1. What just happened?
        8. Time for action — Adding an item on the top menu bar
          1. What just happened?
        9. Time for action — Omitting some information from the Featured Products block
          1. What just happened?
        10. Time for action — Replacing the block header tabs and block background images
          1. Have a go hero Modifying the module blocks
        11. Time for action — Changing the block content color
          1. What just happened?
        12. Validating the theme
        13. Packaging the new theme
        14. Making a two column theme
        15. Get Smarty
        16. Knowing jQuery
        17. Summary
      12. 7. Tips and Tricks to Make PrestaShop Theming Easier
        1. Adding more interactivity to your PrestaShop site
        2. Time for action — Adding YouTube or other video element
        3. Time for action — Installing and enabling the YouTube module
        4. Time for action — Positioning the YouTube module
          1. What just happened?
        5. Time for action — Configuring the YouTube module
          1. What just happened?
        6. Time for action — Setting the player for the YouTube module
          1. What just happened?
          2. Pop Quiz
        7. Adding carousels in your PrestaShop site
        8. Time for action — Using the jQuery carousel
        9. Time for action — Positioning the jcarousel within the home page
          1. What just happened?
          2. Have a go hero Replacing images in the jcarousel
        10. Time for action — Changing the attributes
          1. Limitation
        11. Gallery view
        12. Time for action — Adding gallery view
        13. Time for action — Replacing images in the gallery
          1. Have a go hero Modifying the jgalleryview module dimension
        14. Adding interactivity in the Featured Products block
        15. Time for action — Adding a moving box in the Featured Products block
        16. Using top navigation menu bar
        17. Time for action — Adding a horizontal menu
        18. Time for action — Using multiple languages on the Wiznav top navigation bar module
          1. What just happened?
          2. Limitations
        19. Time for action — Changing the color and text of the menu bar
        20. Time for action — Putting Categories in the horizontal top menu
        21. Footer module
        22. Time for action — Inserting an image in the footer module
        23. Page peel
          1. Limitations
        24. Free third party module files used
        25. Summary
      13. 8. Deploying Your New Themes
        1. Installing a theme on a production site
        2. Time for action — Deploying from the same host
        3. Time for action — Deploying from another computer
          1. What just happened?
        4. Installing a third party theme "element" to your site
          1. Have a go hero Transplanting the modules for the element theme.
        5. Time for action — Modifying the global.css for the element theme
          1. What just happened?
        6. Checking the browser's compatibility
          1. What validating means?
          2. Why validate?
          3. Where to validate?
            1. XHTML
            2. XML
          4. The validating process
          5. Have a go hero Troubleshooting your new theme
        7. File structure of a theme
          1. Have a go hero Preparing a documentation for your theme
        8. Summary
      14. A. Pop Quiz — Answers
        1. Chapter 1
          1. Customizing PrestaShop
        2. Chapter 2
          1. Customizing PrestaShop Theme Part I
        3. Chapter 5
          1. Applying Images
        4. Chapter 7
          1. Tips and Trick to Make Prestashop Theme Easier