E-book details

PrestaShop 1.3 Theming - Beginner's Guide. Develop flexible, powerful, and professional themes for your PrestaShop store through simple steps

PrestaShop 1.3 Theming - Beginner's Guide. Develop flexible, powerful, and professional themes for your PrestaShop store through simple steps

Hayati Hashim

Ebook
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.
  • PrestaShop 1.3 Theming Beginners Guide
    • Table of Contents
    • PrestaShop 1.3 ThemingBeginners Guide
    • Credits
    • About the Author
    • About the Reviewers
    • Preface
      • What this book covers
      • What you need for this book
      • Who this book is for
      • Conventions
      • Reader feedback
      • Customer support
        • Errata
        • Piracy
        • Questions
    • 1. Customizing PrestaShop
      • What you need to know
      • Getting familiar with PrestaShop
        • The PrestaShop sample sites
      • Time for actionOverviewing the back office administration panel
        • Preferences
        • Catalog
        • Modules
        • Tools
      • Making the most basic change to the default theme
      • Time for actionMaking simple changes to affect look of the store
        • What just happened?
        • Have a go heroChanging looks through simple CSS editing
        • Pop quiz
      • Planning for your online store new theme design
      • Summary
    • 2. Customizing PrestaShop Theme Part I
      • The default layout
      • Modules
      • Time for actionInstalling and enabling modules
        • Have a go heroChoosing the modules to install
      • Positioning modules
        • Hooks
        • Transplanting modules
      • Time for actionInstalling the Home text editor module
        • Have a go heroAdding more blocks
      • Time for actionInstalling, enabling, and configuring the Categories block
      • Time for actionMoving the modules within the column
      • Time for actionMoving the blocks
        • What just happened?
        • Have a go heroConfiguring the module on your page
        • Pop Quiz
      • Summary
    • 3. Customizing PrestaShop Theme Part 2
      • Copying the default theme file
      • Logo
      • Time for actionReplacing the default logo and favicon on your site
        • What just happened?
      • The Center Editorial Block
      • Time for actionModifying the Center Editorial Block
        • What just happened?
      • Top of pages block
      • Time for actionModifying the Top of pages
        • What just happened?
      • The FEATURED PRODUCTS block
      • Time for actionAdding the FEATURED PRODUCTS block
        • What just happened?
      • Time for actionAdding an item as a Featured Product
        • What just happened?
      • Time for actionTo edit, display, or delete a Featured Product
      • Time for actionAdding a new product to your FEATURED PRODUCTS block
        • What just happened?
      • Footer
      • Time for actionAdding new pages on the Footer Link block
        • What just happened?
      • Title
      • Time for actionModifying your page title
        • What just happened?
      • Modules block
      • Time for actionModifying block names
        • What just happened?
        • Have a go heroRemoving the "Powered by PrestaShop" at the footer link
      • Summary
    • 4. Adjusting Style Sheets
      • Getting to know the basics of PrestaShop theme
      • Time for actionGetting to know the PrestaShop CSS files
      • A brief background to Cascading Style Sheets
        • CSS syntax
          • global.css
          • maintenance.css
      • Time for actionModifying the maintenance mode
        • What just happened?
          • scenes.css
      • Modifying colors in your theme
      • Time for actionDeciding on a color scheme
        • What just happened?
      • Time for actionChanging the main page background color
        • What just happened?
      • Changing the blocks background colors
      • Time for actionChanging the default blocks background color
        • What just happened?
      • Time for actionChanging the exclusive blocks' background color
      • Time for actionChanging the background color of the CATEGORIES block header
        • Have a go heroMaking unique color for each block header
      • Changing the color in the FEATURED PRODUCTS block
      • Time for actionChanging the color of the background for the FEATURED PRODUCTS block
        • What just happened?
      • Time for actionChanging the color of the tab for the FEATURED PRODUCTS block
        • What just happened?
      • Time for actionChanging the background color of the footer
        • What just happened?
      • Time for actionChanging the header user block background color
        • What just happened?
        • Have a go hero Adding code in a section to change the background color
      • Modifying text
        • Changing the color of the text
      • Time for actionChanging the color of the text in the block header of the default blocks
      • Time for actionChanging the color of the text of the header on the MANUFACTURERS block
      • Time for actionChanging the color of the text in the exclusive blocks (CART, SPECIALS)
      • Time for actionChanging the color of the text in the top user information block
      • Time for actionChanging the color of the text of the footer
      • Time for actionChanging the color of the text in the center column
      • Time for action Changing the color of the text in the FEATURED PRODUCTS block
        • What just happened?
      • Time for actionChanging the color of the text in the CART block
        • Have a go hero Changing the color of the text in the columns in one place
      • Time for actionChanging the size of the text in the default block
        • What just happened?
      • Time for actionChanging the size of the text and font style on the center column blocks
        • What just happened?
      • Time for actionChanging the size of the text and font style on the footer blocks
        • What just happened?
      • Changing the color of the border
      • Time for actionChanging the color of the border for the default block
        • Have a go hero Changing all the colors of the borders of the block header
        • What just happened?
      • Time for actionChanging the color of the border in the footer
      • Modifying the paragraph
      • Time for actionModifying lines in the center column
      • Saving your changes
      • Summary
    • 5. Applying Images
      • Editing CSS to modify background images
      • Time for actionViewing image information
      • Time for actionFinding the appropriate images
      • Time for actionBasic CSS editing for modifying background images
      • Repeated background image
      • Time for actionRepeating images horizontally
      • Time for actionRepeating images vertically
      • Time for actionRepeating images horizontally and vertically
      • Time for actionUsing image with no repetition
      • Compressing properties
      • What to replace to get a fresh theme
      • Changing the background images for your new theme
      • Time for actionAdding a background pattern
        • What just happenned?
      • Time for actionChanging the block header background image
        • Have a go heroReplacing image in the blocks
        • What just happened?
      • Adding a new logo
      • Time for actionReplacing logo using the header.tpl file
      • Positioning background image
        • Pop quiz
      • Modifying the home page logo
      • Time for actionDeleting the home page logo
      • Time for actionReplacing the home page logo
      • Replacing icons
      • Time for actionReplacing selected icons
      • Time for actionReplacing the default icons with another icon set
        • Have a go heroReplacing all icons using your own
        • What just happened?
      • Summary
    • 6. Steps for Creating Themes
      • Understanding PrestaShop architecture
      • Visualizing what you want to achieve
      • Time for actionChoosing a color scheme
        • What just happened?
        • Have a go heroIdentifying a theme to use
      • Time for actionCreating a new theme directory
      • Developing the raw material
      • Time for actionModifying the layout of the main pages
        • header.tpl
        • footer.tpl
        • What just happened?
      • Time for actionChanging the navigation by using third party modules
        • What just happened?
      • Time for actionAdding an item on the top menu bar
        • What just happened?
      • Time for actionOmitting some information from the Featured Products block
        • What just happened?
      • Time for actionReplacing the block header tabs and block background images
        • Have a go heroModifying the module blocks
      • Time for actionChanging the block content color
        • What just happened?
      • Validating the theme
      • Packaging the new theme
      • Making a two column theme
      • Get Smarty
      • Knowing jQuery
      • Summary
    • 7. Tips and Tricks to Make PrestaShop Theming Easier
      • Adding more interactivity to your PrestaShop site
      • Time for actionAdding YouTube or other video element
      • Time for actionInstalling and enabling the YouTube module
      • Time for actionPositioning the YouTube module
        • What just happened?
      • Time for actionConfiguring the YouTube module
        • What just happened?
      • Time for actionSetting the player for the YouTube module
        • What just happened?
        • Pop Quiz
      • Adding carousels in your PrestaShop site
      • Time for actionUsing the jQuery carousel
      • Time for actionPositioning the jcarousel within the home page
        • What just happened?
        • Have a go heroReplacing images in the jcarousel
      • Time for actionChanging the attributes
        • Limitation
      • Gallery view
      • Time for actionAdding gallery view
      • Time for actionReplacing images in the gallery
        • Have a go heroModifying the jgalleryview module dimension
      • Adding interactivity in the Featured Products block
      • Time for actionAdding a moving box in the Featured Products block
      • Using top navigation menu bar
      • Time for actionAdding a horizontal menu
      • Time for actionUsing multiple languages on the Wiznav top navigation bar module
        • What just happened?
        • Limitations
      • Time for actionChanging the color and text of the menu bar
      • Time for actionPutting Categories in the horizontal top menu
      • Footer module
      • Time for actionInserting an image in the footer module
      • Page peel
        • Limitations
      • Free third party module files used
      • Summary
    • 8. Deploying Your New Themes
      • Installing a theme on a production site
      • Time for actionDeploying from the same host
      • Time for actionDeploying from another computer
        • What just happened?
      • Installing a third party theme "element" to your site
        • Have a go heroTransplanting the modules for the element theme.
      • Time for actionModifying the global.css for the element theme
        • What just happened?
      • Checking the browser's compatibility
        • What validating means?
        • Why validate?
        • Where to validate?
          • XHTML
          • XML
        • The validating process
        • Have a go heroTroubleshooting your new theme
      • File structure of a theme
        • Have a go heroPreparing a documentation for your theme
      • Summary
    • A. Pop QuizAnswers
      • 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
    • Index
  • Title: PrestaShop 1.3 Theming - Beginner's Guide. Develop flexible, powerful, and professional themes for your PrestaShop store through simple steps
  • Author: Hayati Hashim
  • Original title: PrestaShop 1.3 Theming - Beginner's Guide. Develop flexible, powerful, and professional themes for your PrestaShop store through simple steps
  • ISBN: 9781849511735, 9781849511735
  • Date of issue: 2010-07-26
  • Format: Ebook
  • Item ID: e_3cot
  • Publisher: Packt Publishing