Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Learning Magento Theme Development

You're reading from   Learning Magento Theme Development Create visually stunning and responsive themes to customize the appearance of your Magento store

Arrow left icon
Product type Paperback
Published in Aug 2014
Publisher
ISBN-13 9781783280612
Length 182 pages
Edition 1st Edition
Languages
Tools
Concepts
Arrow right icon
Author (1):
Arrow left icon
Richard Carter Richard Carter
Author Profile Icon Richard Carter
Richard Carter
Arrow right icon
View More author details
Toc

Table of Contents (10) Chapters Close

Preface 1. Introduction to Magento and Magento Themes FREE CHAPTER 2. Magento Theming Basics 3. Magento Templates 4. Magento Layout 5. Social Media and Magento 6. Advanced Magento Theming 7. Magento Theming for Mobile and Tablet Devices 8. Magento E-mail Templates Index

Customizing your Magento store's header

As it stands, your current theme looks incomplete at the moment. You can begin to address this by:

  • Adding CSS to customize the header elements of your theme
  • Altering your theme's header.phtml file to customize the HTML used by Magento

Providing CSS for Magento's navigation dropdowns

Most of the styling for Magento's drop-down navigation can be done within CSS. Firstly, you can remove the bullet points and other styling associated with the <ul> elements by adding the following CSS:

.links li, #nav li, .breadcrumbs li {
display: inline;
list-style: none;
}
ul.links, .links li, .breadcrumbs ul, #nav ul {
margin: 0;
padding: 0;
}

Our next task is to restore your Magento theme's CSS for drop-down navigation . This can be done by reusing the CSS applied to #nav from the styles.css file in the /skin/frontend/default/default/css/ folder and copying this into your new theme's styles.css file in the /skin/frontend/default/default...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at R$50/month. Cancel anytime