Index

A

• admin panel
  • CMS home page, creating from / Creating the CMS home page from the admin panel
  • widgets, adding in / Adding the widget in the admin panel, Summary
  • design, overviewing / An overview of the admin design
  • customizing, AdminTheme module used / Changing the default admin panel
• admin panel, customizing
  • AdminTheme module, installing to change folder path / Installing the module to change the folder path
• admin panel interface
  • creating / Interfacing the admin panel with the theme
  • frontend, customizing / Customizing the frontend
  • input text field value, obtaining / Getting the value of an input text field
  • conditional options / Conditional options
  • yes/no dropdown option, accessing / Accessing a Yes/No dropdown
  • uploaded image file, obtaining / Getting the uploaded image file
• AdminTheme module
  • used, for customizing admin panel / Changing the default admin panel
  • installing, to change folder path / Installing the module to change the folder path
• admin theme options panel
  • theme options module, creating / Creating the theme options module
  • System.xml fields, overviewing / Overviewing the System.xml fields
  • advanced admin options panel, creating / Creating the advanced admin options panel
  • interfacing, with theme / Interfacing the admin panel with the theme
  • advanced options features / Advanced options features
  • visual color picker, creating / Creating a visual color picker in admin
• Adobe TypeKit
  • about / Adobe TypeKit
  • URL / Adobe TypeKit
• advanced admin options panel
  • creating / Creating the advanced admin options panel
  • custom dropdown field, creating / Creating a custom dropdown field
• advanced options features
  • dependent field, creating / A dependent field
  • JavaScripts, adding in comment tag / Adding JavaScripts inside the comment tag
• alert message
  • adding, for incorrect data / Adding the alert message if the data is incorrect
• animated cart
  • creating, in header / Creating an animated cart in the header
  • top.phtml file, customizing / Customizing the topcart.phtml file
  • CSS, customizing / Customizing the CSS of the cart
  • content, styling with CSS / Styling the cart's content with CSS
• app directory
  • layout subdirectory / The layout subdirectory
  • template files / Templates
  • locale folder / Locales
  • translatable entries, creating / Creating new translatable entries
  • folders, creating in / Starting with the app folders

B

• + button
  • integrating in, product page / The + button
• background color, header
  • changing / Changing the background color of the header
• banners
  • CMS block, creating for / Creating the CMS block for the banners
• BIGSTOCK
  • about / BIGSTOCK
  • URL / BIGSTOCK
• block-title attribute / Creating an animated cart in the header
• Bootstrap
  • about / An introduction to Bootstrap
  • downloading / Downloading Bootstrap (the current Version 3.1.1), Downloading and including jQuery
  • URL / Downloading Bootstrap (the current Version 3.1.1)
• Bubble codes website
  • about / Bubble codes by Johann Reinke
  • URL / Bubble codes by Johann Reinke

C

• cache
  • disabling / Disabling the cache
• carousel
  • CMS block, creating for / Creating the CMS block for the carousel
• CE
  • about / The Magento base theme
• CMS block
  • creating, with links / Creating the CMS block with the links
  • declaring, in local.xml file / Declaring the CMS block in the local.xml file
  • creating, for carousel / Creating the CMS block for the carousel
  • creating, for banners / Creating the CMS block for the banners
• CMS block (in footer)
  • creating, from admin panel / Creating the CMS blocks from the admin panel
• CMS block, with PHP statement
  • declaring, in header.phtml / Declaring the CMS block with a PHP statement in header.phtml
• CMS blocks
  • about / CMS blocks
• CMS home page
  • creating, from admin panel / Creating the CMS home page from the admin panel
• CMS page
  • widgets, adding in / Adding the widget to the CMS page
• CMS pages
  • about / CMS pages
• code, social media buttons
  • integrating, in product page / Integrating the code in the product page
• ColorZilla website
  • URL / Creating CSS3 gradients without images
• content row, home page
  • creating / Creating the content row
• CSS
  • used, for customizing home page code / Customizing the look and feel of the home page with CSS
  • used, for styling cart content / Styling the cart's content with CSS
• CSS, animated cart
  • customizing / Customizing the CSS of the cart
• CSS3 3D flip animation
  • creating / Creating a stunning CSS3 3D flip animation, Creating the CSS animation
  • hover animation, planning / Planning the hover animation
  • list-home.phtml html code / The HTML code of list-home.phtml
• CSS3 gradients without images
  • creating, Ultimate CSS Gradient Generator used / Creating CSS3 gradients without images
• CSS3 media queries
  • using / Using specific CSS3 media queries
  • using, for large devices (container width - 1170px) / Large devices (.container width – 1170 px)
  • using, for medium devices (.container width - 970px) / Medium devices (.container width – 970 px)
  • using, for tablet devices (.container width - 750px) / Tablet devices (.container width – 750 px)
  • using, for smartphones / Smartphones
• CSS3 transition effect
  • including / Introducing CSS3 transitions
• CSS3 transitions
  • about / Introducing CSS3 transitions
  • using / Introducing CSS3 transitions
  • multiple property changes / Multiple property changes
  • properties / The CSS3 transition properties
• CSS files
  • declaring, in local.xml / Declaring the CSS files in local.xml
• CSS override
  • checking / Checking the CSS overriding
• custom.css file
  • creating / Creating the custom.css file
• custom font
  • adding, to theme / Adding a custom font to our theme
  • Web-safe font, finding / Sources to find free and premium web-safe font, Google fonts, Adobe TypeKit
  • Google font, integrating in theme / Integrating a Google font in our theme
• custom icon font
  • adding, to theme / Adding a custom icon font to our theme
  • Glyphicon icon font / Adding a custom icon font to our theme
  • Font Awesome! icon font / Adding a custom icon font to our theme
• custom login.phtml file
  • creating / Creating the custom login.phtml file
• custom login page
  • creating / Creating a custom login page
  • custom login.phtml file, creating / Creating the custom login.phtml file
  • login form, creating / Creating the login form
  • login form, styling / Styling the login form
  • alert message, adding for incorrect data / Adding the alert message if the data is incorrect
  • form.phtml file, final code / A quick recap of the complete form.phtml file, Customizing the retrieve password form
• custom Magento admin theme
  • creating / Creating a custom Magento admin theme
  • custom.css file, creating / Creating the custom.css file
  • CSS overriding check / Checking the CSS overriding
  • logo, changing / Changing the logo
  • different logo name/extension, using / Using a different logo name or extension
  • CSS3 gradients, creating without images / Creating CSS3 gradients without images
  • header background color, changing / Changing the background color of the header
  • navigation, customizing / Customizing the navigation
  • footer, customizing / Customizing the footer
  • other objects, customizing / Customizing other objects

D

• default blocks
  • removing, from left sidebar / Removing the default blocks from the sidebar
• documentation
  • creating / Creating the documentation of the theme
  • creating, ThemeForest documentation used / A simple example of the ThemeForest documentation
  • creating, Documenter tool used / The Documenter tool
  • writing, tips / Some tips to write better documentation, Packaging the theme
• Documenter tool
  • used, for creating documentation / The Documenter tool
  • URL / The Documenter tool

E

• EE
  • about / The Magento base theme
• empty module
  • creating, for widgets / Creating an empty module
• Envato asset library
  • about / The Envato asset library
  • URL / The Envato asset library
• Excellence Magento blog
  • about / Excellence Magento blog
  • URL / Excellence Magento blog

F

• Fabrizio Branca blog
  • about / Fabrizio Branca blog
  • URL / Fabrizio Branca blog
• Facebook Like Box
  • adding, to left sidebar / Adding the Facebook Like box to the left sidebar
  • installing, on site / Installing the Like box on your site
• Facebook Like button
  • integrating in, product page / Facebook's Like button
• fall-back system
  • about / The hierarchy of files and the fall-back system
• final users
  • supporting / Supporting final users
• Firebug
  • URL / Customizing other objects
  • used, for customizing objects in admin theme / Customizing other objects
• flexible images
  • creating / Flexible images
• Font Awesome! icon font
  • about / Adding a custom icon font to our theme
• Font Squirrel
  • about / Font Squirrel
  • URL / Font Squirrel
• footer
  • developing / Developing the footer
  • CMS blocks, creating from admin panel / Creating the CMS blocks from the admin panel
  • newsletter block, adding / Adding the newsletter block
• footer, admin theme
  • customizing / Customizing the footer
• form.phtml file
  • final code / A quick recap of the complete form.phtml file, Customizing the retrieve password form
• free resource links
  • for responsive design / Responsive design
  • for UI-UIX / UI – UIX resources
  • for animations / Animations
  • for fonts / Fonts
  • for social media / Social media
  • for photo stocks resources / Photo stocks resources
  • other resource links / Free resources
  • for selling theme / Selling your theme

G

• Glyphicon icon font
  • about / Adding a custom icon font to our theme
• goal, optimization
  • about / Our goal
• Google+ button
  • integrating in, product page / The Google+ button
• Google fonts
  • about / Google fonts
  • URL / Google fonts
  • integrating, in theme / Integrating a Google font in our theme, Adding a custom icon font to our theme

H

• handle
  • about / The layout subdirectory
  • <cms_page> handle / The layout subdirectory
  • <catalog_product_view> handle / The layout subdirectory
• handle types
  • default handles / The layout subdirectory
  • non-default handles / The layout subdirectory
• header
  • animated cart, creating in / Creating an animated cart in the header
• header, Magento theme
  • developing / Developing the header
  • top header, creating / Creating the top header, Declaring the CMS block in the local.xml file, The right part of the top header
  • main header, creating / Creating the main header, The top cart
• header top bar
  • optimizing / Optimizing the top bar of the header
  • logo row, fixing / Fixing the logo row
  • menu bar, fixing / Fixing the menu bar
  • main content column, fixing / Fixing the main content column
  • products grid, fixing / Fixing the products grid
  • footer, adjusting / Adjusting the footer
• home page
  • developing / Developing the home page
  • structure, configuring / Configuring the structure of the home page
  • slider row, creating / Creating the slider row
  • CMS block, creating for carousel / Creating the CMS block for the carousel
  • CMS block, creating for banners / Creating the CMS block for the banners
  • CMS home page, creating from admin panel / Creating the CMS home page from the admin panel
  • code, customizing with CSS / Customizing the look and feel of the home page with CSS
  • content row, creating / Creating the content row
• hover animation
  • planning / Planning the hover animation
• hoverImg variable / Creating a nice image swap effect for when you hover the cursor over a thumbnail
• HTML5 boilerplate
  • defining, for main layout design template / Defining the HTML5 boilerplate for main templates

I

• image swap effect
  • creating / Creating a nice image swap effect for when you hover the cursor over a thumbnail
• img-responsive class / Flexible images
• Inchoo blog
  • about / Inchoo's blog
  • URL / Inchoo's blog
• Initial scale meta tag
  • disabling, for iPhone / Initial scale meta tag (iPhone)
• Internet Explorer 9 (IE9) / Introducing CSS3 transitions
• iStock
  • URL / iStock
  • about / iStock
• item-container attribute / The HTML code of list-home.phtml, Creating the CSS animation

J

• .js files
  • declaring, in local.xml / Declaring the .js files in local.xml
• JavaScript code, conditional
  • adding / Adding conditional JavaScript code
• jQuery
  • URL / Downloading and including jQuery
• jscolor picker / Creating a visual color picker in admin

L

• label parameter / Adding options to our widget.xml
• large devices (.container width - 1170px)
  • CSS3 media queries, using for / Large devices (.container width – 1170 px)
• left sidebar
  • customizing / Customizing the left sidebar
  • default blocks, removing / Removing the default blocks from the sidebar
  • vertical navigation menu, creating / Creating a vertical navigation menu on the sidebar, Customizing the main content
  • Facebook Like Box, adding to / Adding the Facebook Like box to the left sidebar
• list-home.phtml html code
  • creating / The HTML code of list-home.phtml
• live demo preview
  • creating / Creating the live demo preview
  • server performance, checking / The performance of the sever, Sample products
  • sample products, creating / Sample products, Searching for royalty-free photos for the theme
  • royalty-free photos, searching / Searching for royalty-free photos for the theme, BIGSTOCK, PhotoDune, The Envato asset library
  • Envato asset library / The Envato asset library
• local.xml
  • .js files, declaring in / Declaring the .js files in local.xml
  • CSS files, declaring in / Declaring the CSS files in local.xml
• login form
  • creating / Creating the login form
  • styling / Styling the login form
• logo, admin header
  • changing / Changing the logo
• logo extension
  • changing / Using a different logo name or extension

M

• Magento 2
  • about / Magento 2
  • URL / Magento 2
• Magento base theme
  • about / The Magento base theme
  • fall-back system / The hierarchy of files and the fall-back system
• Magento commerce website
  • about / The Magento commerce website
  • URL / The Magento commerce website
• Magento Connect site
  • theme, inserting in / Inserting the theme on the Magento Connect site
• Magento design guide
  • about / The Magento design guide
  • URL / The Magento design guide
• Magento front end certification
  • about / Magento Front End certification
  • URL / Magento Front End certification
• Magento Go admin theme
  • installing / Installing the Magento Go admin theme
• Magento theme
  • basic concepts / The basic concepts of a Magento theme
  • structure / The structure of a Magento theme
  • creating / Creating the theme
  • app folders, creating / Starting with the app folders
  • skin folders, creating / Creating the skin folders
  • files, creating / Creating the necessary files
  • cache, disabling / Disabling the cache
  • activating / Activating the theme
  • files, integrating into / Integrating the files into the theme
  • .js files, declaring in local.xml / Declaring the .js files in local.xml
  • CSS files, declaring in local.xml / Declaring the CSS files in local.xml
  • style.css file, removing / Removing and adding the style.css file
  • style.css file, adding / Removing and adding the style.css file
  • conditional JavaScript code, adding / Adding conditional JavaScript code
  • Google font, integrating in / Integrating a Google font in our theme, Adding a custom icon font to our theme
  • optimizing, for multiple devices / Testing the responsiveness of a website
  • packaging / Packaging the theme
• Magento theme basic concepts
  • base theme / The Magento base theme
• Magento theme files, integrating
  • final code / A quick recap of our local.xml file, Defining the main layout design template
• Magento theme optimization, multiple devices
  • responsiveness, testing / Testing the responsiveness of a website
  • header top bar, optimizing / Optimizing the top bar of the header, Fixing the menu bar, Fixing the main content column, Fixing the products grid, Adjusting the footer
• Magento theme structure
  • about / The structure of a Magento theme
  • design packages / Design packages and design themes
  • design themes / Design packages and design themes
  • app directory / Directory 1 – app, The layout subdirectory, Locales
  • skin directory / Directory 2 – skin, Structural blocks and content blocks, CMS blocks, CMS pages
  • Magento variables / Magento variables
  • Magento widgets / Widgets
• Magento variables
  • about / Magento variables
  • creating / Magento variables
• Magento widgets
  • about / Widgets, Getting started with Magento widgets
  • examples / Widgets
  • developing / Developing a widget
  • adding, in CMS page / Adding the widget to the CMS page
  • creating, with options / Creating a widget with options
  • options, adding to widget.xml / Adding options to our widget.xml, Creating the frontend widget block
  • frontend widget block, creating / Creating the frontend widget block, Adding the widget in the admin panel
  • adding, in admin panel / Adding the widget in the admin panel, Summary
• Magento widgets, developing
  • empty module, creating / Creating an empty module
• Magneto resources
  • about / Official Magento resources
  • Magento commerce website / The Magento commerce website
  • Magento design basics / The Magento design guide
  • Magento front end certification / Magento Front End certification
  • Magento 2 Version / Magento 2
• main content
  • customizing / Customizing the main content
  • specific category products block, adding / Adding a block with some products of a specific category
• main files
  • creating, in app directory / Creating the necessary files
• main header, Magento theme
  • creating / Creating the main header
  • logo / Logo
  • top cart / The top cart
• main layout design template
  • defining / Defining the main layout design template
  • HTML5 boilerplate, defining for / Defining the HTML5 boilerplate for main templates
• medium devices (.container width - 970px)
  • CSS3 media queries, using for / Medium devices (.container width – 970 px)
• mobile icons
  • adding / Adding mobile icons
  • creating, steps / Adding mobile icons

N

• navigation
  • customizing / Customizing the navigation
• navigation bar
  • creating / Creating the navigation bar
  • top menu bar / The top menu bar
  • search file / Search
• newsletter block
  • adding, in footer / Adding the newsletter block, Summary

O

• opacity property / Introducing CSS3 transitions
• options
  • widgets, creating with / Creating a widget with options
  • adding, to widget.xml / Adding options to our widget.xml, Creating the frontend widget block
  • frontend widget block, creating / Creating the frontend widget block, Adding the widget in the admin panel
• other pages, Magento theme
  • customizing / Customizing the other pages of the theme
  • products grid, customizing / The products grid
  • product page, customizing / The product page
  • file paths, customizing / File paths and handles for the other sections of the theme
  • handles, customizing / File paths and handles for the other sections of the theme

P

• perspective property / Planning the hover animation
• photodune agency
  • about / PhotoDune
  • URL / PhotoDune
• Pinterest Pin button
  • integrating in, product page / Pinterest's Pin button
• prettyPhoto
  • about / Creating a custom product images gallery
  • integrating, in Magento / Integrating prettyPhoto into Magento
  • downloading / Downloading prettyPhoto
  • JS and CSS, integrating / Integrating prettyPhoto JS and CSS
  • media.phtml code, customizing / Customizing the media.phtml code, Initializing prettyPhoto
  • initializing / Initializing prettyPhoto
• product images gallery
  • creating / Creating a custom product images gallery
  • work, planning / Planning the work
  • prettyPhoto, integrating into Magento / Integrating prettyPhoto into Magento, Downloading prettyPhoto, Customizing the media.phtml code, Initializing prettyPhoto
  • image swap effect, creating / Creating a nice image swap effect for when you hover the cursor over a thumbnail
• product page
  • customizing / The product page
  • social media buttons, integrating in / Integrating the social plugin in the product page
  • social media buttons code, integrating in / Integrating the code in the product page
  • Facebook Like button, integrating in / Facebook's Like button
  • Twitter Tweet button, integrating in / Twitter's Tweet button
  • Pinterest Pin button, integrating in / Pinterest's Pin button
  • Google+ button, integrating in / The Google+ button
  • + button, integrating in / The + button
• products grid
  • customizing / The products grid

R

• required parameter / Adding options to our widget.xml
• responsive coding
  • tips and tools / Tips and tools for responsive coding, Flexible images, Initial scale meta tag (iPhone)
• responsiveness, website
  • testing, Viewport Resizer used / Testing the responsiveness of a website
• responsive utilities, Bootstrap
  • URL / Hiding the unnecessary blocks for lower resolutions
• retrieve password form
  • customizing / Customizing the retrieve password form
• royalty-free photos
  • searching, for theme / Searching for royalty-free photos for the theme
  • searching, in iStock / iStock
  • searching, in BIGSTOCK website / BIGSTOCK
  • searching, in photodune agency / PhotoDune

S

• sample products, live demo
  • creating / Sample products, Searching for royalty-free photos for the theme
• server performance, live demo
  • checking / The performance of the sever
• skin directory
  • reference blocks/structural blocks / Structural blocks and content blocks
  • content blocks / Structural blocks and content blocks
  • CMS pages / CMS blocks and page, CMS pages
  • CMS blocks / CMS blocks and page, CMS blocks
  • folders, creating in / Creating the skin folders
• slider row, home page
  • creating / Creating the slider row
• small resolutions
  • unnecessary blocks, hiding for / Hiding the unnecessary blocks for lower resolutions
• smartphones
  • CSS3 media queries, using for / Smartphones
• Smashing magazine
  • about / Smashing magazine
  • URL / Smashing magazine
• social media buttons
  • integrating, in product page / Integrating the social plugin in the product page
  • Facebook Like button / Facebook's Like button
  • Twitter Tweet button / Twitter's Tweet button
  • Pinterest Pin button / Pinterest's Pin button
  • Google+ button / The Google+ button
  • + button / The + button
• social media integration
  • about / Getting started with social media integration
• specific category products block
  • adding, to main content / Adding a block with some products of a specific category
• style.css file
  • removing / Removing and adding the style.css file
  • adding / Removing and adding the style.css file
• System.xml fields, admin panel
  • overviewing / Overviewing the System.xml fields
  • input text option, creating / Creating an input text
  • textarea option, creating / Creating textarea
  • yes/no dropdown option, creating / Creating a dropdown with Yes/No values
  • enable/disable dropdown option, creating / Creating a dropdown with Enable/Disable values
  • custom dropdown option, creating / Creating a dropdown with custom values
  • file upload option field, creating / Creating a File Upload option field

T

• tablet devices (.container width - 750px)
  • CSS3 media queries, using for / Tablet devices (.container width – 750 px)
• Template Path Hints option
  • about / Template path hint
  • enabling / Template path hint
• theme
  • selling, on ThemeForest / Selling the theme on ThemeForest, My personal experience
  • inserting, on Magento Connect site / Inserting the theme on the Magento Connect site
  • support and updates / Support and updates, Supporting final users
• ThemeForest
  • theme, selling on / Selling the theme on ThemeForest
  • theme price, deciding / Theme pricing
• ThemeForest documentation
  • used, for creating documentation / A simple example of the ThemeForest documentation
• theme options module, admin panel
  • creating / Creating the theme options module
  • activating / Activating the module
  • module helper, creating / Creating the module helper
  • configuration file config.xml, creating / Creating the configuration file config.xml
  • options file system.xml, creating / Creating the options file system.xml
  • options fields / Getting started with options fields
• theme price
  • deciding / Theme pricing
• tips and tools, responsive coding
  • unnecessary blocks, hiding for small resolutions / Hiding the unnecessary blocks for lower resolutions
  • flexible images, creating / Flexible images
  • initial scale meta tag (iPhone) / Initial scale meta tag (iPhone)
• top.phtml file, animated cart
  • customizing / Customizing the topcart.phtml file
• top header, Magento theme
  • creating / Creating the top header
  • CMS block links / CMS block links, Declaring the CMS block in the local.xml file, Declaring the CMS block with a PHP statement in header.phtml
  • user area / The right part of the top header, Creating the main header
• transition property / The CSS3 transition properties
• Tuts plus website
  • Magento tutorials / Tuts plus Magento tutorials
  • URL / Tuts plus Magento tutorials
• Twitter Tweet button
  • integrating in, product page / Twitter's Tweet button
• type parameter / Adding options to our widget.xml

U

• Ultimate CSS Gradient Generator
  • used, for creating CSS3 gradients / Creating CSS3 gradients without images
• updates, themes
  • bugs, fixing / Fixing the bugs and adding new features
  • new features, adding / Fixing the bugs and adding new features

V

• Variable Code field / Magento variables
• vertical navigation menu, left sidebar
  • creating / Creating a vertical navigation menu on the sidebar, Customizing the main content
• Viewport Resizer
  • used, for testing responsiveness / Testing the responsiveness of a website
• visible parameter / Adding options to our widget.xml
• visual color picker, admin panel
  • creating / Creating a visual color picker in admin
  • options, validating / Validate options
  • default values, defining for options fields / Defining default values for options fields

W

• Web-safe font sources
  • Google fonts / Google fonts
  • Font Squirrel / Font Squirrel
  • Adobe TypeKit / Adobe TypeKit
• websites, Magento
  • Excellence Magento blog / Excellence Magento blog
  • Fabrizio Branca blog / Fabrizio Branca blog
  • Bubble codes by Johann Reinke / Bubble codes by Johann Reinke, Inchoo's blog
  • Inchoo blog / Inchoo's blog
  • Tuts plus Magento tutorials / Tuts plus Magento tutorials
  • Smashing magazine / Smashing magazine
• widget.xml file
  • options, adding to / Adding options to our widget.xml, Creating the frontend widget block
• WYSIWYG editor
  • disabling / Disabling the WYSIWYG editor