Time for action — Changing the exclusive blocks' background color
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
Now let's go to the lines in the CSS file that we have to change in order to modify the background color of the content for cart blocks and other exclusive blocks.
Scroll down the global.css file and go to /*block
exclusive*/.
/* block exclusive */
#left_column div.exclusive, #right_column div.exclusive {
background: transparent url('../img/block_exclusive_footer.jpg') no-repeat bottom left
}
div.exclusive h4 {
background: transparent url('../img/block_header_exclusive.gif') no-repeat top left;
color: white
}
div.exclusive h4 a { color: white; }
div.exclusive li { margin-top: 0; }
div.exclusive, div.exclusive a { color: white; }
div.exclusive .block_content {
background: #bdc2c9 url('../img/block_exclusive_bg.jpg') repeat-x bottom left;
border-left: 1px solid #595a5e;
border-right: 1px solid #595a5e
}
You may replace the highlighted hex color code with "red". You will note that the descriptions are also linked to an image. We will discuss it in the next chapter.
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.