Mastering magento theme design : create responsive themes using Bootstrap, the most widely used frontend framework /
Written in a step-by-step, tutorial style with a lot of code snippets and hands-on examples to create an advanced Magento theme from scratch, this book is tailor-made for web designers and developers. This book is great for developers and web designers who are looking to get a good grounding in how...
Clasificación: | Libro Electrónico |
---|---|
Autor principal: | |
Formato: | Electrónico eBook |
Idioma: | Inglés |
Publicado: |
Birmingham, UK :
Packt Publishing,
2014.
|
Colección: | Community experience distilled.
|
Temas: | |
Acceso en línea: | Texto completo |
Tabla de Contenidos:
- Cover; Copyright; Credits; About the Author; About the Reviewers; www.PacktPub.com; Table of Contents; Preface; Chapter 1: Introducing Magento Theme Design; The basic concepts of a Magento theme; The Magento base theme; The hierarchy of files and the fall-back system; The structure of a Magento theme; Design packages and design themes; Directory 1
- app; The layout subdirectory; Templates; Locales; Creating new translatable entries; Directory 2
- skin; Structural blocks and content blocks; CMS blocks and page; Magento variables; Widgets; Creating the theme; Starting with the app folders
- Creating the skin foldersCreating the necessary files; Disabling the cache; Activating the theme; Tips and tricks; Template path hint; Disabling the WYSIWYG editor; Summary; Chapter 2: Creating a Responsive Magento Theme with Bootstrap 3; An introduction to Bootstrap; Downloading Bootstrap (the current Version 3.1.1); Downloading and including jQuery; Integrating the files into the theme; Declaring the .js files in local.xml; Declaring the CSS files in local.xml; Removing and adding the style.css file; Adding conditional JavaScript code; A quick recap of our local.xml file
- Defining the main layout design templateDefining the HTML5 boilerplate for main templates; Developing the header; Creating the top header; CMS block links; The right part of the top header; Creating the main header; Logo; The top cart; Creating the navigation bar; The top menu bar; Search; Developing the footer; Creating the CMS blocks from the admin panel; Adding the newsletter block; Summary; Chapter 3: Customizing Our Custom Theme; Developing the home page; Configuring the structure of the home page; Creating the slider row; Creating the CMS block for the carousel
- Creating the CMS block for the bannersCreating the CMS home page from the admin panel; Customizing the look and feel of the home page with CSS; Creating the content row; Customizing the left sidebar; Removing the default blocks from the sidebar; Creating a vertical navigation menu on the sidebar; Customizing the main content; Adding a block with some products of a specific category; Customizing the other pages of the theme; The products grid; The product page; File paths and handles for the other sections of the theme; Summary; Chapter 4: Adding Incredible Effects to Our Theme
- Introducing CSS3 transitionsMultiple property changes; The CSS3 transition properties; Creating an animated cart in the header; Customizing the topcart.phtml file; Customizing the CSS of the cart; Styling the cart's content with CSS; Creating a stunning CSS3 3D flip animation; Planning the hover animation; The HTML code of list-home.phtml; Creating the CSS animation; Creating a custom product images gallery; Planning the work; Integrating prettyPhoto into Magento; Downloading prettyPhoto; Integrating prettyPhoto JS and CSS; Customizing the media.phtml code; Initializing prettyPhoto