PacktLib: PrestaShop 1.3 Theming – Beginner’s Guide

PrestaShop 1.3 Theming Beginner’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