theming in magento go (part 2) · magento(go—theming(in(magento(go((part2)( 9/14/11...

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."



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…"



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



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…"



/* 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



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



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"



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"



Be sure to visit go.magento.com/support for tutorials, articles and videos to help you

get going with Magento Go!"

theming in magento go (part 2) · magento(go—theming(in(magento(go((part2)( 9/14/11...

Documents