Magento Go—Theming in Magento Go (Part 2) 9/14/11
© 2011, Magento, Inc. 1
Theming in Magento Go(Part 2)"
Webinar date: Sep-14, 2011
Presenters: Kara Heinrichs, Brillig House (twitter: @kkarahh) Mosses Akizian, Magento (twitter: @monocat)
Agenda for todayʼs webinar"
INTRODUCTION"– About Magento and Magento Go
PRESENTATION"– Quick review of Theming webinar part 1 – Demonstration of intermediate theming and design
techniques
QUESTIONS & ANSWERS"
Yes, this webinar is being recorded and will be available online later."
Magento Go—Theming in Magento Go (Part 2) 9/14/11
© 2011, Magento, Inc. 2
Introducing Magento Go"
Launched February 2011"
Ready-to-use professionally designed themes"
CSS-based theming approach"
Inline and importable translations"
Drag-and-drop layout editing"
Out-of-the-box payment gateway integrations"
Expand your store with Add-ons"
Professional web design services from partners"
In the Theming Part 1 webinar we did…"
Magento Go—Theming in Magento Go (Part 2) 9/14/11
© 2011, Magento, Inc. 3
Todayʼs topics"
• Some reminders"– What’s a theme in Magento Go – Before you start
• Turning elements on and off"– Adding or removing blocks in the left and right columns – Adding or removing the left and right columns themselves – Turning off elements using CSS
• Adding your own blocks"– Example: Adding social media icons to your footer
• Adding new features or interactivity"– Example: Adding an image slider
Yes, this webinar is being recorded."
What are the parts of a Magento Go theme?"
• Themes in Magento allow you to change:"– Look and feel"
• Colors • Fonts • Images (esp. logo and branding images) • Position of many elements • Some interactive (or active) elements
– Page layouts and blocks"• Presence or absence of functional blocks • Page layouts (esp. number of columns)
– Text labels and translations"
Themes Editor: --Settings editor --CSS editor --Image upload --Font upload --JavaScript editor --Image size settings
Layout Editor:"--Drag and drop editor --limited access to XML
Theme Text Editor:"--Interactive editor
Magento Go—Theming in Magento Go (Part 2) 9/14/11
© 2011, Magento, Inc. 4
Before you start"
• Have a concept/design in mind"• Set up at least some of your catalog"– Create most of your categories and several products
(with images)
• 3rd party tools youʼll need"– Image editing tool
• E.g., Photoshop, Picasa, GIMP, Acorn – CSS/element inspection browser tool
• E.g., Firebug, Chrome inspector, IE WebDev/DebugBar – Multiple browsers for testing
• Firefox, Chrome, IE, Safari, etc. • Cross browser testing website
Letʼs start…"
Magento Go—Theming in Magento Go (Part 2) 9/14/11
© 2011, Magento, Inc. 5
/* Make the content area on the homepage transparent */ .cms-‐index-‐index .col1-‐layout .col-‐main { background: none; }
/* Remove some of the 'white' space in the header and move the nav up */ .header { min-‐height: 0px; posiTon: inherit; } .nav-‐container { top: -‐70px; } #nav { padding-‐leW: 150px; width: 500px; }
/*Adjust the placement of some of the header elements in the smaller space */ .branding { posiTon: relaTve; top: 13px; leW: 5px; z-‐index: 15; } .header .quick-‐access { padding-‐right: 10px; posiTon: relaTve; z-‐index: 15;} .header .form-‐search { background: none; } .header .form-‐search input.input-‐text { background-‐color: #B8C3D7; color: #4d4d4d; }
/* Make the nav semi-‐transparent */ .nav-‐container { background: #000; opacity: 0.5; } #nav { background-‐image: none; }
Adding and removing whole columns"
• Adding or removing the left and right columns from pages is really a matter of picking a new page layout"
• You can change the page layout of only certain types of pages:"
• ADMIN: CMS Pages Manage Content Design tab • ADMIN: Catalog Manage Categories Custom Design tab • ADMIN: Catalog Manage Products Design tab
For those who are familiar with Magento CE/PE/EE, you can also use the “Custom Layout Update” field for each of these page types to enter valid Magento layout XML
Magento Go—Theming in Magento Go (Part 2) 9/14/11
© 2011, Magento, Inc. 6
Page layouts in Magento Go"
header
footer
left right main
header
footer
left main
header
footer
right main
header
footer
main main
3 columns" 2 columns with left bar" 2 columns with right bar"
1 column" Empty"
Turning elements on and off using the Layout Editor"
• Adding or removing blocks in the left and right columns"
• ADMIN: Design Layout Editor (to change them)"• ADMIN: Catalog Search Indexing (to re-cache the page)
For those who are familiar with Magento CE/PE/EE, you can also use the “Custom Layout Update” field for each of these page types to enter valid Magento layout XML
Magento Go—Theming in Magento Go (Part 2) 9/14/11
© 2011, Magento, Inc. 7
Turning elements on and off using CSS"
• Many elements on the page canʼt be turned off using the Layout Editor"
• For these, the CSS display property can be used on specific elements"
• ADMIN: Design Themes Editor CSS Editor"• Edit Custom CSS field: (some examples)"
.checkout-link { display: none; }
.header .form-search { display: none; }
– Use Firebug or another element inspector to find the selectors (names) for each element you want to work with
Working with your own blocks"
• You can also always create your own static blocks"
• Example: Adding social media icons to your footer"– Steps:
• ADMIN: CMS Statics Blocks"– To create a new block"
• ADMIN: CMS Frontend Apps – To assign that block to a location on your website"
• ADMIN: Design Themes Editor CSS Editor – To style the new functionality"
Magento Go—Theming in Magento Go (Part 2) 9/14/11
© 2011, Magento, Inc. 8
Working with JavaScript"
• Additional interactivity can be added to your Magento Go theme and store using Add-ons and JavaScript"
• Example: Adding an image slider to your home page"– Steps:"
• Find and evaluate the JavaScript function and library you want"• ADMIN: Design Themes Editor JavaScript Editor"
– To upload the js files to your installation"• ADMIN: CMS Pages or Static Blocks
– To create the content and call the JavaScript function(s)"• ADMIN: Design Themes Editor CSS Editor
– To style the new functionality"
Magento Go—Theming in Magento Go (Part 2) 9/14/11
© 2011, Magento, Inc. 9
Be sure to visit go.magento.com/support for tutorials, articles and videos to help you
get going with Magento Go!"