PacktLib: PrestaShop 1.3 Theming – Beginner’s Guide

PrestaShop 1.3 ThemingBeginner’s Guide

Credits

About the Author

About the Reviewers

Preface

Customizing PrestaShop

What you need to know

Getting familiar with PrestaShop

Time for action—Overviewing the back office administration panel

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

Customizing PrestaShop Theme Part I

The default layout

Modules

Time for action—Installing and enabling modules

Positioning 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

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

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

Time for action—Modifying the maintenance mode

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

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

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

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

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

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

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

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

Free third party module files used

Summary

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

File structure of a theme

Summary

Pop Quiz–Answers

Pop Quiz–Answers

Pop Quiz–Answers

Pop Quiz–Answers

Pop Quiz–Answers

Index