7. Magento Theming for Mobile and Tablet Devices | Learning Magento Theme Development

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Learning Magento Theme Development

By : Richard Carter

3 (2)

Learning Magento Theme Development

3 (2)

By: Richard Carter

Overview of this book

This book is for web designers and developers with existing knowledge of CSS, HTML, and XML, who wish to learn more about Magento-specific theming techniques. Some knowledge of PHP may be useful, but is not necessary.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Introduction to Magento and Magento Themes

1. Introduction to Magento and Magento Themes

What is a Magento theme?

Magento terminology

Magento websites, stores, and store views

Magento theme files

Magento theme hierarchy

Summary

2. Magento Theming Basics

2. Magento Theming Basics

Creating a new Magento theme

Enabling a Magento theme

Changing your Magento store's logo

Customizing your store's favorites icon (favicon)

Customizing Magento's product watermark image

Customizing Magento's product placeholder images

Using the Magento Template Path Hints

Summary

3. Magento Templates

3. Magento Templates

Providing layout style for your Magento theme

Customizing your Magento store's header

Customizing Magento's search box

Adding a static block to a Magento template

Customizing your Magento store's footer

Customizing your store's checkout and cart

Summary

4. Magento Layout

4. Magento Layout

Adding local.xml to your Magento theme

Using layout to change your default Magento page template

Changing a page's layout using Magento's CMS tool

Adding a static block to a page using the Magento layout

Changing the ordering of blocks in Magento's sidebar

Removing unnecessary blocks from Magento's sidebar

Customizing the home page's layout

Adding new product block to the home page

Summary

5. Social Media and Magento

5. Social Media and Magento

Integrating a Twitter feed into your Magento store

Integrating a Facebook Like Box into your Magento store

Including social share buttons in your product pages

Integrating product videos from YouTube into the product page

Summary

6. Advanced Magento Theming

6. Advanced Magento Theming

Adding a custom print style sheet to your Magento store

Using locales to translate phrases in your store

Using Google Web Fonts and @font-face

Styling Magento's layered navigation

Creating a custom 404 "not found" error page

Using snippets to enhance search engine listings

Summary

7. Magento Theming for Mobile and Tablet Devices

7. Magento Theming for Mobile and Tablet Devices

Using CSS media queries to create breakpoints for different device widths

Making images responsive for your Magento theme

Developing responsive navigation

Adding mobile icons for Windows and Apple devices

Summary

8. Magento E-mail Templates

8. Magento E-mail Templates

Working with Magento e-mail templates

Changing the e-mail template logo

Changing the color scheme of your Magento transaction e-mail templates

Altering variables in Magento e-mail templates

Adding a static block to a Magento transactional e-mail template

Integrating the MailChimp subscription form into your Magento store

Integrating the Campaign Monitor subscription form into your Magento store

Summary

Index

Index

Developing responsive navigation

Another critical area for all customers is your navigation—they need to be able to find the products they are looking for easily, after all. Mobiles, tablets, and devices with smaller screens present new challenges in terms of how to present the navigation in a clear way so that users on touchscreen devices will find it easy to interact with.

Firstly, you will need to move the current navigational styling in to the media query for larger screens. So, copy the following CSS code in to the media query you created earlier in this chapter:

@media only screen and (min-width: 50em) {
  #nav li.over{z-index:998}
  #nav a,#nav a:hover{display:block;line-height:1.3em;text-decoration:none}
  #nav span{cursor:pointer;display:block;white-space:nowrap}
  #nav li ul span{white-space:normal}
  #nav ul li.parent a{background: none}
  #nav ul li.parent li a{background-image:none}
  #nav a{color:#333;float:left;font-weight:700;padding:5px 12px 6px 8px}
  #nav ul li,#nav ul li...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning Magento Theme Development

Search

Your notes and bookmarks