PrestaShop 1.3 Theming – Beginner’s Guide电子书

PrestaShop 1.3 Theming Beginner’s Guide

Table of Contents

PrestaShop 1.3 ThemingBeginner’s 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 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

What just happened?

Have a go hero—Changing 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 action—Installing and enabling modules

Have a go hero—Choosing the modules to install

Positioning modules

Hooks

Transplanting modules

Time for action—Installing the Home text editor module

Have a go hero—Adding more blocks

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

What just happened?

Have a go hero—Configuring the module on your page

Pop Quiz

Summary

3. Customizing PrestaShop Theme Part 2

Copying the default theme file

Logo

Time for action—Replacing the default logo and favicon on your site

What just happened?

The Center Editorial Block

Time for action—Modifying the Center Editorial Block

What just happened?

Top of pages block

Time for action—Modifying the Top of pages

What just happened?

The FEATURED PRODUCTS block

Time for action—Adding the FEATURED PRODUCTS block

What just happened?

Time for action—Adding an item as a Featured Product

What just happened?

Time for action—To edit, display, or delete a Featured Product

Time for action—Adding a new product to your FEATURED PRODUCTS block

What just happened?

Footer

Time for action—Adding new pages on the Footer Link block

What just happened?

Title

Time for action—Modifying your page title

What just happened?

Modules block

Time for action—Modifying block names

What just happened?

Have a go hero—Removing the "Powered by PrestaShop" at the footer link

Summary

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

What just happened?

scenes.css

Modifying colors in your theme

Time for action—Deciding on a color scheme

What just happened?

Time for action—Changing the main page background color

What just happened?

Changing the blocks background colors

Time for action—Changing the default blocks' background color

What just happened?

Time for action—Changing the exclusive blocks' background color

Time for action—Changing the background color of the CATEGORIES block header

Have a go hero—Making unique color for each block header

Changing the color in the FEATURED PRODUCTS block

Time for action—Changing the color of the background for the FEATURED PRODUCTS block

What just happened?

Time for action—Changing the color of the tab for the FEATURED PRODUCTS block

What just happened?

Time for action—Changing the background color of the footer

What just happened?

Time for action—Changing 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 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

What just happened?

Time for action—Changing 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 action—Changing the size of the text in the default block

What just happened?

Time for action—Changing the size of the text and font style on the center column blocks

What just happened?

Time for action—Changing the size of the text and font style on the footer blocks

What just happened?

Changing the color of the border

Time for action—Changing 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 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

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

What just happenned?

Time for action—Changing the block header background image

Have a go hero—Replacing image in the blocks

What just happened?

Adding a new logo

Time for action—Replacing logo using the header.tpl file

Positioning background image

Pop quiz

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

Have a go hero—Replacing 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 action—Choosing a color scheme

What just happened?

Have a go hero—Identifying a theme to use

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

What just happened?

Time for action—Changing the navigation by using third party modules

What just happened?

Time for action—Adding an item on the top menu bar

What just happened?

Time for action—Omitting some information from the Featured Products block

What just happened?

Time for action—Replacing the block header tabs and block background images

Have a go hero—Modifying the module blocks

Time for action—Changing 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 action—Adding YouTube or other video element

Time for action—Installing and enabling the YouTube module

Time for action—Positioning the YouTube module

What just happened?

Time for action—Configuring the YouTube module

What just happened?

Time for action—Setting the player for the YouTube module

What just happened?

Pop Quiz

Adding carousels in your PrestaShop site

Time for action—Using the jQuery carousel

Time for action—Positioning the jcarousel within the home page

What just happened?

Have a go hero—Replacing images in the jcarousel

Time for action—Changing the attributes

Limitation

Gallery view

Time for action—Adding gallery view

Time for action—Replacing images in the gallery

Have a go hero—Modifying the jgalleryview module dimension

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

What just happened?

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

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

What just happened?

Installing a third party theme "element" to your site

Have a go hero—Transplanting the modules for the element theme.

Time for action—Modifying 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 hero—Troubleshooting your new theme

File structure of a theme

Have a go hero—Preparing a documentation for your theme

Summary

A. 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

Index