Time for action — Changing the color of the tab for the FEATURED PRODUCTS block
by Hayati Hashim
PrestaShop 1.3 ThemingBeginner’s Guide
- PrestaShop 1.3 Theming Beginner’s Guide
- PrestaShop 1.3 Theming Beginner’s Guide
- Credits
- About the Author
- About the Reviewers
- Preface
- 1. Customizing PrestaShop
- 2. 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
- 3. 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
- 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
- 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
- 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
- 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
- 6. 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
- 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
- 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
- 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
- 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
- A. Pop Quiz — Answers
Let's try changing the color of the tab of the FEATURED PRODUCTS block.
- Look out for the following code:
/* block in the center column */ #center_column p { margin: 0.5em 0; padding-left:0.7em;} #center_column div.block { width: 536px; margin:auto;} #center_column div.block h4 { background: transparent url('../img/block_header_large.gif') no- repeat top left; height: 17px; color: white } - Delete the URL and replace it with
red. Your code should now look as follows:
/* block in the center column */
#center_column p { margin: 0.5em 0; padding-left:0.7em;}
#center_column div.block { width: 536px; margin:auto;}
#center_column div.block h4 {
background: red;
height: 17px;
color: red
}
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.